-
Notifications
You must be signed in to change notification settings - Fork 429
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Add UI for SAML attribute mapping (#4184)
Co-authored-by: Matthew Elwell <[email protected]>
- Loading branch information
1 parent
5c25c41
commit 318fb85
Showing
7 changed files
with
448 additions
and
34 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
| */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.