feat(resource-adm): move access package list into accordion to shrink…

… policy rule height (#14626)
Altinn · Feb 14, 2025 · 7dcd0d7 · 7dcd0d7
1 parent e8d1709
commit 7dcd0d7
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 23 deletions.
diff --git a/frontend/language/src/nb.json b/frontend/language/src/nb.json
@@ -649,6 +649,7 @@
   "overview.reset_repo_confirm_info": "Du sletter nå alle endringer du har gjort på <bold>{{repositoryName}}</bold>. Du kan ikke gjenopprette dem.",
   "overview.reset_repo_confirm_repo_name": "Skriv inn navnet på appen for å bekrefte at du vil slette",
   "overview.reset_repo_loading": "Sletter...",
+  "policy_editor.access_package_accordion_header": "Vis alle tilgangspakker",
   "policy_editor.access_package_add": "Legg til tilgangspakke {{packageName}}",
   "policy_editor.access_package_all_packages": "Alle tilgangspakker",
   "policy_editor.access_package_chosen_packages": "Valgte tilgangspakker",

diff --git a/...r/src/components/PolicyCardRules/PolicyRule/PolicyAccessPackages/PolicyAccessPackages.tsx b/...r/src/components/PolicyCardRules/PolicyRule/PolicyAccessPackages/PolicyAccessPackages.tsx
@@ -13,13 +13,14 @@ import {
 import { ChosenAccessPackages } from './ChosenAccessPackages';
 import { AllAccessPackages } from './AllAccessPackages';
 import { PolicyAccessPackagesWarning } from './PolicyAccessPackagesWarning';
+import { Accordion } from '@digdir/designsystemet-react';
 
 export const PolicyAccessPackages = (): ReactElement => {
   const { t } = useTranslation();
-  const [searchValue, setSearchValue] = useState<string>('');
   const { policyRules, accessPackages, setPolicyRules, savePolicy } = usePolicyEditorContext();
   const { policyRule } = usePolicyRuleContext();
 
+  const [searchValue, setSearchValue] = useState<string>('');
   const [chosenAccessPackages, setChosenAccessPackages] = useState<string[]>(
     policyRule.accessPackages,
   );
@@ -77,33 +78,40 @@ export const PolicyAccessPackages = (): ReactElement => {
       <StudioLabelAsParagraph size='md' spacing>
         {t('policy_editor.access_package_header')}
       </StudioLabelAsParagraph>
-      <PolicyAccessPackagesWarning />
       <ChosenAccessPackages
         chosenAccessPackages={chosenAccessPackages}
         groupedAccessPackagesByArea={groupedAccessPackagesByArea}
         handleSelectAccessPackage={handleSelectAccessPackage}
       />
-      <StudioLabelAsParagraph size='xs' spacing>
-        {t('policy_editor.access_package_all_packages')}
-      </StudioLabelAsParagraph>
-      <StudioTextfield
-        label={
-          <StudioLabelAsParagraph size='xs'>
-            {t('policy_editor.access_package_search')}
-          </StudioLabelAsParagraph>
-        }
-        hideLabel
-        placeholder={t('policy_editor.access_package_search')}
-        size='small'
-        value={searchValue}
-        onChange={handleSearch}
-      />
-      <AllAccessPackages
-        chosenAccessPackages={chosenAccessPackages}
-        accessPackagesToRender={accessPackagesToRender}
-        searchValue={searchValue}
-        handleSelectAccessPackage={handleSelectAccessPackage}
-      />
+      <Accordion>
+        <Accordion.Item>
+          <Accordion.Header>{t('policy_editor.access_package_accordion_header')}</Accordion.Header>
+          <Accordion.Content className={classes.accessPackages}>
+            <PolicyAccessPackagesWarning />
+            <StudioLabelAsParagraph size='xs' spacing>
+              {t('policy_editor.access_package_all_packages')}
+            </StudioLabelAsParagraph>
+            <StudioTextfield
+              label={
+                <StudioLabelAsParagraph size='xs'>
+                  {t('policy_editor.access_package_search')}
+                </StudioLabelAsParagraph>
+              }
+              hideLabel
+              placeholder={t('policy_editor.access_package_search')}
+              size='small'
+              value={searchValue}
+              onChange={handleSearch}
+            />
+            <AllAccessPackages
+              chosenAccessPackages={chosenAccessPackages}
+              accessPackagesToRender={accessPackagesToRender}
+              searchValue={searchValue}
+              handleSelectAccessPackage={handleSelectAccessPackage}
+            />
+          </Accordion.Content>
+        </Accordion.Item>
+      </Accordion>
     </div>
   );
 };