feat(admin panel): alert for unsaved changes on customize view (#866)

* feat(admin panel): add unsaved changes alert reminder when a user adds or removes a theme/language

* feat(admin panel): new icon for customize view

* test(admin panel): customize - unsaved changes reminder tests

Author: enrimon15

src/oneid/oneid-control-panel/src/components/DrawerNav.tsx

@@ -8,7 +8,7 @@ import {
 } from '@mui/material';
 import { Link, useLocation } from 'react-router-dom';
 import { uniqueId } from 'lodash';
-import { MoveToInbox, Mail, People } from '@mui/icons-material';
+import { MoveToInbox, People, Palette } from '@mui/icons-material';
 import { ROUTE_PATH, USER_ROOT_PATH } from '../utils/constants';
 import { ENV } from '../utils/env';
 import logoPagoPa from '../assets/logo_pagopa.png';
@@ -25,7 +25,7 @@ const navData = (clientId?: string, isAuthenticated?: boolean) => [
   },
   {
     name: 'Customize UI',
-    icon: <Mail fontSize="inherit" />,
+    icon: <Palette fontSize="inherit" />,
     to: ROUTE_PATH.CUSTOMIZE,
     isVisible: !!clientId && isAuthenticated,
     matchPath: (pathname: string) => pathname.startsWith(ROUTE_PATH.CUSTOMIZE),

src/oneid/oneid-control-panel/src/pages/Customize/Customize.test.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable sonarjs/no-duplicate-string */
 import React from 'react';
-import { render, screen, within } from '@testing-library/react';
+import { render, screen, within, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { describe, it, expect, vi } from 'vitest';
 import { Customize } from './Customize';
@@ -282,4 +282,39 @@ describe('Refactored ReservedAreaForm Component', () => {
     expect(screen.queryByText('enterprise')).not.toBeInTheDocument();
     expect(screen.getByTestId('theme-select')).toHaveTextContent('default');
   });
+
+  it('should show and hide the unsaved changes reminder', async () => {
+    const user = userEvent.setup();
+    render(<Customize />, { wrapper: createWrapper() });
+
+    expect(
+      screen.queryByText(/You have unsaved changes/i)
+    ).not.toBeInTheDocument();
+
+    await user.click(screen.getByRole('button', { name: /Add Language/i }));
+
+    // select a new language
+    const languageSelect = screen.getByTestId('language-selector');
+    const button = within(languageSelect).getByRole('combobox', {
+      hidden: true,
+    });
+    await user.click(button);
+    await user.click(screen.getByRole('option', { name: /deutsch/i }));
+
+    await user.click(screen.getByRole('button', { name: 'Add' }));
+
+    // the reminder is now visible
+    expect(screen.getByText(/You have unsaved changes/i)).toBeInTheDocument();
+
+    const saveButton = screen.getByRole('button', { name: /Save Changes/i });
+    expect(saveButton).not.toBeDisabled();
+    await user.click(saveButton);
+
+    // reminder is hidden again
+    await waitFor(() => {
+      expect(
+        screen.queryByText(/You have unsaved changes/i)
+      ).not.toBeInTheDocument();
+    });
+  });
 });

src/oneid/oneid-control-panel/src/pages/Customize/Customize.tsx

@@ -16,6 +16,8 @@ import {
   DialogContentText,
   DialogTitle,
   Divider,
+  Alert,
+  Fade,
 } from '@mui/material';
 import SaveIcon from '@mui/icons-material/Save';
 import {
@@ -67,6 +69,9 @@ function CustomizeDashboard() {
   const [errorUi, setErrorUi] = useState<ClientErrors | null>(null);
   const [notify, setNotify] = useState<Notify>({ open: false });
 
+  const [unsavedChangesReminder, setUnsavedChangesReminder] =
+    useState<boolean>(false);
+
   useEffect(() => {
     if (isFetched) {
       setClientData(
@@ -142,6 +147,7 @@ function CustomizeDashboard() {
       data: clientData as ClientWithoutSensitiveData,
       clientId,
     });
+    setUnsavedChangesReminder(false);
   };
 
   const isFormValid = () => {
@@ -252,6 +258,7 @@ function CustomizeDashboard() {
 
   const handleAddLanguage = () => {
     if (!languageToAdd) return;
+    setUnsavedChangesReminder(true);
     setClientData((prev) => {
       if (!prev || !prev.localizedContentMap) return prev;
       const newThemeContent = {
@@ -272,6 +279,7 @@ function CustomizeDashboard() {
 
   const handleRemoveLanguage = (langToRemove: string) => {
     if (!activeTheme || Object.keys(activeTheme).length <= 1) return;
+    setUnsavedChangesReminder(true);
     setClientData((prev) => {
       if (!prev || !prev.localizedContentMap) return prev;
       const themeContent = prev.localizedContentMap[activeThemeKey] as Record<
@@ -319,6 +327,7 @@ function CustomizeDashboard() {
       return;
     }
 
+    setUnsavedChangesReminder(true);
     setClientData((prev) => {
       if (!prev) prev = {} as ClientWithoutSensitiveData; // Ensure prev is always defined
       // Always set backButtonEnabled explicitly and ensure it's always boolean
@@ -350,6 +359,7 @@ function CustomizeDashboard() {
       setConfirmModalOpen(false);
       return;
     }
+    setUnsavedChangesReminder(true);
     setClientData((prev) => {
       if (!prev?.localizedContentMap) return prev;
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -410,15 +420,21 @@ function CustomizeDashboard() {
         )}
       </ContentBox>
 
-      <Button
-        sx={{ mt: 3, mb: 4 }}
-        variant="contained"
-        startIcon={<SaveIcon />}
-        onClick={handleSubmit}
-        disabled={isUpdating || !isFormValid()}
-      >
-        {isUpdating ? 'Saving...' : 'Save Changes'}
-      </Button>
+      <Box sx={{ mt: 3, mb: 4 }}>
+        <Fade in={unsavedChangesReminder} timeout={500} unmountOnExit>
+          <Alert severity="info" sx={{ mb: 2 }}>
+            You have unsaved changes. Click ‘Save Changes’ to apply them.
+          </Alert>
+        </Fade>
+        <Button
+          variant="contained"
+          startIcon={<SaveIcon />}
+          onClick={handleSubmit}
+          disabled={isUpdating || !isFormValid()}
+        >
+          {isUpdating ? 'Saving...' : 'Save Changes'}
+        </Button>
+      </Box>
 
       {/* TODO swith to useModal hook */}
       {/* Modals are unchanged but their handlers are updated */}