access request ui

Author: MengZhuNAV

components/dataproducts/access/datasetAccess.tsx

@@ -19,7 +19,7 @@ import { ExternalLink } from '@navikt/ds-icons'
 import { nb } from 'date-fns/locale'
 import ErrorMessage from '../../lib/error'
 import { useGetDataset } from '../../../lib/rest/dataproducts'
-import { useFetchAccessRequestsForDataset } from '../../../lib/rest/access'
+import { apporveAccessRequest, denyAccessRequest, useFetchAccessRequestsForDataset } from '../../../lib/rest/access'
 
 interface AccessEntry {
   subject: string
@@ -126,23 +126,89 @@ interface AccessModalProps {
 
 interface AccessRequestModalProps {
   requestID: string
-  actionDeny: (requestID: string, setOpen: Function) => void
-  actionApprove: (requestID: string) => void
+  user?: string
 }
 
 export const AccessRequestModal = ({
   requestID,
-  actionDeny,
-  actionApprove,
+  user,
 }: AccessRequestModalProps) => {
-  const [open, setOpen] = useState(false)
+  const [openDeny, setOpenDeny] = useState(false)
+  const [openApprove, setOpenApprove] = useState(false)
+  const [errorApprove, setErrorApprove] = useState<string|undefined>(undefined)
+  const [errorDeny, setErrorDeny] = useState<string|undefined>(undefined)
+  const approve = async (requestID: string) => 
+    apporveAccessRequest(requestID).then(res=> 
+    {
+      setOpenApprove(false)
+      setErrorApprove(undefined)
+      window.location.reload();
+    }
+    ).catch((e:any)=>{
+      setErrorApprove(e.message)
+    })
+  const deny = async (requestID: string, reason?: string)=>denyAccessRequest(requestID, reason ||'')
+  .then(()=>{
+    setOpenDeny(false)
+    setErrorDeny(undefined)
+    window.location.reload();
+  }).catch((e:any)=>{
+    setErrorDeny(e.message)
+  })
+
+
+  const cancelApprove = () => {
+    setOpenApprove(false)
+    setErrorApprove(undefined)
+  }
+
+  const cancelDeny = () => {
+    setOpenDeny(false)
+    setErrorDeny(undefined)
+  }
+
   return (
     <>
       <Modal
-        open={open}
+        open={openApprove}
+        aria-label="Godkjenn søknad"
+        onClose={() => setOpenApprove(false)}
+        className='w-full md:w-[60rem] px-8 h-[13rem]'
+      >
+        <Modal.Body className='h-full'>
+          <div className='flex flex-col justify-center items-center'>
+            <Heading level="1" size="medium">
+              Godkjenn søknad
+            </Heading>
+            <p className='mt-4 mb-4'>Gi tilgang til datasett{user ? ` til ${user}` : ''}? </p>
+            <div className="flex flex-row gap-4">
+              <Button
+                onClick={cancelApprove}
+                variant="secondary"
+                size="small"
+              >
+                Avbryt
+              </Button>
+              <Button
+                onClick={() => {
+                  approve(requestID)
+                }}
+                variant="primary"
+                size="small"
+              >
+                Godkjenn
+              </Button>
+            </div>
+            {errorApprove && <div className='text-red-600'>{errorApprove}</div>}
+            </div>
+        </Modal.Body>
+      </Modal>
+
+      <Modal
+        open={openDeny}
         aria-label="Avslå søknad"
-        onClose={() => setOpen(false)}
-        className="max-w-full md:max-w-3xl px-8 h-[20rem]"
+        onClose={() => setOpenDeny(false)}
+        className="max-w-full md:max-w-3xl px-8 h-[24rem]"
       >
         <Modal.Body className="h-full">
           <div className="flex flex-col gap-8">
@@ -152,32 +218,33 @@ export const AccessRequestModal = ({
             <Textarea label="Begrunnelse" />
             <div className="flex flex-row gap-4">
               <Button
-                onClick={() => setOpen(false)}
+                onClick={cancelDeny}
                 variant="secondary"
                 size="small"
               >
                 Avbryt
               </Button>
               <Button
-                onClick={() => actionDeny(requestID, setOpen)}
+                onClick={() => deny(requestID)}
                 variant="primary"
                 size="small"
               >
                 Avslå
               </Button>
             </div>
+            {errorDeny && <div className='text-red-600'>{errorDeny}</div>}
           </div>
         </Modal.Body>
       </Modal>
       <div className="flex flex-row flex-nowrap gap-4 justify-end">
         <Button
-          onClick={() => actionApprove(requestID)}
+          onClick={() => setOpenApprove(true)}
           variant="secondary"
           size="small"
         >
           Godkjenn
         </Button>
-        <Button onClick={() => setOpen(true)} variant="secondary" size="small">
+        <Button onClick={() => setOpenDeny(true)} variant="secondary" size="small">
           Avslå
         </Button>
       </div>
@@ -235,8 +302,6 @@ const AccessModal = ({ accessEntry, action }: AccessModalProps) => {
 const DatasetAccess = ({ id }: AccessListProps) => {
   const [formError, setFormError] = useState('')
   const [revokeAccess] = useRevokeAccessMutation()
-  const [approveAccessRequest] = useApproveAccessRequestMutation()
-  const [denyAccessRequest] = useDenyAccessRequestMutation()
   const fetchAccessRequestsForDataset = useFetchAccessRequestsForDataset(id)
 
   const getDataset = useGetDataset(id)
@@ -256,32 +321,6 @@ const DatasetAccess = ({ id }: AccessListProps) => {
     !getDataset?.dataset?.access ? [] :
     getDataset.dataset.access
 
-  const approveRequest = async (requestID: string) => {
-    try {
-      await approveAccessRequest({
-        variables: { id: requestID },
-        refetchQueries: [
-        ],
-      })
-    } catch (e: any) {
-      setFormError(e.message)
-    }
-  }
-
-  const denyRequest = async (requestID: string, setOpen: Function) => {
-    try {
-      await denyAccessRequest({
-        variables: { id: requestID },
-        refetchQueries: [
-        ],
-      })
-    } catch (e: any) {
-      setFormError(e.message)
-    } finally {
-      setOpen(false)
-    }
-  }
-
   const removeAccess = async (a: access, setOpen: Function) => {
     try {
       await revokeAccess({
@@ -345,8 +384,7 @@ const DatasetAccess = ({ id }: AccessListProps) => {
                     <Table.DataCell className="w-[150px]" align="right">
                       <AccessRequestModal
                         requestID={r.id}
-                        actionApprove={approveRequest}
-                        actionDeny={denyRequest}
+                        user={r.subject}
                       />
                     </Table.DataCell>
                   </Table.Row>

components/header/user.tsx

@@ -84,6 +84,15 @@ export default function User() {
               Mine innsiktsprodukter
             </Dropdown.Menu.GroupedList.Item>
 
+            <Dropdown.Menu.GroupedList.Item
+              className={'text-base'}
+              onClick={() => {
+                router.push({ pathname: '/user/requestsForGroup' })
+              }}
+            >
+              Tilgangssøknader til meg
+            </Dropdown.Menu.GroupedList.Item>
+
             <Dropdown.Menu.GroupedList.Item
               className={'text-base'}
               onClick={() => {

components/user/pendingAccessRequestBar.tsx

@@ -10,15 +10,6 @@ interface PendingAccessRequestBarProps {
 }
 
 export const PendingAccessRequestBar = ({ accessRequest }: PendingAccessRequestBarProps) => {
-    const [expanded, setExpanded] = useState(false)
-    const userData = useContext(UserState)
-    const approve = (requestID: string) => {
-        apporveAccessRequest(requestID)
-    }
-    const deny = (requestID: string) => {
-        denyAccessRequest(requestID, "")
-    }
-
     return (
         <div key={accessRequest.id} className="w-[60rem] mb-5 mt-5 border pt-2 pb-2 pl-4 pr-4 flex flex-row justify-between rounded border-gray-200">
             <div>
@@ -47,7 +38,7 @@ export const PendingAccessRequestBar = ({ accessRequest }: PendingAccessRequestB
                 </div>
             </div>
             <div>
-                <AccessRequestModal requestID={accessRequest.id} actionDeny={deny} actionApprove={approve}></AccessRequestModal>
+                <AccessRequestModal requestID={accessRequest.id}></AccessRequestModal>
             </div>
         </div>)
 }

lib/rest/restApi.ts

@@ -33,6 +33,11 @@ export const fetchTemplate = (url: string) => fetch(url, {
   headers: {
     'Content-Type': 'application/json',
   },
+}).then(res => {
+  if (!res.ok) {
+    throw new Error(res.statusText)
+  }
+  return res
 })
 
 export const postTemplate = (url: string, body?: any) => fetch(url, {
@@ -42,6 +47,11 @@ export const postTemplate = (url: string, body?: any) => fetch(url, {
     'Content-Type': 'application/json',
   },
   body: JSON.stringify(body),
+}).then(res => {
+  if (!res.ok) {
+    throw new Error(res.statusText)
+  }
+  return res
 })
 
 

pages/user/[[...page]].tsx

@@ -64,11 +64,11 @@ export const UserPages = () => {
                 ),
             },
             {
-                title: 'Tilgangssøknader til min gruppe',
+                title: 'Tilgangssøknader til meg',
                 slug: 'requestsForGroup',
                 component: (
                     <div className="grid gap-4">
-                        <h2>Tilgangssøknader til min gruppe</h2>
+                        <h2>Tilgangssøknader til meg</h2>
                         <AccessRequestsForGroup
                             accessRequests={data.accessRequestsAsGranter as any[]}
                         />