From b171268517e704f8857733aeb05344d17c0a09e3 Mon Sep 17 00:00:00 2001
From: JeremiahUy <jeremiah.augie.uy@nav.no>
Date: Fri, 22 Nov 2024 12:19:07 +0100
Subject: [PATCH] UPDATE: to use aksel components

---
 .../Process/Accordion/AccordionProcess.tsx    | 186 ++++++++----------
 .../Process/Accordion/AccordionTitle.tsx      |  40 ++--
 2 files changed, 104 insertions(+), 122 deletions(-)

diff --git a/apps/frontend/src/components/Process/Accordion/AccordionProcess.tsx b/apps/frontend/src/components/Process/Accordion/AccordionProcess.tsx
index 140aaa16b..cbeabc615 100644
--- a/apps/frontend/src/components/Process/Accordion/AccordionProcess.tsx
+++ b/apps/frontend/src/components/Process/Accordion/AccordionProcess.tsx
@@ -1,6 +1,6 @@
 import { faExclamationCircle, faGavel, faTrash } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { Panel, StatelessAccordion } from 'baseui/accordion'
+import { Accordion } from '@navikt/ds-react'
 import { Plus } from 'baseui/icon'
 import { Modal, ModalBody, SIZE } from 'baseui/modal'
 import { Spinner } from 'baseui/spinner'
@@ -176,12 +176,7 @@ const AccordionProcess = (props: TAccordionProcessProps) => {
 
   return (
     <div>
-      <StatelessAccordion
-        onChange={({ expanded }) =>
-          onChangeProcess(expanded.length ? (expanded[0] as string) : undefined)
-        }
-        expanded={params.processId ? [params.processId] : []}
-      >
+      <Accordion>
         {processList &&
           processList
             .sort((a, b) => {
@@ -197,114 +192,105 @@ const AccordionProcess = (props: TAccordionProcessProps) => {
               const expanded = params.processId === process.id
 
               return (
-                <Panel
-                  title={
+                <Accordion.Item
+                  key={process.id}
+                  open={expanded}
+                  onOpenChange={(open) => {
+                    onChangeProcess(open ? process.id : undefined)
+                  }}
+                >
+                  <Accordion.Header>
                     <AccordionTitle
                       codelistUtils={codelistUtils}
                       process={process}
                       expanded={expanded}
                       forwardRef={expanded ? purposeRef : undefined}
+                      noChevron
                     />
-                  }
-                  key={process.id}
-                  overrides={{
-                    ToggleIcon: {
-                      component: () => null,
-                    },
-                    Content: {
-                      style: {
-                        backgroundColor: theme.colors.white,
-                        // Outline width
-                        paddingTop: '4px',
-                        paddingBottom: '4px',
-                        paddingLeft: '4px',
-                        paddingRight: '4px',
-                      },
-                    },
-                  }}
-                >
-                  {isLoading && (
-                    <div className="p-2.5">
-                      <Spinner $size={theme.sizing.scale1200} />
-                    </div>
-                  )}
+                  </Accordion.Header>
+                  <Accordion.Content>
+                    {expanded && isLoading && (
+                      <div className="p-2.5">
+                        <Spinner $size={theme.sizing.scale1200} />
+                      </div>
+                    )}
 
-                  {!isLoading && currentProcess && (
-                    <div className="outline outline-4 outline-[#E2E2E2]">
-                      <div className="px-6 pt-6">
-                        <ProcessButtonGroup
-                          process={process}
-                          hasAccess={hasAccess()}
-                          editProcess={() => setShowEditProcessModal(true)}
-                          deleteProcess={() => setShowDeleteModal(true)}
-                        />
-                        <ProcessData
-                          process={currentProcess}
-                          disclosures={disclosures}
-                          codelistUtils={codelistUtils}
-                        />
-                        <div>
-                          <div className="flex justify-end">
-                            <span>
-                              <i>{`Sist endret av ${currentProcess.changeStamp.lastModifiedBy}, ${lastModifiedDate(currentProcess.changeStamp?.lastModifiedDate)}`}</i>
-                            </span>
+                    {expanded && !isLoading && currentProcess && (
+                      <div className="outline outline-4 outline-[#E2E2E2]">
+                        <div className="px-6 pt-6">
+                          <ProcessButtonGroup
+                            process={process}
+                            hasAccess={hasAccess()}
+                            editProcess={() => setShowEditProcessModal(true)}
+                            deleteProcess={() => setShowDeleteModal(true)}
+                          />
+                          <ProcessData
+                            process={currentProcess}
+                            disclosures={disclosures}
+                            codelistUtils={codelistUtils}
+                          />
+                          <div>
+                            <div className="flex justify-end">
+                              <span>
+                                <i>{`Sist endret av ${currentProcess.changeStamp.lastModifiedBy}, ${lastModifiedDate(currentProcess.changeStamp?.lastModifiedDate)}`}</i>
+                              </span>
+                            </div>
                           </div>
-                        </div>
-                        <div className="flex pt-6 w-full justify-between">
-                          <div className="flex">
-                            {canViewAlerts() && (
-                              <div className="mr-auto">
-                                <Button
-                                  type="button"
-                                  kind="tertiary"
-                                  size="xsmall"
-                                  icon={faExclamationCircle}
-                                  onClick={() => history(`/alert/events/process/${process.id}`)}
-                                >
-                                  Varsler
-                                </Button>
-                              </div>
-                            )}
-                            {(user.isAdmin() || user.isSuper()) && (
-                              <div className="mr-auto">
-                                <Button
-                                  type="button"
-                                  kind="tertiary"
-                                  size="xsmall"
-                                  icon={faGavel}
-                                  onClick={() => setShowRevisionModal(true)}
-                                >
-                                  Ny revidering
-                                </Button>
+                          <div className="flex pt-6 w-full justify-between">
+                            <div className="flex">
+                              {canViewAlerts() && (
+                                <div className="mr-auto">
+                                  <Button
+                                    type="button"
+                                    kind="tertiary"
+                                    size="xsmall"
+                                    icon={faExclamationCircle}
+                                    onClick={() => history(`/alert/events/process/${process.id}`)}
+                                  >
+                                    Varsler
+                                  </Button>
+                                </div>
+                              )}
+                              {(user.isAdmin() || user.isSuper()) && (
+                                <div className="mr-auto">
+                                  <Button
+                                    type="button"
+                                    kind="tertiary"
+                                    size="xsmall"
+                                    icon={faGavel}
+                                    onClick={() => setShowRevisionModal(true)}
+                                  >
+                                    Ny revidering
+                                  </Button>
+                                </div>
+                              )}
+                            </div>
+                            {hasAccess() && (
+                              <div className="flex justify-center">
+                                <div ref={InformationTypeRef} />
+                                {renderAddDocumentButton()}
+                                {renderCreatePolicyButton()}
+                                {renderDeleteAllPolicyButton()}
                               </div>
                             )}
                           </div>
-                          {hasAccess() && (
-                            <div className="flex justify-center">
-                              <div ref={InformationTypeRef} />
-                              {renderAddDocumentButton()}
-                              {renderCreatePolicyButton()}
-                              {renderDeleteAllPolicyButton()}
-                            </div>
-                          )}
                         </div>
+                        <TablePolicy
+                          codelistUtils={codelistUtils}
+                          process={currentProcess}
+                          hasAccess={hasAccess()}
+                          errorPolicyModal={errorPolicyModal}
+                          errorDeleteModal={errorPolicyModal}
+                          submitEditPolicy={submitEditPolicy}
+                          submitDeletePolicy={submitDeletePolicy}
+                        />
                       </div>
-
-                      <TablePolicy
-                        codelistUtils={codelistUtils}
-                        process={currentProcess}
-                        hasAccess={hasAccess()}
-                        errorPolicyModal={errorPolicyModal}
-                        errorDeleteModal={errorPolicyModal}
-                        submitEditPolicy={submitEditPolicy}
-                        submitDeletePolicy={submitDeletePolicy}
-                      />
-                    </div>
-                  )}
-                </Panel>
+                    )}
+                  </Accordion.Content>
+                </Accordion.Item>
               )
             })}
-      </StatelessAccordion>
+      </Accordion>
       {!processList.length && <LabelMedium margin="1rem">Ingen behandlinger</LabelMedium>}
 
       {!!currentProcess && (
diff --git a/apps/frontend/src/components/Process/Accordion/AccordionTitle.tsx b/apps/frontend/src/components/Process/Accordion/AccordionTitle.tsx
index b656becb8..52b15015b 100644
--- a/apps/frontend/src/components/Process/Accordion/AccordionTitle.tsx
+++ b/apps/frontend/src/components/Process/Accordion/AccordionTitle.tsx
@@ -12,38 +12,34 @@ type TAccordionTitleProps = {
   process: IProcessShort
   expanded: boolean
   forwardRef?: Ref<any>
+  noChevron?: boolean
 }
 
 export const InformationTypeRef: RefObject<HTMLDivElement> = createRef<HTMLDivElement>()
 
 const AccordionTitle = (props: TAccordionTitleProps) => {
-  const { process, expanded, forwardRef, codelistUtils } = props
+  const { process, expanded, forwardRef, codelistUtils, noChevron } = props
   const today: string = new Date().toISOString().split('T')[0]
 
   const isActive: boolean = today < process.end
 
   return (
-    <>
-      <div ref={forwardRef}>
-        <LabelLarge color={theme.colors.primary}>
-          {expanded ? (
-            <FontAwesomeIcon icon={faChevronDown} />
-          ) : (
-            <FontAwesomeIcon icon={faChevronRight} />
-          )}
-          <span> </span>
-          <Tag variant={isActive ? 'success' : 'warning'}>{isActive ? 'Aktiv' : 'Utgått'}</Tag>
-          <span> </span>
-          <span>
-            {process.purposes
-              .map((purpose: ICode) => codelistUtils.getShortname(EListName.PURPOSE, purpose.code))
-              .join(', ')}
-            :{' '}
-          </span>
-          <span>{process.name}</span>
-        </LabelLarge>
-      </div>
-    </>
+    <div ref={forwardRef}>
+      <LabelLarge color={theme.colors.primary}>
+        {!noChevron && expanded && <FontAwesomeIcon icon={faChevronDown} />}
+        {!noChevron && !expanded && <FontAwesomeIcon icon={faChevronRight} />}
+        <span> </span>
+        <Tag variant={isActive ? 'success' : 'warning'}>{isActive ? 'Aktiv' : 'Utgått'}</Tag>
+        <span> </span>
+        <span>
+          {process.purposes
+            .map((purpose: ICode) => codelistUtils.getShortname(EListName.PURPOSE, purpose.code))
+            .join(', ')}
+          :{' '}
+        </span>
+        <span>{process.name}</span>
+      </LabelLarge>
+    </div>
   )
 }