chore: Implementing text when saving scopes (#14215)

Altinn · Dec 2, 2024 · ea8ca6c · ea8ca6c
1 parent ebfb78e
commit ea8ca6c
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 4 deletions.
diff --git a/...ngsModal/components/Tabs/Maskinporten/ScopeListContainer/SaveStatus/SaveStatus.module.css b/...ngsModal/components/Tabs/Maskinporten/ScopeListContainer/SaveStatus/SaveStatus.module.css
@@ -0,0 +1,11 @@
+.savingContainer {
+  display: flex;
+  align-items: center;
+  gap: var(--fds-spacing-1);
+  margin-top: var(--fds-spacing-4);
+}
+
+.savedIcon {
+  font-size: var(--fds-sizing-8);
+  color: var(--fds-semantic-text-neutral-subtle);
+}
diff --git a/...tingsModal/components/Tabs/Maskinporten/ScopeListContainer/SaveStatus/SaveStatus.test.tsx b/...tingsModal/components/Tabs/Maskinporten/ScopeListContainer/SaveStatus/SaveStatus.test.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { SaveStatus } from './SaveStatus';
+import { textMock } from '@studio/testing/mocks/i18nMock';
+
+describe('SaveStatus', () => {
+  it('should display a spinner while pending', () => {
+    render(<SaveStatus isPending isSaved={false} />);
+
+    expect(
+      screen.getByText(textMock('settings_modal.maskinporten_tab_save_scopes_pending')),
+    ).toBeInTheDocument();
+
+    expect(
+      screen.getByTitle(textMock('settings_modal.maskinporten_tab_save_scopes_pending_spinner')),
+    ).toBeInTheDocument();
+  });
+
+  it('should render saved status with checkmark icon', () => {
+    render(<SaveStatus isPending={false} isSaved />);
+
+    expect(
+      screen.getByText(textMock('settings_modal.maskinporten_tab_save_scopes_complete')),
+    ).toBeInTheDocument();
+  });
+
+  it('should render nothing when neither pending nor saved', () => {
+    const { container } = render(<SaveStatus isPending={false} isSaved={false} />);
+
+    expect(container).toBeEmptyDOMElement();
+  });
+});
diff --git a/...n/SettingsModal/components/Tabs/Maskinporten/ScopeListContainer/SaveStatus/SaveStatus.tsx b/...n/SettingsModal/components/Tabs/Maskinporten/ScopeListContainer/SaveStatus/SaveStatus.tsx
@@ -0,0 +1,50 @@
+import React, { type ReactElement } from 'react';
+import classes from './SaveStatus.module.css';
+import { StudioParagraph, StudioSpinner } from '@studio/components';
+import { useTranslation } from 'react-i18next';
+import { CheckmarkIcon } from '@studio/icons';
+
+type SaveStatusProps = {
+  isPending: boolean;
+  isSaved: boolean;
+};
+
+export const SaveStatus = ({ isPending, isSaved }: SaveStatusProps): ReactElement => {
+  const { t } = useTranslation();
+
+  if (isPending) {
+    return (
+      <SaveStatusContent
+        text={t('settings_modal.maskinporten_tab_save_scopes_pending')}
+        isPending
+      />
+    );
+  }
+  if (isSaved) {
+    return <SaveStatusContent text={t('settings_modal.maskinporten_tab_save_scopes_complete')} />;
+  }
+  return null;
+};
+
+type SaveStatusContentProps = {
+  text: string;
+  isPending?: boolean;
+};
+
+const SaveStatusContent = ({ text, isPending = false }: SaveStatusContentProps): ReactElement => {
+  const { t } = useTranslation();
+
+  return (
+    <div className={classes.savingContainer}>
+      <StudioParagraph size='sm'>{text}</StudioParagraph>
+      {isPending ? (
+        <StudioSpinner
+          spinnerTitle={t('settings_modal.maskinporten_tab_save_scopes_pending_spinner')}
+          size='sm'
+        />
+      ) : (
+        <CheckmarkIcon className={classes.savedIcon} />
+      )}
+    </div>
+  );
+};
diff --git a/...lButton/SettingsModal/components/Tabs/Maskinporten/ScopeListContainer/SaveStatus/index.ts b/...lButton/SettingsModal/components/Tabs/Maskinporten/ScopeListContainer/SaveStatus/index.ts
@@ -0,0 +1 @@
+export { SaveStatus } from './SaveStatus';
diff --git a/...ton/SettingsModal/components/Tabs/Maskinporten/ScopeListContainer/ScopeList/ScopeList.tsx b/...ton/SettingsModal/components/Tabs/Maskinporten/ScopeListContainer/ScopeList/ScopeList.tsx
@@ -1,6 +1,5 @@
 import React, { type ChangeEvent, type ReactElement } from 'react';
 import classes from './ScopeList.module.css';
-
 import {
   StudioCheckboxTable,
   type StudioCheckboxTableRowElement,
@@ -25,6 +24,7 @@ import { GetInTouchWith } from 'app-shared/getInTouch';
 import { EmailContactProvider } from 'app-shared/getInTouch/providers';
 import { LoggedInTitle } from '../LoggedInTitle';
 import { useUpdateSelectedMaskinportenScopesMutation } from 'app-development/hooks/mutations/useUpdateSelectedMaskinportenScopesMutation';
+import { SaveStatus } from '../SaveStatus';
 
 export type ScopeListProps = {
   maskinPortenScopes: MaskinportenScope[];
@@ -33,8 +33,11 @@ export type ScopeListProps = {
 
 export const ScopeList = ({ maskinPortenScopes, selectedScopes }: ScopeListProps): ReactElement => {
   const { t } = useTranslation();
-  const { mutate: mutateSelectedMaskinportenScopes } =
-    useUpdateSelectedMaskinportenScopesMutation();
+  const {
+    mutate: mutateSelectedMaskinportenScopes,
+    isPending: isPendingSaveScopes,
+    isSuccess: scopesSaved,
+  } = useUpdateSelectedMaskinportenScopesMutation();
 
   const checkboxTableRowElements: StudioCheckboxTableRowElement[] = mapScopesToRowElements(
     maskinPortenScopes,
@@ -103,6 +106,7 @@ export const ScopeList = ({ maskinPortenScopes, selectedScopes }: ScopeListProps
           ))}
         </StudioCheckboxTable.Body>
       </StudioCheckboxTable>
+      <SaveStatus isPending={isPendingSaveScopes} isSaved={scopesSaved} />
     </div>
   );
 };

diff --git a/frontend/language/src/nb.json b/frontend/language/src/nb.json
@@ -1023,9 +1023,12 @@
   "settings_modal.maskinporten_tab_available_scopes_description_help": "Hvis du trenger tilgang til flere scopes i denne listen, <0> tar du kontakt med Altinn servicedesk.</0>",
   "settings_modal.maskinporten_tab_available_scopes_description_help_link": "tar du kontakt med Altinn servicedesk.",
   "settings_modal.maskinporten_tab_available_scopes_title": "Scopes for denne virksomheten",
-  "settings_modal.maskinporten_tab_description": "Maskinporten autentiserer og autoriserer API-er som skal brukes i apper. I Maskinporten kan du lage hvilke scopes en app skal ha fra og til andre systemer, for eksempel tilgang til persondata.",
+  "settings_modal.maskinporten_tab_description": "Maskinporten autentiserer og autoriserer API-er som skal brukes i apper. I Maskinporten kan du sette opp hvilke scopes en app skal ha fra og til andre systemer, for eksempel tilgang til persondata.",
   "settings_modal.maskinporten_tab_login_with_ansattporten": "Logg inn med Ansattporten",
   "settings_modal.maskinporten_tab_login_with_description": "Med Ansattporten logger du inn på vegne av virksomheten. Her kan du se og velge scopes.",
+  "settings_modal.maskinporten_tab_save_scopes_complete": "Lagret",
+  "settings_modal.maskinporten_tab_save_scopes_pending": "Lagrer...",
+  "settings_modal.maskinporten_tab_save_scopes_pending_spinner": "Lagrer scopes",
   "settings_modal.maskinporten_tab_title": "Velg scopes fra Maskinporten",
   "settings_modal.policy_tab_heading": "Tilganger",
   "settings_modal.setup_tab_heading": "Oppsett",