From 318fb85e471a96b10274c4f502cfac7971169acf Mon Sep 17 00:00:00 2001
From: Novak Zaballa <41410593+novakzaballa@users.noreply.github.com>
Date: Mon, 24 Jun 2024 11:20:42 -0400
Subject: [PATCH] feat: Add UI for SAML attribute mapping (#4184)

Co-authored-by: Matthew Elwell <matthew.elwell@flagsmith.com>
---
 .../services/useSamlAttributeMapping.ts       | 124 ++++++++++++
 frontend/common/types/requests.ts             |  18 ++
 frontend/common/types/responses.ts            |  11 ++
 .../components/SAMLAttributeMappingTable.tsx  | 135 +++++++++++++
 frontend/web/components/SamlTab.tsx           |   4 +-
 frontend/web/components/Tooltip.tsx           |   5 +-
 frontend/web/components/modals/CreateSAML.tsx | 185 +++++++++++++++---
 7 files changed, 448 insertions(+), 34 deletions(-)
 create mode 100644 frontend/common/services/useSamlAttributeMapping.ts
 create mode 100644 frontend/web/components/SAMLAttributeMappingTable.tsx

diff --git a/frontend/common/services/useSamlAttributeMapping.ts b/frontend/common/services/useSamlAttributeMapping.ts
new file mode 100644
index 000000000000..f271b12140c0
--- /dev/null
+++ b/frontend/common/services/useSamlAttributeMapping.ts
@@ -0,0 +1,124 @@
+import { Res } from 'common/types/responses'
+import { Req } from 'common/types/requests'
+import { service } from 'common/service'
+
+export const samlAttributeMappingService = service
+  .enhanceEndpoints({ addTagTypes: ['SamlAttributeMapping'] })
+  .injectEndpoints({
+    endpoints: (builder) => ({
+      createSamlAttributeMapping: builder.mutation<
+        Res['samlAttributeMapping'],
+        Req['createSamlAttributeMapping']
+      >({
+        invalidatesTags: [{ id: 'LIST', type: 'SamlAttributeMapping' }],
+        query: (query: Req['createSamlAttributeMapping']) => ({
+          body: query.body,
+          method: 'POST',
+          url: `auth/saml/attribute-mapping/`,
+        }),
+      }),
+      deleteSamlAttributeMapping: builder.mutation<
+        Res['samlAttributeMapping'],
+        Req['deleteSamlAttributeMapping']
+      >({
+        invalidatesTags: [{ id: 'LIST', type: 'SamlAttributeMapping' }],
+        query: (query: Req['deleteSamlAttributeMapping']) => ({
+          method: 'DELETE',
+          url: `auth/saml/attribute-mapping/${query.attribute_id}`,
+        }),
+      }),
+      getSamlAttributeMapping: builder.query<
+        Res['samlAttributeMapping'],
+        Req['getSamlAttributeMapping']
+      >({
+        providesTags: () => [{ id: 'LIST', type: 'SamlAttributeMapping' }],
+        query: (query: Req['getSamlAttributeMapping']) => ({
+          url: `auth/saml/attribute-mapping/?saml_configuration=${query.saml_configuration_id}`,
+        }),
+      }),
+      updateSamlAttributeMapping: builder.mutation<
+        Res['samlAttributeMapping'],
+        Req['updateSamlAttributeMapping']
+      >({
+        invalidatesTags: () => [{ id: 'LIST', type: 'SamlAttributeMapping' }],
+        query: (query: Req['updateSamlAttributeMapping']) => ({
+          body: query.body,
+          method: 'PUT',
+          url: `auth/saml/attribute-mapping/${query.attribute_id}`,
+        }),
+      }),
+      // END OF ENDPOINTS
+    }),
+  })
+
+export async function createSamlAttributeMapping(
+  store: any,
+  data: Req['createSamlAttributeMapping'],
+  options?: Parameters<
+    typeof samlAttributeMappingService.endpoints.createSamlAttributeMapping.initiate
+  >[1],
+) {
+  return store.dispatch(
+    samlAttributeMappingService.endpoints.createSamlAttributeMapping.initiate(
+      data,
+      options,
+    ),
+  )
+}
+export async function deleteSamlAttributeMapping(
+  store: any,
+  data: Req['deleteSamlAttributeMapping'],
+  options?: Parameters<
+    typeof samlAttributeMappingService.endpoints.deleteSamlAttributeMapping.initiate
+  >[1],
+) {
+  return store.dispatch(
+    samlAttributeMappingService.endpoints.deleteSamlAttributeMapping.initiate(
+      data,
+      options,
+    ),
+  )
+}
+export async function getSamlAttributeMapping(
+  store: any,
+  data: Req['getSamlAttributeMapping'],
+  options?: Parameters<
+    typeof samlAttributeMappingService.endpoints.getSamlAttributeMapping.initiate
+  >[1],
+) {
+  return store.dispatch(
+    samlAttributeMappingService.endpoints.getSamlAttributeMapping.initiate(
+      data,
+      options,
+    ),
+  )
+}
+export async function updateSamlAttributeMapping(
+  store: any,
+  data: Req['updateSamlAttributeMapping'],
+  options?: Parameters<
+    typeof samlAttributeMappingService.endpoints.updateSamlAttributeMapping.initiate
+  >[1],
+) {
+  return store.dispatch(
+    samlAttributeMappingService.endpoints.updateSamlAttributeMapping.initiate(
+      data,
+      options,
+    ),
+  )
+}
+// END OF FUNCTION_EXPORTS
+
+export const {
+  useCreateSamlAttributeMappingMutation,
+  useDeleteSamlAttributeMappingMutation,
+  useGetSamlAttributeMappingQuery,
+  useUpdateSamlAttributeMappingMutation,
+  // END OF EXPORTS
+} = samlAttributeMappingService
+
+/* Usage examples:
+const { data, isLoading } = useGetSamlAttributeMappingQuery({ id: 2 }, {}) //get hook
+const [createSamlAttributeMapping, { isLoading, data, isSuccess }] = useCreateSamlAttributeMappingMutation() //create hook
+samlAttributeMappingService.endpoints.getSamlAttributeMapping.select({id: 2})(store.getState()) //access data from any function
+*/
diff --git a/frontend/common/types/requests.ts b/frontend/common/types/requests.ts
index f5ac0efa5828..7fd0aab64f99 100644
--- a/frontend/common/types/requests.ts
+++ b/frontend/common/types/requests.ts
@@ -12,6 +12,7 @@ import {
   ProjectFlag,
   Environment,
   UserGroup,
+  AttributeName,
 } from './responses'
 
 export type PagedRequest<T> = T & {
@@ -486,5 +487,22 @@ export type Req = {
   updateSamlConfiguration: { name: string; body: SAMLConfiguration }
   deleteSamlConfiguration: { name: string }
   createSamlConfiguration: SAMLConfiguration
+  getSamlAttributeMapping: { saml_configuration_id: number }
+  updateSamlAttributeMapping: {
+    attribute_id: number
+    body: {
+      saml_configuration: number
+      django_attribute_name: AttributeName
+      idp_attribute_name: string
+    }
+  }
+  deleteSamlAttributeMapping: { attribute_id: number }
+  createSamlAttributeMapping: {
+    body: {
+      saml_configuration: number
+      django_attribute_name: AttributeName
+      idp_attribute_name: string
+    }
+  }
   // END OF TYPES
 }
diff --git a/frontend/common/types/responses.ts b/frontend/common/types/responses.ts
index 9093d36c526f..95e13fd623a5 100644
--- a/frontend/common/types/responses.ts
+++ b/frontend/common/types/responses.ts
@@ -429,6 +429,8 @@ export type AuthType = 'EMAIL' | 'GITHUB' | 'GOOGLE'
 
 export type SignupType = 'NO_INVITE' | 'INVITE_EMAIL' | 'INVITE_LINK'
 
+export type AttributeName = 'email' | 'first_name' | 'last_name' | 'groups'
+
 export type Invite = {
   id: number
   email: string
@@ -554,6 +556,7 @@ export type MetadataModelField = {
 }
 
 export type SAMLConfiguration = {
+  id: number
   organisation: number
   name: string
   frontend_url: string
@@ -561,6 +564,13 @@ export type SAMLConfiguration = {
   allow_idp_initiated?: boolean
 }
 
+export type SAMLAttributeMapping = {
+  id: number
+  saml_configuration: number
+  django_attribute_name: AttributeName
+  idp_attribute_name: string
+}
+
 export type Res = {
   segments: PagedResponse<Segment>
   segment: Segment
@@ -679,5 +689,6 @@ export type Res = {
     response_url: string
     metadata_xml: string
   }
+  samlAttributeMapping: PagedResponse<SAMLAttributeMapping>
   // END OF TYPES
 }
diff --git a/frontend/web/components/SAMLAttributeMappingTable.tsx b/frontend/web/components/SAMLAttributeMappingTable.tsx
new file mode 100644
index 000000000000..14151eb89caf
--- /dev/null
+++ b/frontend/web/components/SAMLAttributeMappingTable.tsx
@@ -0,0 +1,135 @@
+import React, { FC } from 'react'
+
+import {
+  useDeleteSamlAttributeMappingMutation,
+  useGetSamlAttributeMappingQuery,
+} from 'common/services/useSamlAttributeMapping'
+import PanelSearch from './PanelSearch'
+import Button from './base/forms/Button'
+import Icon from './Icon'
+import { SAMLAttributeMapping } from 'common/types/responses'
+import Format from 'common/utils/format'
+import Tooltip from './Tooltip'
+
+type SAMLAttributeMappingTableType = {
+  samlConfigurationId: number
+}
+const SAMLAttributeMappingTable: FC<SAMLAttributeMappingTableType> = ({
+  samlConfigurationId,
+}) => {
+  const { data } = useGetSamlAttributeMappingQuery(
+    {
+      saml_configuration_id: samlConfigurationId,
+    },
+    { skip: !samlConfigurationId },
+  )
+
+  const [deleteSamlAttribute] = useDeleteSamlAttributeMappingMutation()
+
+  return (
+    <div>
+      <PanelSearch
+        className='no-pad overflow-visible mt-4'
+        id='features-list'
+        renderSearchWithNoResults
+        itemHeight={65}
+        isLoading={false}
+        header={
+          <Row className='table-header'>
+            <Flex className='table-column px-3'>
+              <div className='font-weight-medium'>SAML Attribute Name</div>
+            </Flex>
+            <Flex className='table-column px-3'>
+              <div className='table-column' style={{ width: '375px' }}>
+                IDP Attribute Name
+              </div>
+            </Flex>
+          </Row>
+        }
+        items={data?.results || []}
+        renderRow={(attribute: SAMLAttributeMapping) => (
+          <Row
+            space
+            className='list-item'
+            key={attribute.django_attribute_name}
+          >
+            <Flex className='table-column px-3'>
+              <div className='font-weight-medium mb-1'>
+                {Format.camelCase(
+                  attribute.django_attribute_name.replace(/_/g, ' '),
+                )}
+              </div>
+            </Flex>
+            <Flex className='table-column px-3'>
+              <Tooltip
+                title={
+                  <div
+                    className='table-column'
+                    style={{
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                      width: '305px',
+                    }}
+                  >
+                    {attribute.idp_attribute_name}
+                  </div>
+                }
+              >
+                {attribute.idp_attribute_name}
+              </Tooltip>
+            </Flex>
+            <div className='table-column'>
+              <Button
+                id='delete-attribute'
+                data-test='delete-attribute'
+                type='button'
+                onClick={(e) => {
+                  openModal2(
+                    'Delete SAML attribute',
+                    <div>
+                      <div>
+                        Are you sure you want to delete the attribute{' '}
+                        <b>{`${Format.camelCase(
+                          attribute.django_attribute_name.replace(/_/g, ' '),
+                        )}?`}</b>
+                      </div>
+                      <div className='text-right'>
+                        <Button
+                          className='mr-2'
+                          onClick={() => {
+                            closeModal2()
+                          }}
+                        >
+                          Cancel
+                        </Button>
+                        <Button
+                          theme='danger'
+                          onClick={() => {
+                            deleteSamlAttribute({
+                              attribute_id: attribute.id,
+                            }).then(() => {
+                              toast('SAML attribute deleted')
+                              closeModal2()
+                            })
+                          }}
+                        >
+                          Delete
+                        </Button>
+                      </div>
+                    </div>,
+                  )
+                  e.stopPropagation()
+                  e.preventDefault()
+                }}
+                className='btn btn-with-icon'
+              >
+                <Icon name='trash-2' width={20} fill='#656D7B' />
+              </Button>
+            </div>
+          </Row>
+        )}
+      />
+    </div>
+  )
+}
+export default SAMLAttributeMappingTable
diff --git a/frontend/web/components/SamlTab.tsx b/frontend/web/components/SamlTab.tsx
index 39354aa829f2..bb8f47bcbbe0 100644
--- a/frontend/web/components/SamlTab.tsx
+++ b/frontend/web/components/SamlTab.tsx
@@ -95,7 +95,7 @@ const SamlTab: FC<SamlTabType> = ({ organisationId }) => {
                   type='button'
                   onClick={(e) => {
                     openModal(
-                      'Delete Github Integration',
+                      'Delete SAML configuration',
                       <div>
                         <div>
                           Are you sure you want to delete the SAML
@@ -105,7 +105,7 @@ const SamlTab: FC<SamlTabType> = ({ organisationId }) => {
                           <Button
                             className='mr-2'
                             onClick={() => {
-                              closeModal2()
+                              closeModal()
                             }}
                           >
                             Cancel
diff --git a/frontend/web/components/Tooltip.tsx b/frontend/web/components/Tooltip.tsx
index debc18934548..842cb314f1dd 100644
--- a/frontend/web/components/Tooltip.tsx
+++ b/frontend/web/components/Tooltip.tsx
@@ -35,7 +35,10 @@ const Tooltip: FC<TooltipProps> = ({
           {plainText ? (
             `${children}`
           ) : (
-            <div dangerouslySetInnerHTML={{ __html: children }} />
+            <div
+              style={{ wordBreak: 'break-word' }}
+              dangerouslySetInnerHTML={{ __html: children }}
+            />
           )}
         </ReactTooltip>
       )}
diff --git a/frontend/web/components/modals/CreateSAML.tsx b/frontend/web/components/modals/CreateSAML.tsx
index d00efcd91635..b81e6d153334 100644
--- a/frontend/web/components/modals/CreateSAML.tsx
+++ b/frontend/web/components/modals/CreateSAML.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react'
+import React, { FC, useEffect, useState } from 'react'
 import InputGroup from 'components/base/forms/InputGroup'
 import Utils from 'common/utils/utils'
 import Switch from 'components/Switch'
@@ -9,6 +9,7 @@ import {
   useGetSamlConfigurationQuery,
   getSamlConfigurationMetadata,
 } from 'common/services/useSamlConfiguration'
+import { useCreateSamlAttributeMappingMutation } from 'common/services/useSamlAttributeMapping'
 import Button from 'components/base/forms/Button'
 import { Req } from 'common/types/requests'
 import ErrorMessage from 'components/ErrorMessage'
@@ -16,27 +17,53 @@ import { getStore } from 'common/store'
 import XMLUpload from 'components/XMLUpload'
 import { IonIcon } from '@ionic/react'
 import { cloudDownloadOutline } from 'ionicons/icons'
+import Tabs from 'components/base/forms/Tabs'
+import TabItem from 'components/base/forms/TabItem'
+import { AttributeName } from 'common/types/responses'
+import SAMLAttributeMappingTable from 'components/SAMLAttributeMappingTable'
 
 type CreateSAML = {
   organisationId: number
   samlName?: string
 }
 
+type samlAttributeType = { id: number; label: string; value: AttributeName }
+type samlAttributesType = samlAttributeType[]
+
 const CreateSAML: FC<CreateSAML> = ({ organisationId, samlName }) => {
+  const [previousName, setPreviousName] = useState<string>(samlName || '')
   const [name, setName] = useState<string>(samlName || '')
   const [frontendUrl, setFrontendUrl] = useState<string>(window.location.origin)
   const [metadataXml, setMetadataXml] = useState<string>('')
   const [allowIdpInitiated, setAllowIdpInitiated] = useState<boolean>(false)
   const [isLoading, setIsLoading] = useState<boolean>(false)
   const [file, setFile] = useState<File | null>(null)
-  const [createSamlConfiguration, createError] =
-    useCreateSamlConfigurationMutation()
-  const [editSamlConfiguration, updateError] =
-    useUpdateSamlConfigurationMutation()
-  const { data } = useGetSamlConfigurationQuery(
+  const [isEdit, setIsEdit] = useState<boolean>(!!samlName || false)
+  const [
+    createSamlConfiguration,
+    { error: createError, isError: hasCreateError },
+  ] = useCreateSamlConfigurationMutation()
+  const [
+    editSamlConfiguration,
+    { error: updateError, isError: hasUpdateError },
+  ] = useUpdateSamlConfigurationMutation()
+  const { data, isSuccess } = useGetSamlConfigurationQuery(
     { name: samlName! },
     { skip: !samlName },
   )
+
+  useEffect(() => {
+    if (isSuccess && data) {
+      setPreviousName(data.name)
+    }
+  }, [data, isSuccess])
+
+  const samlAttributes: samlAttributesType = [
+    { id: 1, label: 'Email', value: 'email' },
+    { id: 2, label: 'First name', value: 'first_name' },
+    { id: 3, label: 'Last name', value: 'last_name' },
+    { id: 4, label: 'Groups', value: 'groups' },
+  ]
   const validateName = (name: string) => {
     const regularExpresion = /^$|^[a-zA-Z0-9_+-]+$/
     return regularExpresion.test(name)
@@ -52,11 +79,10 @@ const CreateSAML: FC<CreateSAML> = ({ organisationId, samlName }) => {
 
   const downloadServiceProvider = () => {
     setIsLoading(true)
-    const name = data?.name || samlName
-    getSamlConfigurationMetadata(getStore(), { name: name! })
+    getSamlConfigurationMetadata(getStore(), { name: previousName })
       .then((res) => {
         if (res.error) {
-          convetToXmlFile(name!, res.error.data)
+          convetToXmlFile(previousName, res.error.data)
         }
       })
       .finally(() => {
@@ -69,8 +95,8 @@ const CreateSAML: FC<CreateSAML> = ({ organisationId, samlName }) => {
     convetToXmlFile(`IDP metadata ${name!}`, data?.idp_metadata_xml || '')
   }
 
-  return (
-    <div className='create-feature-tab px-3'>
+  const Tab1 = (
+    <div className='create-feature-tab px-3 mt-3'>
       <InputGroup
         className='mt-2'
         title='Name*'
@@ -79,9 +105,9 @@ const CreateSAML: FC<CreateSAML> = ({ organisationId, samlName }) => {
         tooltipPlace='right'
         value={name}
         onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-          const nuevoNombre = Utils.safeParseEventValue(event)
-          if (validateName(nuevoNombre)) {
-            setName(nuevoNombre)
+          const newName = Utils.safeParseEventValue(event).replace(/ /g, '_')
+          if (validateName(newName)) {
+            setName(newName)
           }
         }}
         inputProps={{
@@ -172,15 +198,21 @@ const CreateSAML: FC<CreateSAML> = ({ organisationId, samlName }) => {
           />
         </div>
       </FormGroup>
-
+      {(!!hasCreateError || !!hasUpdateError) && (
+        <div className='mt-2'>
+          <ErrorMessage error={createError || updateError} />
+        </div>
+      )}
       <div className='text-right py-2'>
-        <Button
-          disabled={isLoading}
-          onClick={downloadServiceProvider}
-          className='mr-2'
-        >
-          {isLoading ? 'Downloading' : 'Download Service Provider Metadata'}
-        </Button>
+        {isEdit && (
+          <Button
+            disabled={isLoading}
+            onClick={downloadServiceProvider}
+            className='mr-2'
+          >
+            {isLoading ? 'Downloading' : 'Download Service Provider Metadata'}
+          </Button>
+        )}
         <Button
           type='submit'
           disabled={!name || !frontendUrl}
@@ -196,16 +228,18 @@ const CreateSAML: FC<CreateSAML> = ({ organisationId, samlName }) => {
             if (allowIdpInitiated) {
               body.allow_idp_initiated = allowIdpInitiated
             }
-            if (data) {
+            if (isEdit) {
+              const samlNameConfiguration = previousName
               editSamlConfiguration({
                 body: { ...body },
-                name: samlName!,
+                name: samlNameConfiguration,
               }).then((res) => {
                 if (res.data) {
                   setName(res.data.name)
                   setFrontendUrl(res.data.frontend_url)
                   setMetadataXml(res.data.idp_metadata_xml)
                   setAllowIdpInitiated(res.data.allow_idp_initiated)
+                  setPreviousName(res.data.name)
                   toast('SAML configuration updated!')
                 }
               })
@@ -217,22 +251,111 @@ const CreateSAML: FC<CreateSAML> = ({ organisationId, samlName }) => {
                   setMetadataXml(res.data.idp_metadata_xml)
                   setAllowIdpInitiated(res.data.allow_idp_initiated)
                   toast('SAML configuration Created!')
-                  closeModal()
+                  setIsEdit(true)
+                  setPreviousName(res.data.name)
                 }
               })
             }
           }}
         >
-          {data ? 'Update Configuration' : 'Create Configuration'}
+          {isEdit ? 'Update Configuration' : 'Create Configuration'}
         </Button>
       </div>
-      {!!createError ||
-        (!!updateError && (
+    </div>
+  )
+
+  const Tab2: FC<any> = () => {
+    const [ipdAttributeName, setIdpAttributeName] = useState<string>('')
+    const [djangoAttributeName, setDjangoAttributeName] =
+      useState<samlAttributeType>(samlAttributes[0])
+    const [CreateSamlAttributeMapping, { error: errorAttributeCreation }] =
+      useCreateSamlAttributeMappingMutation()
+    return (
+      <div className='create-feature-tab mt-3'>
+        <InputGroup
+          title={'SAML Attribute Name*'}
+          tooltip='This is the attribute name where you want to store the information received from the SAML identity provider'
+          tooltipPlace='right'
+          component={
+            <Select
+              value={djangoAttributeName}
+              placeholder='Select a SAML attribute name'
+              options={samlAttributes}
+              onChange={(m: samlAttributeType) => {
+                setDjangoAttributeName(m)
+              }}
+              className='mb-4 react-select'
+            />
+          }
+        />
+        <InputGroup
+          className='mt-2'
+          title='IDP Attribute Name*'
+          data-test='attribute-name'
+          tooltip='This is the specific value of the attribute sent by the SAML identity provider'
+          tooltipPlace='right'
+          value={ipdAttributeName}
+          onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+            setIdpAttributeName(Utils.safeParseEventValue(event))
+          }}
+          inputProps={{
+            className: 'full-width',
+          }}
+          type='text'
+          name='Name*'
+        />
+        <div className='text-right'>
+          <Button
+            disabled={!ipdAttributeName}
+            className='text-right'
+            onClick={() => {
+              CreateSamlAttributeMapping({
+                body: {
+                  django_attribute_name: djangoAttributeName?.value ?? '',
+                  idp_attribute_name: ipdAttributeName,
+                  saml_configuration: data?.id,
+                },
+              })
+            }}
+          >
+            Add Attribute
+          </Button>
+        </div>
+        {errorAttributeCreation && (
           <div className='mt-2'>
-            <ErrorMessage error={createError || updateError} />
+            <ErrorMessage error={errorAttributeCreation} />
           </div>
-        ))}
-    </div>
+        )}
+        <SAMLAttributeMappingTable samlConfigurationId={data?.id || 0} />
+      </div>
+    )
+  }
+
+  return (
+    <>
+      {!isEdit ? (
+        Tab1
+      ) : (
+        <Tabs uncontrolled>
+          <TabItem
+            tabLabel={
+              <Row className='justify-content-center'>Basic Configuration</Row>
+            }
+          >
+            {Tab1}
+          </TabItem>
+          <TabItem
+            tabLabel={
+              <Row className='justify-content-center'>Attribute Mapping</Row>
+            }
+          >
+            <div className='create-feature-tab px-3'>
+              <Tab2 />
+            </div>
+          </TabItem>
+        </Tabs>
+      )}
+    </>
   )
 }
 export default CreateSAML