implement new design for system user initiated wizard from april 2024 (…

…#230)
Altinn · Apr 23, 2024 · a599199 · a599199
1 parent 663366c
commit a599199
Show file tree

Hide file tree

Showing 17 changed files with 287 additions and 288 deletions.
diff --git a/frontend/src/components/ActionBar/ActionBarContent.module.css b/frontend/src/components/ActionBar/ActionBarContent.module.css
@@ -6,7 +6,7 @@
   border-bottom-right-radius: 6px;
   border-width: 1px;
   border-color: var(--border-color);
-  padding: var(--fds-spacing-6);
+  padding: var(--fds-spacing-10);
   display: flex;
   flex-direction: column;
   gap: var(--fds-spacing-1);

diff --git a/frontend/src/components/ActionBar/ActionBarIcon.tsx b/frontend/src/components/ActionBar/ActionBarIcon.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import cn from 'classnames';
-import { ChevronDownIcon as Chevron, ChevronDownCircleFillIcon } from '@navikt/aksel-icons';
+import { ChevronDownIcon as Chevron } from '@navikt/aksel-icons';
 
 import classes from './ActionBarIcon.module.css';
 import { useActionBarContext } from './Context';
@@ -18,15 +18,5 @@ export const ActionBarIcon = () => {
     'data-testid': 'action-bar-icon',
   };
 
-  const isLarge = size === 'large';
-
-  return (
-    <>
-      {isLarge ? (
-        <ChevronDownCircleFillIcon {...props} aria-hidden />
-      ) : (
-        <Chevron {...props} aria-hidden />
-      )}
-    </>
-  );
+  return <Chevron {...props} aria-hidden />;
 };
diff --git a/frontend/src/components/SystemUserActionBar/SystemUserActionBar.module.css b/frontend/src/components/SystemUserActionBar/SystemUserActionBar.module.css
@@ -0,0 +1,7 @@
+.rightsHeader {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+}
diff --git a/frontend/src/components/SystemUserActionBar/SystemUserActionBar.tsx b/frontend/src/components/SystemUserActionBar/SystemUserActionBar.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { Link as RouterLink } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Heading, Link } from '@digdir/designsystemet-react';
+import { ActionBar } from '../ActionBar';
+import classes from './SystemUserActionBar.module.css';
+import { PencilIcon } from '@navikt/aksel-icons';
+import { useGetVendorsQuery } from '@/rtk/features/systemUserApi';
+import { SystemUser } from '@/types';
+import { AuthenticationRoute } from '@/routes/paths';
+import { url } from '@/utils/urlUtils';
+
+interface SystemUserActionBarProps {
+  systemUser: SystemUser;
+  defaultOpen?: boolean;
+}
+
+export const SystemUserActionBar = ({
+  systemUser,
+  defaultOpen,
+}: SystemUserActionBarProps): React.JSX.Element => {
+  const { t } = useTranslation();
+
+  const { data: vendors } = useGetVendorsQuery();
+
+  const vendor = vendors?.find((vendor) => vendor.systemTypeId === systemUser.productName);
+
+  return (
+    <ActionBar
+      title={systemUser.integrationTitle}
+      subtitle={vendor?.systemVendor?.toUpperCase()}
+      color='light'
+      size='large'
+      defaultOpen={defaultOpen}
+    >
+      <div>
+        <div className={classes.rightsHeader}>
+          <Heading level={3} size='xxsmall' spacing>
+            {!vendor?.defaultRights.length
+              ? t('authent_overviewpage.system_user_no_rights')
+              : t('authent_overviewpage.system_rights_header')}
+          </Heading>
+          <Link asChild>
+            <RouterLink to={`${AuthenticationRoute.Details}/${url`${systemUser.id}`}`}>
+              <PencilIcon fontSize={24} />
+              {t('authent_overviewpage.edit_system_user')}
+            </RouterLink>
+          </Link>
+        </div>
+        {vendor?.defaultRights?.map((right) => {
+          return (
+            <ActionBar
+              key={right.right}
+              title={right.right}
+              subtitle={right.serviceProvider}
+              color='neutral'
+            />
+          );
+        })}
+      </div>
+    </ActionBar>
+  );
+};
diff --git a/frontend/src/components/SystemUserActionBar/index.ts b/frontend/src/components/SystemUserActionBar/index.ts
@@ -0,0 +1 @@
+export { SystemUserActionBar } from './SystemUserActionBar';
diff --git a/frontend/src/features/creationpage/CreationPageContent.tsx b/frontend/src/features/creationpage/CreationPageContent.tsx
@@ -54,8 +54,8 @@ export const CreationPageContent = () => {
           label={
             <div className={classes.nameLabel}>
               <div>{t('authent_creationpage.input_field_label')}</div>
-              <HelpText size='small' title='Hjelpetekst for systembrukar'>
-                Hjelpetekst for systembrukar
+              <HelpText size='small' title='Hjelpetekst for systemtilgang'>
+                Hjelpetekst for systemtilgang
               </HelpText>
             </div>
           }
@@ -70,13 +70,11 @@ export const CreationPageContent = () => {
         <Paragraph size='small' spacing>
           {t('authent_creationpage.content_text1')}
         </Paragraph>
-        <Paragraph size='small' spacing>
-          {t('authent_creationpage.content_text2')}
-        </Paragraph>
       </div>
       <div className={classes.inputContainer}>
         <Combobox
           label={t('authent_creationpage.pull_down_menu_label')}
+          placeholder='Velg ...'
           onValueChange={(newValue: string[]) => {
             if (newValue?.length) {
               setSelectedSystemType(newValue[0]);

diff --git a/frontend/src/features/detailpage/DetailPage.module.css b/frontend/src/features/detailpage/DetailPage.module.css
@@ -1,14 +1,12 @@
-.rightsHeader {
+.detailPageContent {
   display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: var(--fds-spacing-4);
-  margin-top: var(--fds-spacing-8);
+  flex-direction: column;
+  gap: var(--fds-spacing-8);
 }
 
 .buttonContainer {
   display: flex;
+  align-items: flex-start;
   margin-top: var(--fds-spacing-12);
   margin-bottom: var(--fds-spacing-4);
   gap: var(--fds-spacing-4);
@@ -18,10 +16,6 @@
   max-width: 30rem;
 }
 
-.backLink {
-  margin-bottom: var(--fds-spacing-8);
-}
-
 .rightsList {
   flex-wrap: wrap;
 }
diff --git a/frontend/src/features/detailpage/DetailPage.tsx b/frontend/src/features/detailpage/DetailPage.tsx
@@ -4,20 +4,18 @@ import { Alert } from '@digdir/designsystemet-react';
 import { Page, PageContainer } from '@/components';
 import { DetailPageContent } from './DetailPageContent';
 import ApiIcon from '@/assets/Api.svg?react';
-import { useGetRightsQuery, useGetSystemUserQuery } from '@/rtk/features/systemUserApi';
+import { useGetSystemUserQuery } from '@/rtk/features/systemUserApi';
 
 export const DetailPage = (): React.ReactNode => {
   const { id } = useParams();
 
   const { data: systemUser, isError: isLoadSystemUserError } = useGetSystemUserQuery(id || '');
-  const { data: rights, isError: isLoadRightsError } = useGetRightsQuery();
 
   return (
     <PageContainer>
-      <Page color='dark' icon={<ApiIcon />} title={'Rediger systembruker'}>
-        {isLoadSystemUserError && <Alert severity='danger'>Kunne ikke laste systembruker</Alert>}
-        {isLoadRightsError && <Alert severity='danger'>Kunne ikke laste rettigheter</Alert>}
-        {systemUser && rights && <DetailPageContent systemUser={systemUser} rights={rights} />}
+      <Page color='dark' icon={<ApiIcon />} title={'Rediger systemtilgang'}>
+        {isLoadSystemUserError && <Alert severity='danger'>Kunne ikke laste systemtilgang</Alert>}
+        {systemUser && <DetailPageContent systemUser={systemUser} />}
       </Page>
     </PageContainer>
   );
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { SystemUserActionBar } from './SystemUserActionBar';