feat: Change new toolbar mode switching buttons labels for ADP (#2068)

* feat: add UI Adaptation and Navigation button labels in toolbar in ADP case * fix: add unit test for navigation buttons * fix: removed initial state copy and set scenario as suggested * chore: remove adp state from imports add new changeset * Delete .changeset/twenty-shirts-shop.md * Update chilly-dolphins-love.md * Linting auto fix commit --------- Co-authored-by: Nikita B <[email protected]> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
SAP · Jul 10, 2024 · cec4a97 · cec4a97
1 parent dd14b7a
commit cec4a97
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 5 deletions.
diff --git a/.changeset/chilly-dolphins-love.md b/.changeset/chilly-dolphins-love.md
@@ -0,0 +1,6 @@
+---
+'@sap-ux/control-property-editor': patch
+'@sap-ux/preview-middleware': patch
+---
+
+Live and Edit buttons are visible as Navigation and UI Adpatation only when in ADP scenario.
diff --git a/packages/control-property-editor/src/i18n/i18n.json b/packages/control-property-editor/src/i18n/i18n.json
@@ -78,9 +78,11 @@
   "CONTROL": "Selector Id: ",
   "MODE": "Mode",
   "LIVE": "Live",
-  "EDIT": "Edit",
+  "EDIT": "Edit",  
+  "UI_ADAPTATION": "UI Adaptation",
   "SAVE": "Save",
   "UNDO": "Undo",
   "REDO": "Redo",
+  "NAVIGATION": "Navigation",
   "NAVIGATE": "Navigate"
 }
diff --git a/packages/control-property-editor/src/slice.ts b/packages/control-property-editor/src/slice.ts
@@ -133,7 +133,6 @@ export const initialState: SliceState = {
     },
     dialogMessage: undefined,
     appMode: 'adaptation',
-
     changeStack: {
         canUndo: false,
         canRedo: false

diff --git a/packages/control-property-editor/src/toolbar/ModeSwitcher.tsx b/packages/control-property-editor/src/toolbar/ModeSwitcher.tsx
@@ -21,6 +21,7 @@ export function ModeSwitcher(): ReactElement {
 
     const mode = useSelector<RootState, 'navigation' | 'adaptation'>((state) => state.appMode);
     const disabled = useSelector<RootState, boolean>((state) => state.isAppLoading);
+    const isAdpProject = useSelector<RootState, boolean>((state) => state.isAdpProject);
 
     const handleAdaptationClick = useCallback(() => {
         dispatch(setAppMode('adaptation'));
@@ -38,14 +39,14 @@ export function ModeSwitcher(): ReactElement {
                 checked={mode === 'adaptation'}
                 onClick={handleAdaptationClick}
                 disabled={disabled}>
-                {t('EDIT')}
+                {isAdpProject ? t('UI_ADAPTATION') : t('EDIT')}
             </UIDefaultButton>
             <UIDefaultButton
                 transparent={true}
                 checked={mode === 'navigation'}
                 onClick={handleNavigationClick}
                 disabled={disabled}>
-                {t('LIVE')}
+                {isAdpProject ? t('NAVIGATION') : t('LIVE')}
             </UIDefaultButton>
         </div>
     );

diff --git a/packages/control-property-editor/test/unit/toolbar/ModeSwitcher.test.tsx b/packages/control-property-editor/test/unit/toolbar/ModeSwitcher.test.tsx
@@ -8,7 +8,7 @@ import { ModeSwitcher } from '../../../src/toolbar/ModeSwitcher';
 import { mockResizeObserver } from '../../utils/utils';
 import { initIcons } from '@sap-ux/ui-components';
 import { appLoaded, setAppMode } from '@sap-ux-private/control-property-editor-common';
-import { initialState } from '../../../src/slice';
+import { initialState, setProjectScenario } from '../../../src/slice';
 
 beforeAll(() => {
     mockResizeObserver();
@@ -38,3 +38,28 @@ test('renders ModeSwitcher', () => {
     editBtn.click();
     expect(dispatch).toBeCalledWith(setAppMode('adaptation'));
 });
+
+test('renders ModeSwitcher with changed button names for ADP', () => {
+    const { dispatch, store } = render(<ModeSwitcher />, { initialState });
+    store.dispatch(setProjectScenario('ADAPTATION_PROJECT'));
+    store.dispatch(appLoaded());
+    dispatch.mockClear();
+
+    expect(screen.getByText(/mode:/i)).toBeDefined();
+    const themeCalloutContent = screen.getAllByRole('button');
+    expect(themeCalloutContent).toHaveLength(2);
+
+    expect(screen.getByText(/mode:/i)).toBeInTheDocument();
+
+    const uiAdaptationBtn = screen.getByRole('button', { name: /ui adaptation/i });
+    expect(uiAdaptationBtn).toBeInTheDocument();
+
+    const navigationBtn = screen.getByRole('button', { name: /navigation/i });
+    expect(navigationBtn).toBeInTheDocument();
+
+    navigationBtn.click();
+    expect(dispatch).toBeCalledWith(setAppMode('navigation'));
+
+    uiAdaptationBtn.click();
+    expect(dispatch).toBeCalledWith(setAppMode('adaptation'));
+});