From aac187f41fb4b54a5ae7a22d43d44e78c3c2b3c2 Mon Sep 17 00:00:00 2001
From: wrt95 <wrt_95@hotmail.com>
Date: Tue, 19 Nov 2024 13:53:18 +0100
Subject: [PATCH] refactor: Replace table and checkbox with StudioCheckboxTable
 in accesscontrol tab

---
 .../SelectAllowedPartyTypes.module.css        |  4 --
 .../SelectAllowedPartyTypes.tsx               | 70 +++++++------------
 .../StudioCheckboxTableRow.module.css         |  4 ++
 .../StudioCheckboxTableRow.tsx                |  2 +-
 4 files changed, 32 insertions(+), 48 deletions(-)

diff --git a/frontend/app-development/layout/PageHeader/SubHeader/SettingsModalButton/SettingsModal/components/Tabs/AccessControlTab/SelectAllowedPartyTypes/SelectAllowedPartyTypes.module.css b/frontend/app-development/layout/PageHeader/SubHeader/SettingsModalButton/SettingsModal/components/Tabs/AccessControlTab/SelectAllowedPartyTypes/SelectAllowedPartyTypes.module.css
index a21b976bd23..6d35050a332 100644
--- a/frontend/app-development/layout/PageHeader/SubHeader/SettingsModalButton/SettingsModal/components/Tabs/AccessControlTab/SelectAllowedPartyTypes/SelectAllowedPartyTypes.module.css
+++ b/frontend/app-development/layout/PageHeader/SubHeader/SettingsModalButton/SettingsModal/components/Tabs/AccessControlTab/SelectAllowedPartyTypes/SelectAllowedPartyTypes.module.css
@@ -6,7 +6,3 @@
 .header {
   background-color: var(--fds-colors-grey-100);
 }
-
-.checkboxContent {
-  width: 3rem;
-}
diff --git a/frontend/app-development/layout/PageHeader/SubHeader/SettingsModalButton/SettingsModal/components/Tabs/AccessControlTab/SelectAllowedPartyTypes/SelectAllowedPartyTypes.tsx b/frontend/app-development/layout/PageHeader/SubHeader/SettingsModalButton/SettingsModal/components/Tabs/AccessControlTab/SelectAllowedPartyTypes/SelectAllowedPartyTypes.tsx
index a169a474cd5..4800cb26b1f 100644
--- a/frontend/app-development/layout/PageHeader/SubHeader/SettingsModalButton/SettingsModal/components/Tabs/AccessControlTab/SelectAllowedPartyTypes/SelectAllowedPartyTypes.tsx
+++ b/frontend/app-development/layout/PageHeader/SubHeader/SettingsModalButton/SettingsModal/components/Tabs/AccessControlTab/SelectAllowedPartyTypes/SelectAllowedPartyTypes.tsx
@@ -1,5 +1,4 @@
-import React, { useRef } from 'react';
-import { Table, Checkbox } from '@digdir/designsystemet-react';
+import React, { type ReactElement, useRef } from 'react';
 import type { ApplicationMetadata, PartyTypesAllowed } from 'app-shared/types/ApplicationMetadata';
 import classes from './SelectAllowedPartyTypes.module.css';
 import { useTranslation } from 'react-i18next';
@@ -7,12 +6,15 @@ import { getPartyTypesAllowedOptions } from '../../../../utils/tabUtils/accessCo
 import { useAppMetadataMutation } from 'app-development/hooks/mutations';
 import { AccessControlWarningModal } from '../AccessControWarningModal';
 import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
+import { StudioCheckboxTable } from '@studio/components';
 
-export interface SelectAllowedPartyTypesProps {
+export type SelectAllowedPartyTypesProps = {
   appMetadata: ApplicationMetadata;
-}
+};
 
-export const SelectAllowedPartyTypes = ({ appMetadata }: SelectAllowedPartyTypesProps) => {
+export const SelectAllowedPartyTypes = ({
+  appMetadata,
+}: SelectAllowedPartyTypesProps): ReactElement => {
   const { t } = useTranslation();
   const { org, app } = useStudioEnvironmentParams();
 
@@ -59,45 +61,27 @@ export const SelectAllowedPartyTypes = ({ appMetadata }: SelectAllowedPartyTypes
 
   return (
     <>
-      <Table className={classes.tableContent}>
-        <Table.Head>
-          <Table.Row>
-            <Table.HeaderCell className={classes.header}>
-              <Checkbox
-                aria-label={t('settings_modal.access_control_tab_option_all_types')}
-                checked={areAllCheckboxesChecked || isNoCheckboxesChecked}
-                indeterminate={!areAllCheckboxesChecked && isSomeCheckboxesChecked}
-                onChange={handleTableHeaderCheckboxChange}
-                aria-checked
-                size='small'
-                value='all'
-              />
-            </Table.HeaderCell>
-            <Table.HeaderCell className={classes.header} aria-hidden>
-              {t('settings_modal.access_control_tab_option_all_types')}
-            </Table.HeaderCell>
-          </Table.Row>
-        </Table.Head>
-        <Table.Body>
-          {getPartyTypesAllowedOptions().map((mappedOption, key) => (
-            <Table.Row key={mappedOption.value}>
-              <Table.Cell className={classes.checkboxContent}>
-                <Checkbox
-                  aria-label={t(mappedOption.label)}
-                  key={key}
-                  onChange={() =>
-                    handleAllowedPartyTypeChange(partyTypesAllowed, mappedOption.value)
-                  }
-                  size='small'
-                  value={mappedOption.value}
-                  checked={partyTypesAllowed[mappedOption.value] || isNoCheckboxesChecked}
-                />
-              </Table.Cell>
-              <Table.Cell>{t(mappedOption.label)}</Table.Cell>
-            </Table.Row>
+      <StudioCheckboxTable className={classes.tableContent}>
+        <StudioCheckboxTable.Header
+          title={t('settings_modal.access_control_tab_option_all_types')}
+          checked={areAllCheckboxesChecked || isNoCheckboxesChecked}
+          indeterminate={!areAllCheckboxesChecked && isSomeCheckboxesChecked}
+          onChange={handleTableHeaderCheckboxChange}
+        />
+        <StudioCheckboxTable.Body>
+          {getPartyTypesAllowedOptions().map((mappedOption) => (
+            <StudioCheckboxTable.Row
+              key={mappedOption.value}
+              rowElement={{
+                ...mappedOption,
+                label: t(mappedOption.label),
+                checked: partyTypesAllowed[mappedOption.value] || isNoCheckboxesChecked,
+              }}
+              onChange={() => handleAllowedPartyTypeChange(partyTypesAllowed, mappedOption.value)}
+            />
           ))}
-        </Table.Body>
-      </Table>
+        </StudioCheckboxTable.Body>
+      </StudioCheckboxTable>
       <AccessControlWarningModal modalRef={modalRef} />
     </>
   );
diff --git a/frontend/libs/studio-components/src/components/StudioCheckboxTable/StudioCheckboxTableRow/StudioCheckboxTableRow.module.css b/frontend/libs/studio-components/src/components/StudioCheckboxTable/StudioCheckboxTableRow/StudioCheckboxTableRow.module.css
index b622b9c5f9e..47482c8e3a5 100644
--- a/frontend/libs/studio-components/src/components/StudioCheckboxTable/StudioCheckboxTableRow/StudioCheckboxTableRow.module.css
+++ b/frontend/libs/studio-components/src/components/StudioCheckboxTable/StudioCheckboxTableRow/StudioCheckboxTableRow.module.css
@@ -5,3 +5,7 @@
 .descriptionText {
   color: var(--fds-semantic-text-neutral-subtle);
 }
+
+.chexboxTextContent {
+  width: 100%;
+}
diff --git a/frontend/libs/studio-components/src/components/StudioCheckboxTable/StudioCheckboxTableRow/StudioCheckboxTableRow.tsx b/frontend/libs/studio-components/src/components/StudioCheckboxTable/StudioCheckboxTableRow/StudioCheckboxTableRow.tsx
index 36f3f1df02a..4081a658947 100644
--- a/frontend/libs/studio-components/src/components/StudioCheckboxTable/StudioCheckboxTableRow/StudioCheckboxTableRow.tsx
+++ b/frontend/libs/studio-components/src/components/StudioCheckboxTable/StudioCheckboxTableRow/StudioCheckboxTableRow.tsx
@@ -27,7 +27,7 @@ export const StudioCheckboxTableRow = ({
           checked={checked}
         />
       </StudioTable.Cell>
-      <StudioTable.Cell>
+      <StudioTable.Cell className={classes.chexboxTextContent}>
         <StudioParagraph size='sm'>{label}</StudioParagraph>
         {description && (
           <StudioParagraph size='sm' className={classes.descriptionText}>