Frontend changes for May release (#270)

* remove mock data + use new props in POST request * remove DirectConsentPage * show spinner when loading systemuser * add back button + change styling of close button * remove help icon (for now) * fix texts + links + remove confirmation page * remove default rights from edit systemuser page (for now) --------- Co-authored-by: Simen Rekkedal <[email protected]>
Altinn · May 24, 2024 · 12580d2 · 12580d2
1 parent 391b79d
commit 12580d2
Show file tree

Hide file tree

Showing 26 changed files with 159 additions and 469 deletions.
diff --git a/...c/Altinn.Authentication.UI/Altinn.Authentication.UI.Tests/Clients/SystemUserClientTest.cs b/...c/Altinn.Authentication.UI/Altinn.Authentication.UI.Tests/Clients/SystemUserClientTest.cs
@@ -42,6 +42,7 @@ public async Task GetSpecificSystemUserById_ReturnOk()
     public async Task CreateSystemUser_ReturnOk()
     {
         var usr = await _systemUserClient.PostNewSystemUserReal(
+            1,
             new SystemUserDescriptor 
             { 
                 OwnedByPartyId = "1",

diff --git a/frontend/src/components/PageContainer/PageContainer.module.css b/frontend/src/components/PageContainer/PageContainer.module.css
@@ -6,29 +6,24 @@
   width: 100%;
 }
 
-.closeButtonContainer {
+.buttonContainer {
   margin-top: var(--fds-spacing-8);
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
+  margin-bottom: var(--fds-spacing-2);
 }
 
-.closeButton {
+.buttonContainerButton {
   border-radius: 50%;
   background-color: var(--fds-semantic-background-default);
-  border: none;
-  padding: var(--fds-spacing-1);
-  cursor: pointer;
-  margin-bottom: var(--fds-spacing-2);
+}
+.buttonContainerButton:last-child {
+  margin-left: auto;
 }
 
-.closeButtonIcon {
+.buttonContainerIcon {
   height: var(--fds-sizing-7);
   width: var(--fds-sizing-7);
-  vertical-align: middle;
-}
-
-.closeButton:hover {
-  background-color: #d6eefd; /* not defined in designsystemet */
 }
 
 @media only screen and (min-width: 375px) {

diff --git a/frontend/src/components/PageContainer/PageContainer.tsx b/frontend/src/components/PageContainer/PageContainer.tsx
@@ -1,34 +1,52 @@
 import React from 'react';
+import { Link as RouterLink } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
+import { ArrowLeftIcon } from '@navikt/aksel-icons';
+import { Button, Link, Tooltip } from '@digdir/designsystemet-react';
 import CloseIcon from '@/assets/RedClose.svg?react';
 import { getCookie } from '@/resources/Cookie/CookieMethods';
 import { UserInfoBar } from '../UserInfoBar/UserInfoBar';
 import classes from './PageContainer.module.css';
+import { getHostUrl } from '@/utils/urlUtils';
 
 export interface PageContainerProps {
+  backUrl?: string;
   children: React.ReactNode;
 }
 
-export const PageContainer = ({ children }: PageContainerProps) => {
+export const PageContainer = ({ backUrl, children }: PageContainerProps) => {
   const { t } = useTranslation();
 
-  const redirectToProfile = () => {
-    const cleanHostname = window.location.hostname.replace('am.ui.', '');
-    window.location.href = `https://${cleanHostname}/ui/Profile?R=${getCookie('AltinnPartyId')}`;
-  };
+  const profileUrl = `https://${getHostUrl()}/ui/Profile?R=${getCookie('AltinnPartyId')}`;
 
   return (
     <div className={classes.pageMargin}>
       <div className={classes.pageContainer}>
         <UserInfoBar />
-        <div className={classes.closeButtonContainer}>
-          <button
-            className={classes.closeButton}
-            aria-label={String(t('common.close'))}
-            onClick={redirectToProfile}
-          >
-            <CloseIcon className={classes.closeButtonIcon} />
-          </button>
+        <div className={classes.buttonContainer}>
+          {backUrl && (
+            <Tooltip content={t('common.back')}>
+              <Button
+                icon={true}
+                color='second'
+                variant='tertiary'
+                className={classes.buttonContainerButton}
+                size='small'
+                asChild
+              >
+                <RouterLink to={backUrl}>
+                  <ArrowLeftIcon className={classes.buttonContainerIcon} />
+                </RouterLink>
+              </Button>
+            </Tooltip>
+          )}
+          <Tooltip content={t('common.close')}>
+            <Button icon={true} className={classes.buttonContainerButton} size='small' asChild>
+              <Link href={profileUrl}>
+                <CloseIcon className={classes.buttonContainerIcon} />
+              </Link>
+            </Button>
+          </Tooltip>
         </div>
         <div>{children}</div>
       </div>

diff --git a/frontend/src/features/confirmationpage/ConfirmationPage.tsx b/frontend/src/features/confirmationpage/ConfirmationPage.tsx
diff --git a/frontend/src/features/confirmationpage/ConfirmationPageContent.module.css b/frontend/src/features/confirmationpage/ConfirmationPageContent.module.css
diff --git a/frontend/src/features/confirmationpage/ConfirmationPageContent.tsx b/frontend/src/features/confirmationpage/ConfirmationPageContent.tsx
diff --git a/frontend/src/features/confirmationpage/index.ts b/frontend/src/features/confirmationpage/index.ts
diff --git a/frontend/src/features/creationpage/CreationPage.tsx b/frontend/src/features/creationpage/CreationPage.tsx
@@ -3,12 +3,13 @@ import React from 'react';
 import { Page, PageContainer } from '@/components';
 import ApiIcon from '@/assets/Api.svg?react';
 import { CreationPageContent } from './CreationPageContent';
+import { AuthenticationRoute } from '@/routes/paths';
 
 export const CreationPage = () => {
   const { t } = useTranslation();
 
   return (
-    <PageContainer>
+    <PageContainer backUrl={AuthenticationRoute.Overview}>
       <Page color='dark' icon={<ApiIcon />} title={t('authent_creationpage.banner_title')}>
         <CreationPageContent />
       </Page>

diff --git a/frontend/src/features/creationpage/CreationPageContent.tsx b/frontend/src/features/creationpage/CreationPageContent.tsx
@@ -4,7 +4,6 @@ import { useNavigate } from 'react-router-dom';
 import {
   Textfield,
   Button,
-  HelpText,
   Heading,
   Combobox,
   Alert,
@@ -51,14 +50,7 @@ export const CreationPageContent = () => {
     <div className={classes.creationPageContainer}>
       <div className={classes.inputContainer}>
         <Textfield
-          label={
-            <div className={classes.nameLabel}>
-              <div>{t('authent_creationpage.input_field_label')}</div>
-              <HelpText size='small' title='Hjelpetekst for systemtilgang'>
-                Hjelpetekst for systemtilgang
-              </HelpText>
-            </div>
-          }
+          label={t('authent_creationpage.input_field_label')}
           value={integrationTitle}
           onChange={(e) => setIntegrationTitle(e.target.value)}
         />
@@ -74,7 +66,7 @@ export const CreationPageContent = () => {
       <div className={classes.inputContainer}>
         <Combobox
           label={t('authent_creationpage.pull_down_menu_label')}
-          placeholder='Velg ...'
+          placeholder={t('common.choose')}
           onValueChange={(newValue: string[]) => {
             if (newValue?.length) {
               setSelectedSystemType(newValue[0]);
@@ -94,7 +86,9 @@ export const CreationPageContent = () => {
             );
           })}
         </Combobox>
-        {isLoadVendorError && <Alert severity='danger'>Kunne ikke laste systemleverandører</Alert>}
+        {isLoadVendorError && (
+          <Alert severity='danger'>{t('authent_creationpage.load_vendors_error')}</Alert>
+        )}
       </div>
       <div className={classes.buttonContainer}>
         <Button
@@ -106,7 +100,7 @@ export const CreationPageContent = () => {
           {t('authent_creationpage.confirm_button')}
         </Button>
         <Button variant='tertiary' size='small' onClick={handleCancel}>
-          {t('authent_creationpage.cancel_button')}
+          {t('common.cancel')}
         </Button>
       </div>
     </div>

diff --git a/frontend/src/features/detailpage/DetailPage.tsx b/frontend/src/features/detailpage/DetailPage.tsx
@@ -1,20 +1,30 @@
 import React from 'react';
 import { useParams } from 'react-router-dom';
-import { Alert } from '@digdir/designsystemet-react';
+import { useTranslation } from 'react-i18next';
+import { Alert, Spinner } from '@digdir/designsystemet-react';
 import { Page, PageContainer } from '@/components';
 import { DetailPageContent } from './DetailPageContent';
 import ApiIcon from '@/assets/Api.svg?react';
 import { useGetSystemUserQuery } from '@/rtk/features/systemUserApi';
+import { AuthenticationRoute } from '@/routes/paths';
 
 export const DetailPage = (): React.ReactNode => {
+  const { t } = useTranslation();
   const { id } = useParams();
 
-  const { data: systemUser, isError: isLoadSystemUserError } = useGetSystemUserQuery(id || '');
+  const {
+    data: systemUser,
+    isError: isLoadSystemUserError,
+    isLoading: isLoadingSystemUser,
+  } = useGetSystemUserQuery(id || '');
 
   return (
-    <PageContainer>
-      <Page color='dark' icon={<ApiIcon />} title={'Rediger systemtilgang'}>
-        {isLoadSystemUserError && <Alert severity='danger'>Kunne ikke laste systemtilgang</Alert>}
+    <PageContainer backUrl={AuthenticationRoute.Overview}>
+      <Page color='dark' icon={<ApiIcon />} title={t('authent_detailpage.edit_systemuser')}>
+        {isLoadingSystemUser && <Spinner title='laster systemtilgang' />}
+        {isLoadSystemUserError && (
+          <Alert severity='danger'>{t('authent_detailpage.load_systemuser_error')}</Alert>
+        )}
         {systemUser && <DetailPageContent systemUser={systemUser} />}
       </Page>
     </PageContainer>