[Misc] Cherry pick 11756-2 (#11833)

Co-authored-by: Armando DBG <bollain@gmail.com>
(r11.8 → 11.8)

Author: apryse-webviewer-ui

src/components/ModularComponents/CellBorders/CellBorders.js

@@ -7,6 +7,7 @@ import { getPresetButtonDOM } from '../Helpers/menuItems';
 import ToggleElementButton from '../ToggleElementButton';
 import setCellBorder from 'src/helpers/setCellBorder';
 import getButtonDisplay from 'src/helpers/getBorderDisplayButton';
+import isBorderButtonActive from 'src/helpers/isBorderButtonActive';
 import selectors from 'selectors';
 import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
@@ -17,6 +18,7 @@ const CellBorders = (props) => {
   const { isFlyoutItem, dataElement, disabled } = props;
   const selectedBorderStyleListOption = useSelector((state)=> selectors.getSelectedBorderStyleListOption(state));
   const selectedBorderColorOption = useSelector((state)=> selectors.getSelectedBorderColorOption(state));
+  const isSingleCell = useSelector((state) => selectors.getIsSingleCell(state));
 
   const { t } = useTranslation();
 
@@ -58,6 +60,7 @@ const CellBorders = (props) => {
             React.cloneElement(button, {
               key: button.props.dataElement,
               className: 'border-button',
+              isActive: isSingleCell ? isBorderButtonActive(button.props.dataElement) : false
             })
           ))}
         </div>

src/components/ModularComponents/CellBorders/CellBorders.stories.js

@@ -5,50 +5,76 @@ import { Provider } from 'react-redux';
 import { configureStore } from '@reduxjs/toolkit';
 import rootReducer from 'src/redux/reducers/rootReducer';
 import { within, expect } from 'storybook/test';
-import i18next from 'i18next';
+import { getTranslatedText } from 'helpers/testTranslationHelper';
 
 const createMockDocumentViewer = (getSelectedCellRange, cells) => () => ({
   getSpreadsheetEditorManager: () => ({
     getSelectedCellRange,
     getSelectedCells: () => cells,
   }),
 });
-const store = configureStore({ reducer: rootReducer });
 const originalCoreGetDocumentViewer = core.getDocumentViewer;
 
-export default {
-  title: 'ModularComponents/CellBorders',
-  component: CellBorders,
-  decorators: [
-    (Story) => {
-      core.getDocumentViewer = originalCoreGetDocumentViewer;
-      return (
-        <Provider store={store}>
-          <Story />
-        </Provider>
-      );
-    },
-  ],
+const mockConfigs = {
+  multipleCells: {
+    range: () => ({ firstRow: 0, lastRow: 1, firstColumn: 0, lastColumn: 1 }),
+    cells: [
+      { getStyle: () => ({ getCellBorder: () => ({ style: 'Thin' }) }) },
+      { getStyle: () => ({ getCellBorder: () => ({}) }) }
+    ],
+    isSingleCell: false
+  },
+  singleCell: {
+    range: () => ({ firstRow: 1, lastRow: 1, firstColumn: 1, lastColumn: 1 }),
+    cells: [{
+      getStyle: () => ({
+        getCellBorder: (side) => {
+          return ['Right', 'Left'].includes(side)
+            ? { style: 'Thin' }
+            : { style: 'None' };
+        }
+      })
+    }],
+    isSingleCell: true
+  },
+  noBorders: {
+    range: () => ({ firstRow: 1, lastRow: 1, firstColumn: 1, lastColumn: 1 }),
+    cells: [{
+      getStyle: () => ({ getCellBorder: () => ({ style: 'None' }) })
+    }],
+    isSingleCell: true
+  }
 };
 
-const withMultipleCells = (Story) => {
-  core.getDocumentViewer = createMockDocumentViewer(
-    () => ({ firstRow: 0, lastRow: 1, firstColumn: 0, lastColumn: 1 }),
-    [1, 2]
-  );
-  return <Story />;
+const createMockStore = (isSingleCell) => {
+  return configureStore({
+    reducer: rootReducer,
+    preloadedState: {
+      spreadsheetEditor: {
+        cellProperties: {
+          isSingleCell,
+          styles: {}
+        }
+      }
+    }
+  });
 };
 
-const withSingleCell = (Story) => {
-  core.getDocumentViewer = createMockDocumentViewer(
-    () => ({ firstRow: 1, lastRow: 1, firstColumn: 1, lastColumn: 1 }),
-    [1]
-  );
-  return <Story />;
+const createMockDecorator = (configKey) => {
+  const MockDecorator = (Story) => {
+    const config = mockConfigs[configKey];
+    core.getDocumentViewer = createMockDocumentViewer(config.range, config.cells);
+    const mockStore = createMockStore(config.isSingleCell);
+    return (
+      <Provider store={mockStore}>
+        <Story />
+      </Provider>
+    );
+  };
+  MockDecorator.displayName = `MockDecorator_${configKey}`;
+  return MockDecorator;
 };
 
-const Template = (args) => <CellBorders {...args} />;
-
 const expectedButtons = {
   'none': 'alwaysShow',
   'all': 'showForMultipleCells',
@@ -66,52 +92,72 @@ const checkButtonVisibility = async (canvas, expectedMapping) => {
   await Promise.all(
     Object.entries(expectedMapping).map(async ([name, state]) => {
       const button = canvas.queryByRole('button', {
-        name: i18next.t(`spreadsheetEditor.${name}`),
+        name: getTranslatedText(`spreadsheetEditor.${name}`),
       });
-      if (state === 'alwaysShow') {
-        expect(button).toBeInTheDocument();
-      } else {
-        expect(button).toBeNull();
-      }
+      expect(button)[state === 'alwaysShow' ? 'toBeInTheDocument' : 'toBeNull']();
     })
   );
 };
 
-export const FlyoutWithSingleCell = Template.bind({});
-FlyoutWithSingleCell.args = {
-  isFlyoutItem: true,
-  disabled: false,
-  dataElement: 'cellBordersFlyoutSingle',
-};
-FlyoutWithSingleCell.decorators = [withSingleCell];
-FlyoutWithSingleCell.play = async ({ canvasElement }) => {
+const createPlayFunction = (checkAll = false) => async ({ canvasElement }) => {
   const canvas = within(canvasElement);
   try {
-    await checkButtonVisibility(canvas, expectedButtons);
+    if (checkAll) {
+      await Promise.all(
+        Object.keys(expectedButtons).map(async (name) => {
+          const button = canvas.getByRole('button', {
+            name: getTranslatedText(`spreadsheetEditor.${name}`),
+          });
+          expect(button).toBeInTheDocument();
+        })
+      );
+    } else {
+      await checkButtonVisibility(canvas, expectedButtons);
+    }
   } finally {
     core.getDocumentViewer = originalCoreGetDocumentViewer;
   }
 };
 
-export const FlyoutWithAllButtons = Template.bind({});
-FlyoutWithAllButtons.args = {
-  isFlyoutItem: true,
-  disabled: false,
-  dataElement: 'cellBordersFlyoutAll',
-};
-FlyoutWithAllButtons.decorators = [withMultipleCells];
-FlyoutWithAllButtons.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  try {
-    await Promise.all(
-      Object.keys(expectedButtons).map(async (name) => {
-        const button = canvas.getByRole('button', {
-          name: i18next.t(`spreadsheetEditor.${name}`),
-        });
-        expect(button).toBeInTheDocument();
-      })
-    );
-  } finally {
-    core.getDocumentViewer = originalCoreGetDocumentViewer;
+const createStory = (dataElement, mockConfig, checkAll = false) => {
+  const story = Template.bind({});
+  story.args = {
+    isFlyoutItem: true,
+    disabled: false,
+    dataElement,
+  };
+  story.decorators = [createMockDecorator(mockConfig)];
+  story.play = createPlayFunction(checkAll);
+  if (!checkAll) {
+    story.parameters = window.storybook.disableRtlMode;
   }
-};
+  return story;
+};
+
+export default {
+  title: 'ModularComponents/CellBorders',
+  component: CellBorders,
+  decorators: [
+    (Story) => {
+      core.getDocumentViewer = originalCoreGetDocumentViewer;
+      return (
+        <div>
+          <style>
+            {`
+              .icon-grid .row .Button.active {
+                box-shadow: inset 0 0 0 1px var(--blue-5);
+              }
+            `}
+          </style>
+          <Story />
+        </div>
+      );
+    },
+  ],
+};
+
+const Template = (args) => <CellBorders {...args} />;
+
+export const FlyoutWithSingleCell = createStory('cellBordersFlyoutSingle', 'singleCell');
+export const FlyoutWithAllButtons = createStory('cellBordersFlyoutAll', 'multipleCells', true);
+export const FlyoutWithNoBorders = createStory('cellBordersFlyoutNoBorders', 'noBorders');

src/components/ModularComponents/Flyout/SpreadsheetFlyouts.stories.js

@@ -20,6 +20,9 @@ const createMockDocumentViewer = (getSelectedCellRange, cells) => () => ({
   }),
 });
 
+const mockReturnRange = () => ({ firstRow: 0, lastRow: 1, firstColumn: 0, lastColumn: 1 });
+const mockCells = [{ getStyle: () => ({ getCellBorder: () => ({ style: 'None' }) }) }, {}];
+
 const createInitialState = (activeFlyout, openElement) => ({
   ...oePartialState,
   viewer: {
@@ -118,10 +121,7 @@ const WithResetCoreViewer = ({ children }) => {
 
 const withStoreAndMockedCore = (activeFlyout, openElement) => {
   const decorator = (Story) => {
-    core.getDocumentViewer = createMockDocumentViewer(
-      () => ({ firstRow: 0, lastRow: 1, firstColumn: 0, lastColumn: 1 }),
-      [1, 2]
-    );
+    core.getDocumentViewer = createMockDocumentViewer(mockReturnRange, mockCells);
     const store = createStore(activeFlyout, openElement);
     return (
       <Provider store={store}>

src/helpers/getSelectedCellStyle.js

@@ -0,0 +1,17 @@
+import core from 'core';
+
+function getSelectedCellStyle() {
+  if (!core.getDocumentViewer()) {
+    return;
+  }
+  const spreadsheetEditorManager = core.getDocumentViewer().getSpreadsheetEditorManager();
+  const selectedCells = spreadsheetEditorManager.getSelectedCells();
+  if (selectedCells.length === 0) {
+    return null;
+  }
+
+  const style = selectedCells[0].getStyle();
+  return style;
+}
+
+export default getSelectedCellStyle;

src/helpers/isBorderButtonActive.js

@@ -0,0 +1,36 @@
+import getSelectedCellStyle from './getSelectedCellStyle';
+
+const isBorderButtonActive = (borderButton) => {
+  const isSelectingMultipleCells = ['Inside', 'Vertical', 'Horizontal', 'All'].includes(borderButton);
+  if (isSelectingMultipleCells) {
+    return false;
+  }
+  const cellStyle = getSelectedCellStyle();
+  const borderTopStyle = cellStyle?.getCellBorder('Top');
+  const borderLeftStyle = cellStyle?.getCellBorder('Left');
+  const borderBottomStyle = cellStyle?.getCellBorder('Bottom');
+  const borderRightStyle = cellStyle?.getCellBorder('Right');
+
+  const isUndefinedBorders = !borderTopStyle && !borderLeftStyle && !borderBottomStyle && !borderRightStyle;
+  const isRemovedBorders = [borderTopStyle, borderLeftStyle, borderBottomStyle, borderRightStyle].every((border) => border?.style === 'None');
+  if (isUndefinedBorders || isRemovedBorders) {
+    return borderButton === 'None';
+  }
+  const isHavingStylesOnAllBorders = [borderTopStyle, borderLeftStyle, borderBottomStyle, borderRightStyle].every((border) => border && border.style !== 'None');
+  if (isHavingStylesOnAllBorders) {
+    return borderButton === 'Outside';
+  }
+
+  const borderStyleMap = {
+    'Left': borderLeftStyle,
+    'Right': borderRightStyle,
+    'Top': borderTopStyle,
+    'Bottom': borderBottomStyle,
+  };
+
+  const borderStyle = borderStyleMap[borderButton];
+  const isBorderStyleActive = borderStyle?.style !== 'None' && Object.keys(borderStyleMap).includes(borderButton);
+  return isBorderStyleActive;
+};
+
+export default isBorderButtonActive;

src/helpers/isBorderButtonActive.spec.js

@@ -0,0 +1,68 @@
+import isBorderButtonActive from './isBorderButtonActive';
+import getSelectedCellStyle from './getSelectedCellStyle';
+
+jest.mock('./getSelectedCellStyle');
+
+describe('isBorderButtonActive', () => {
+  let mockGetSelectedCellStyle;
+  let mockGetCellBorder;
+
+  beforeEach(() => {
+    mockGetCellBorder = jest.fn();
+    mockGetSelectedCellStyle = jest.fn(() => ({
+      getCellBorder: mockGetCellBorder,
+    }));
+    getSelectedCellStyle.mockImplementation(mockGetSelectedCellStyle);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('when checking border sides', () => {
+    it('returns true for "Left" when left border has style other than "None"', () => {
+      mockGetCellBorder.mockImplementation((side) => {
+        if (side === 'Left') {
+          return { style: 'Thin' };
+        }
+        return undefined;
+      });
+
+      const state = isBorderButtonActive('Left');
+
+      expect(state).toBe(true);
+    });
+
+    it('returns false for "Left" when left border has style "None"', () => {
+      mockGetCellBorder.mockImplementation((side) => {
+        if (side === 'Left') {
+          return { style: 'None' };
+        }
+        return undefined;
+      });
+
+      const state = isBorderButtonActive('Left');
+
+      expect(state).toBe(false);
+    });
+  });
+
+  describe('when getSelectedCellStyle returns null', () => {
+    beforeEach(() => {
+      getSelectedCellStyle.mockReturnValue(null);
+    });
+
+    it('returns true for "None" button', () => {
+      const state = isBorderButtonActive('None');
+      expect(state).toBe(true);
+    });
+
+    it('returns false for multiple cell selection buttons', () => {
+      expect(isBorderButtonActive('Outside')).toBe(false);
+      expect(isBorderButtonActive('Inside')).toBe(false);
+      expect(isBorderButtonActive('Vertical')).toBe(false);
+      expect(isBorderButtonActive('Horizontal')).toBe(false);
+      expect(isBorderButtonActive('All')).toBe(false);
+    });
+  });
+});