Add system dropdown filter function (#349)

* add special styling for success button (variant=success is deperecated in designsystemet) * add filter function for system combobox, so it is possible to filter by system name, org name and org nr * minor css fix
Altinn · Aug 28, 2024 · cfee7d6 · cfee7d6
1 parent 50960d9
commit cfee7d6
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 2 deletions.
diff --git a/frontend/src/components/ActionBar/ActionBarHeader.module.css b/frontend/src/components/ActionBar/ActionBarHeader.module.css
@@ -8,7 +8,6 @@
   border-color: var(--border-color);
   background-color: var(--background-color);
   margin-top: var(--fds-spacing-2);
-  overflow: hidden;
 }
 
 .actionBar.clickable {
@@ -61,6 +60,7 @@
   font-size: var(--font_size-300);
   color: inherit;
   word-break: break-word;
+  border-radius: inherit;
 }
 
 .actionBarHeader:focus-visible {

diff --git a/frontend/src/features/creationpage/CreationPageContent.tsx b/frontend/src/features/creationpage/CreationPageContent.tsx
@@ -29,6 +29,10 @@ export const CreationPageContent = () => {
     navigate(AuthenticationRoute.RightsIncluded);
   };
 
+  const isStringMatch = (inputString: string, matchString: string): boolean => {
+    return matchString.toLowerCase().indexOf(inputString.toLowerCase()) >= 0;
+  };
+
   return (
     <div className={classes.creationPageContainer}>
       <div>
@@ -54,6 +58,16 @@ export const CreationPageContent = () => {
               );
             }
           }}
+          filter={(inputValue: string, option) => {
+            const vendor = vendors?.find((x) => x.systemId === option.value);
+            if (!vendor) {
+              return false;
+            }
+            const isOrgNrMatch = isStringMatch(inputValue, vendor.systemVendorOrgNumber);
+            const isOrgNameMatch = isStringMatch(inputValue, vendor.systemVendorOrgName);
+            const isSystemNameMatch = isStringMatch(inputValue, vendor.systemName);
+            return isOrgNrMatch || isOrgNameMatch || isSystemNameMatch;
+          }}
           value={selectedSystemType ? [selectedSystemType] : undefined}
         >
           {vendors?.map((vendor) => {

diff --git a/frontend/src/features/rightsincludedpage/RightsIncludedPageContent.module.css b/frontend/src/features/rightsincludedpage/RightsIncludedPageContent.module.css
@@ -4,3 +4,7 @@
   margin-top: var(--fds-spacing-22);
   gap: var(--fds-spacing-4);
 }
+
+.successButton {
+  background-color: var(--fds-semantic-surface-success-default);
+}
diff --git a/frontend/src/features/rightsincludedpage/RightsIncludedPageContent.tsx b/frontend/src/features/rightsincludedpage/RightsIncludedPageContent.tsx
@@ -81,9 +81,10 @@ export const RightsIncludedPageContent = () => {
         <div className={classes.buttonContainer}>
           <Button
             size='small'
-            color='success'
+            variant='primary'
             onClick={handleConfirm}
             disabled={isCreatingSystemUser}
+            className={classes.successButton}
           >
             {isCreatingSystemUser && (
               <Spinner size='small' title={t('authent_includedrightspage.creating_systemuser')} />