feat(odd-platform-ui): owner association wip (#1622)

opendatadiscovery · Apr 9, 2024 · fcfda9d · fcfda9d
1 parent c4a7b23
commit fcfda9d
Show file tree

Hide file tree

Showing 16 changed files with 311 additions and 346 deletions.
diff --git a/...t/OwnerAssociations/OwnerAssociationsHeader/OwnerAssociationForm/OwnerAssociationForm.tsx b/...t/OwnerAssociations/OwnerAssociationsHeader/OwnerAssociationForm/OwnerAssociationForm.tsx
@@ -2,20 +2,14 @@ import React from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import type { Collector, UserOwnerMappingFormData } from 'generated-sources';
-import { registerCollector, updateCollector } from 'redux/thunks';
-import { useAppDispatch, useAppSelector } from 'redux/lib/hooks';
-import {
-  getCollectorCreatingStatuses,
-  getCollectorsUpdatingStatuses,
-} from 'redux/selectors';
+import type { UserOwnerMappingFormData } from 'generated-sources';
 import {
   Button,
   DialogWrapper,
   Input,
   OwnerIdAutocomplete,
+  ProviderAutocomplete,
 } from 'components/shared/elements';
-import Asterisk from 'components/shared/styled-components/asterisk';
 import { useCreateUserOwnerMapping } from 'lib/hooks';
 
 interface OwnerAssociationFormProps {
@@ -30,13 +24,6 @@ const OwnerAssociationForm: React.FC<OwnerAssociationFormProps> = ({ btnCreateEl
     isPending: isAssociationCreating,
     isSuccess,
   } = useCreateUserOwnerMapping();
-  // const dispatch = useAppDispatch();
-  // const { isLoading: isCollectorCreating, isLoaded: isCollectorCreated } = useAppSelector(
-  //   getCollectorCreatingStatuses
-  // );
-  // const { isLoading: isCollectorUpdating, isLoaded: isCollectorUpdated } = useAppSelector(
-  //   getCollectorsUpdatingStatuses
-  // );
 
   const {
     handleSubmit,
@@ -46,29 +33,16 @@ const OwnerAssociationForm: React.FC<OwnerAssociationFormProps> = ({ btnCreateEl
   } = useForm<UserOwnerMappingFormData>({
     mode: 'all',
     reValidateMode: 'onChange',
-    defaultValues: {},
   });
 
   const clearState = () => {
     reset();
   };
 
   const onSubmit = async (data: UserOwnerMappingFormData) => {
-    console.log('UserOwnerMappingFormData', data);
-    // await createUserOwnerMapping({
-    //   userOwnerMappingFormData: data,
-    // });
-    // (collector
-    //   ? dispatch(
-    //       updateCollector({
-    //         collectorId: collector.id,
-    //         collectorFormData: parsedData,
-    //       })
-    //     )
-    //   : dispatch(registerCollector({ collectorFormData: parsedData }))
-    // ).then(() => {
-    //   clearState();
-    // });
+    await createUserOwnerMapping({
+      userOwnerMappingFormData: data,
+    });
   };
 
   const ownerAssociationFormTitle = (
@@ -79,10 +53,6 @@ const OwnerAssociationForm: React.FC<OwnerAssociationFormProps> = ({ btnCreateEl
 
   const ownerAssociationFormContent = () => (
     <form id='owner-association-create-form' onSubmit={handleSubmit(onSubmit)}>
-      <Typography variant='subtitle2' fontSize='0.73rem' sx={{ mb: 1.5 }}>
-        {t('Fields with the')} <Asterisk>*</Asterisk>
-        {' symbol are required to save the Association'}
-      </Typography>
       <Controller
         name='ownerId'
         control={control}
@@ -92,18 +62,26 @@ const OwnerAssociationForm: React.FC<OwnerAssociationFormProps> = ({ btnCreateEl
       <Controller
         name='oidcUsername'
         control={control}
+        defaultValue=''
+        rules={{ required: true }}
         render={({ field }) => (
-          <Input {...field} variant='main-m' sx={{ my: 1.5 }} label='User' />
+          <Input
+            {...field}
+            variant='main-m'
+            sx={{ my: 1.5 }}
+            label='User'
+            placeholder='Enter username'
+          />
         )}
       />
       <Controller
         name='provider'
         control={control}
-        rules={{ required: false }}
-        render={({ field }) => (
-          // <OwnerAutocomplete field={field} disableOwnerCreating={!createOwner} />
-          <div>provider autocomplete</div>
-        )}
+        defaultValue=''
+        rules={{
+          required: true,
+        }}
+        render={({ field }) => <ProviderAutocomplete field={field} />}
       />
     </form>
   );

diff --git a/...iationsList/OwnerAssociationsActive/ActiveAssociationRequest/ActiveAssociationRequest.tsx b/...iationsList/OwnerAssociationsActive/ActiveAssociationRequest/ActiveAssociationRequest.tsx
@@ -1,50 +1,66 @@
 import React from 'react';
 import { Grid, Typography } from '@mui/material';
-import type { OwnerAssociationRequest } from 'generated-sources';
-import { useAppDateTime } from 'lib/hooks';
+import { Permission, type OwnerAssociationRequest } from 'generated-sources';
+import { useAppDateTime, usePermissions, useRemoveUserOwnerMapping } from 'lib/hooks';
+import { Button, ConfirmationDialog, OwnerRoleCell } from 'components/shared/elements';
+import { RejectIcon } from 'components/shared/icons';
+import { useTranslation } from 'react-i18next';
 import * as S from '../../OwnerAssociationsSharedStyles';
 
 interface ActiveAssociationRequestProps {
   ownerName: OwnerAssociationRequest['ownerName'];
+  // FIXME
+  // ownerId: OwnerAssociationRequest['ownerId'];
   username: OwnerAssociationRequest['username'];
   provider?: OwnerAssociationRequest['provider'];
-  // TODO: fix type
-  role?: string;
+  roles?: OwnerAssociationRequest['roles'];
   statusUpdatedBy: OwnerAssociationRequest['statusUpdatedBy'];
   statusUpdatedAt: OwnerAssociationRequest['statusUpdatedAt'];
 }
 
 const ActiveAssociationRequest: React.FC<ActiveAssociationRequestProps> = ({
   provider,
   username,
-  role,
+  roles,
   statusUpdatedBy,
   statusUpdatedAt,
   ownerName,
+  // FIXME
+  // ownerId,
 }) => {
   const { associationRequestFormattedDateTime } = useAppDateTime();
+  const { t } = useTranslation();
+  const { hasAccessTo } = usePermissions();
+  const { mutateAsync: deleteAssociation } = useRemoveUserOwnerMapping();
+
+  const handleDelete = async () => {
+    await deleteAssociation({
+      // FIXME: ownerId is missing
+      ownerId: 1,
+    });
+  };
 
   return (
     <S.AssociationsItemContainer container>
-      <Grid item lg={2.5}>
+      <Grid item lg={2}>
         <Typography variant='body1' noWrap title={username}>
           {username}
         </Typography>
       </Grid>
-      <Grid item lg={2.5}>
+      <Grid item lg={2}>
         <Typography variant='body1' noWrap title={ownerName}>
           {ownerName}
         </Typography>
       </Grid>
-      <Grid item lg={1}>
-        {role}
-      </Grid>
       <Grid item lg={2}>
+        <OwnerRoleCell roles={roles} />
+      </Grid>
+      <Grid item lg={1.5}>
         <Typography variant='body1' noWrap title={provider}>
           {provider}
         </Typography>
       </Grid>
-      <Grid item lg={2}>
+      <Grid item lg={1.5}>
         <Typography
           variant='body1'
           noWrap
@@ -53,12 +69,32 @@ const ActiveAssociationRequest: React.FC<ActiveAssociationRequestProps> = ({
           {statusUpdatedBy?.owner?.name || statusUpdatedBy?.identity.username}
         </Typography>
       </Grid>
-      <Grid item lg={2}>
+      <Grid item lg={1.5}>
         <Typography variant='body1' noWrap>
           {statusUpdatedAt &&
             associationRequestFormattedDateTime(statusUpdatedAt?.getTime())}
         </Typography>
       </Grid>
+      <S.AssociationsItemActionsContainer container item lg={1.5}>
+        <ConfirmationDialog
+          actionTitle='Are you sure you want to remove the association?'
+          actionName='Remove'
+          actionText={
+            <>{`${t('User')} "${username}" ${t(
+              'will stop being associated with owner'
+            )} "${ownerName}"`}</>
+          }
+          onConfirm={handleDelete}
+          actionBtn={
+            <Button
+              text='Remove'
+              buttonType='secondaryWarning-m'
+              startIcon={<RejectIcon />}
+              disabled={!hasAccessTo(Permission.OWNER_ASSOCIATION_MANAGE)}
+            />
+          }
+        />
+      </S.AssociationsItemActionsContainer>
     </S.AssociationsItemContainer>
   );
 };

diff --git a/...nerAssociations/OwnerAssociationsList/OwnerAssociationsActive/OwnerAssociationsActive.tsx b/...nerAssociations/OwnerAssociationsList/OwnerAssociationsActive/OwnerAssociationsActive.tsx
@@ -50,24 +50,25 @@ const OwnerAssociationsActive: React.FC<OwnerAssociationsActiveProps> = ({ size
   return (
     <Grid container flexDirection='column' alignItems='center'>
       <S.TableHeader container>
-        <Grid item lg={2.5}>
+        <Grid item lg={2}>
           {tableCellText(t('User name'))}
         </Grid>
-        <Grid item lg={2.5}>
+        <Grid item lg={2}>
           {tableCellText(t('Owner name'))}
         </Grid>
-        <Grid item lg={1}>
+        <Grid item lg={2}>
           {tableCellText('Role')}
         </Grid>
-        <Grid item lg={2}>
+        <Grid item lg={1.5}>
           {tableCellText(t('Provider'))}
         </Grid>
-        <Grid item lg={2}>
+        <Grid item lg={1.5}>
           {tableCellText(t('Resolved by'))}
         </Grid>
-        <Grid item lg={2}>
+        <Grid item lg={1.5}>
           {tableCellText(t('Resolved at'))}
         </Grid>
+        <Grid item lg={1.5} />
       </S.TableHeader>
       {activeAssociations.length > 0 && (
         <ScrollableContainer container id='active-associations-list'>
@@ -83,10 +84,10 @@ const OwnerAssociationsActive: React.FC<OwnerAssociationsActiveProps> = ({ size
               <ActiveAssociationRequest
                 key={association.id}
                 ownerName={association.ownerName}
+                // ownerId={association.ownerId}
                 provider={association.provider}
                 username={association.username}
-                // TODO: Add role to ActiveAssociationRequest
-                // role={association.status}
+                roles={association.roles}
                 statusUpdatedAt={association.statusUpdatedAt}
                 statusUpdatedBy={association.statusUpdatedBy}
               />

diff --git a/...wnerAssociationsList/OwnerAssociationsNew/NewAssociationRequest/NewAssociationRequest.tsx b/...wnerAssociationsList/OwnerAssociationsNew/NewAssociationRequest/NewAssociationRequest.tsx
@@ -3,62 +3,50 @@ import { Grid, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import {
   type OwnerAssociationRequest,
-  type OwnerAssociationRequestApiUpdateOwnerAssociationRequestRequest,
   OwnerAssociationRequestStatus,
   Permission,
 } from 'generated-sources';
-import { Button, ConfirmationDialog } from 'components/shared/elements';
+import { Button, ConfirmationDialog, OwnerRoleCell } from 'components/shared/elements';
 import { AcceptIcon, RejectIcon } from 'components/shared/icons';
-import { updateOwnerAssociationRequest } from 'redux/thunks';
-import { useAppDispatch } from 'redux/lib/hooks';
-import { usePermissions } from 'lib/hooks';
+import { usePermissions, useUpdateAssociationRequest } from 'lib/hooks';
 import * as S from '../../OwnerAssociationsSharedStyles';
 
 interface NewAssociationRequestProps {
   id: OwnerAssociationRequest['id'];
   ownerName: OwnerAssociationRequest['ownerName'];
   username: OwnerAssociationRequest['username'];
   provider?: OwnerAssociationRequest['provider'];
-  // TODO: fix type
-  role?: string;
+  roles?: OwnerAssociationRequest['roles'];
 }
 
 const NewAssociationRequest: React.FC<NewAssociationRequestProps> = ({
   id,
   ownerName,
   username,
   provider,
-  role,
+  roles,
 }) => {
   const { t } = useTranslation();
-  const dispatch = useAppDispatch();
   const { hasAccessTo } = usePermissions();
+  const { mutateAsync: updateOwnerAssociationRequest } = useUpdateAssociationRequest();
 
-  const dispatchedRequest = (
-    params: OwnerAssociationRequestApiUpdateOwnerAssociationRequestRequest
-  ) => dispatch(updateOwnerAssociationRequest(params));
+  const handleAccept = React.useCallback(async () => {
+    await updateOwnerAssociationRequest({
+      ownerAssociationRequestId: id,
+      ownerAssociationRequestStatusFormData: {
+        status: OwnerAssociationRequestStatus.APPROVED,
+      },
+    });
+  }, [id]);
 
-  const handleAccept = React.useCallback(
-    () =>
-      dispatchedRequest({
-        ownerAssociationRequestId: id,
-        ownerAssociationRequestStatusFormData: {
-          status: OwnerAssociationRequestStatus.APPROVED,
-        },
-      }),
-    [id]
-  );
-
-  const handleReject = React.useCallback(
-    () =>
-      dispatchedRequest({
-        ownerAssociationRequestId: id,
-        ownerAssociationRequestStatusFormData: {
-          status: OwnerAssociationRequestStatus.DECLINED,
-        },
-      }),
-    [id]
-  );
+  const handleReject = React.useCallback(async () => {
+    await updateOwnerAssociationRequest({
+      ownerAssociationRequestId: id,
+      ownerAssociationRequestStatusFormData: {
+        status: OwnerAssociationRequestStatus.DECLINED,
+      },
+    });
+  }, [id]);
 
   return (
     <S.AssociationsItemContainer container>
@@ -73,7 +61,7 @@ const NewAssociationRequest: React.FC<NewAssociationRequestProps> = ({
         </Typography>
       </Grid>
       <Grid item lg={2.5}>
-        {role}
+        <OwnerRoleCell roles={roles} />
       </Grid>
       <Grid item lg={1.5}>
         {provider}

diff --git a/...ent/OwnerAssociations/OwnerAssociationsList/OwnerAssociationsNew/OwnerAssociationsNew.tsx b/...ent/OwnerAssociations/OwnerAssociationsList/OwnerAssociationsNew/OwnerAssociationsNew.tsx
@@ -78,8 +78,7 @@ const OwnerAssociationsNew: React.FC<OwnerAssociationsNewProps> = ({ size }) =>
               <NewAssociationRequest
                 key={association.id}
                 id={association.id}
-                // TODO: Add role to NewAssociationRequest
-                // role={association.status}
+                roles={association.roles}
                 ownerName={association.ownerName}
                 provider={association.provider}
                 username={association.username}