process access

Author: MengZhuNAV

components/user/pendingAccessRequestBar.tsx

@@ -1,29 +1,53 @@
-import { ExpansionCard, Link } from "@navikt/ds-react"
-import { useState } from "react"
+import { Link } from "@navikt/ds-react"
+import { useContext, useState } from "react"
 import { AccessRequestModal } from "../dataproducts/access/datasetAccess"
-import { Header } from "@navikt/ds-react-internal"
+import { apporveAccessRequest, denyAccessRequest } from "../../lib/rest/access"
+import { ExternalLink } from "@navikt/ds-icons"
+import { UserState } from "../../lib/context"
 
 interface PendingAccessRequestBarProps {
     accessRequest: any
 }
 
 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>
                 <h3> <Link rel="norefferer" href={`/dataproduct/${accessRequest.dataproductID}/${accessRequest.dataproductSlug}/${accessRequest.datasetID}`}>
                     {`${accessRequest?.datasetName} - ${accessRequest?.dataproductName}`}
                 </Link>
                 </h3>
-                fra {accessRequest.owner} - {new Date(accessRequest.created).toLocaleDateString('no-NO')}
+                {accessRequest.owner}
+                <br></br>
+                <div className="flex flex-row">
+                <div>
+                {!accessRequest.expires ? "Alltid tilgang fra ": "Tilgangsperiode: "}
+                {new Date(accessRequest.created).toLocaleDateString('no-NO')}
+                {accessRequest.expires && ` - ${new Date(accessRequest.expires).toLocaleDateString('no-NO')}`}
+                </div>
+                <div className="ml-[2rem]">
+                {accessRequest.polly?.url ? (
+                        <Link target="_blank" rel="norefferer" href={accessRequest.polly.url}>
+                          Åpne behandling
+                          <ExternalLink />
+                        </Link>
+                      ) : (
+                        'Ingen behandling'
+                      )}
+                </div>
+                </div>
             </div>
             <div>
-                <AccessRequestModal requestID={""} actionDeny={function (requestID: string, setOpen: Function): void {
-                    throw new Error("Function not implemented.")
-                }} actionApprove={function (requestID: string): void {
-                    throw new Error("Function not implemented.")
-                }}></AccessRequestModal>
+                <AccessRequestModal requestID={accessRequest.id} actionDeny={deny} actionApprove={approve}></AccessRequestModal>
             </div>
         </div>)
 }

lib/rest/access.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { fetchAccessRequestUrl, fetchTemplate } from "./restApi";
+import { approveAccessRequestUrl, denyAccessRequestUrl, fetchAccessRequestUrl, fetchTemplate, postTemplate } from "./restApi";
 
 export const fetchAccessRequests = async (datasetId: string) => {
     const url = fetchAccessRequestUrl(datasetId);
@@ -29,4 +29,14 @@ export const useFetchAccessRequestsForDataset = (datasetId: string)=>{
     }, [datasetId])
 
     return {data, loading, error}
+}
+
+export const apporveAccessRequest = async (accessRequestId: string) => {
+    const url = approveAccessRequestUrl(accessRequestId);
+    return postTemplate(url);
+}
+
+export const denyAccessRequest = async (accessRequestId: string, reason: string) => {
+    const url = denyAccessRequestUrl(accessRequestId, reason);
+    return postTemplate(url);
 }

lib/rest/restApi.ts

@@ -24,6 +24,8 @@ export const searchTeamKatalogenUrl = (gcpGroups?: string[]) => {
   const query = parameters ? `?${parameters}` : ''
   return `${apiUrl()}/teamkatalogen${query}`
 }
+export const approveAccessRequestUrl = (accessRequestId: string) => `${apiUrl()}/accessRequests/${accessRequestId}?action=approve`
+export const denyAccessRequestUrl = (accessRequestId: string, reason: string) => `${apiUrl()}/accessRequests/${accessRequestId}?action=deny&reason=${reason}`
 
 export const fetchTemplate = (url: string) => fetch(url, {
   method: 'GET',
@@ -33,6 +35,16 @@ export const fetchTemplate = (url: string) => fetch(url, {
   },
 })
 
+export const postTemplate = (url: string, body?: any) => fetch(url, {
+  method: 'POST',
+  credentials: 'include',
+  headers: {
+    'Content-Type': 'application/json',
+  },
+  body: JSON.stringify(body),
+})
+
+
 export const searchUrl = (options: SearchOptions) => {
   let queryParams: string[] = [];