finalize the buttons and add test cases

help-docs/chaise/facet-panel.md

@@ -0,0 +1,44 @@
+# Filter panel
+
+In this page we will go over how the filter panel works.
+
+## Table of contents
+
+- [Customizing the order of filters](#customizing-the-order-of-filters)
+  - [How to move filters](#how-to-move-filters)
+  - [How to save the order](#how-to-save-the-order)
+  - [How to discard the saved order](#how-to-discard-the-saved-order)
+
+
+## Customizing the order of filters {id=customizing-the-order-of-filters}
+
+You can change the order of filters in the filter panel. This section goes over how you could move filters, save the customized order, and if needed, discard the customzed order.
+
+### How to move filters {id=how-to-move-filters}
+
+To move the filters,
+
+  1. Left click on the grab ( :span::/span:{.fa-solid .fa-grip-vertical .help-page-icon} ) icon.
+  2. While holding the left click, move your mouse to the desired location.
+  3. Release the left click to finish the drag movement.
+
+Keep in mind that this order is not going to be persistent and will change back after refreshing the page. For saving the order, please refer to the [How to save the order](#how-to-save-the-order) section.
+
+### How to save the order {id=how-to-save-the-order}
+
+If you would like to save the order in your browser,
+
+  1. Click on the menu icon (:span::/span:{.fa-solid .fa-bars .help-page-icon}) besides the "Refine search".
+
+  2. In the opened menu, select the save (:span::/span:{.fa-solid .fa-check-to-slot .help-page-icon}) option.
+
+This will ensure your customized order is saved in your browser. If you would like to apply the default order instead please refer to the [How to discard the saved order](#how-to-discard-the-saved-order) section.
+
+### How to discard the saved order {id=how-to-discard-the-saved-order}
+
+To discard the saved order,
+
+  1. Click on the menu icon ( :span::/span:{.fa-solid .fa-bars .help-page-icon} ) besides the "Refine search".
+
+  2. In the opened menu, select the reset ( :span::/span:{.fa-solid .fa-undo .help-page-icon} ) option.
+f

src/assets/scss/_buttons.scss

@@ -96,12 +96,13 @@
     padding: 0;
   }
 
+  // this is currently designed mostly for 
   &.chaise-btn-with-indicator:before {
     content: '';
     background-color: map-get(variables.$color-map, 'primary');
     position: absolute;
-    top: -2px;
-    right: -2px;
+    top: -1px;
+    right: -1px;
     width: 8px;
     height: 8px;
     border-radius: 50%;

src/components/faceting/faceting.tsx

@@ -1,7 +1,13 @@
 import '@isrd-isi-edu/chaise/src/assets/scss/_faceting.scss';
 
+//react-beatiful-dnd
+import {
+  DragDropContext, Draggable, DraggableProvided, DroppableProvided, DropResult
+} from 'react-beautiful-dnd';
+
 // Components
 import Accordion from 'react-bootstrap/Accordion';
+import ChaiseDroppable from '@isrd-isi-edu/chaise/src/components/chaise-droppable';
 import ChaiseTooltip from '@isrd-isi-edu/chaise/src/components/tooltip';
 import Dropdown from 'react-bootstrap/Dropdown';
 import FacetChoicePicker from '@isrd-isi-edu/chaise/src/components/faceting/facet-choice-picker';
@@ -25,16 +31,14 @@ import { ConfigService } from '@isrd-isi-edu/chaise/src/services/config';
 import { LogService } from '@isrd-isi-edu/chaise/src/services/log';
 import $log from '@isrd-isi-edu/chaise/src/services/logger';
 
-//react-beatiful-dnd
-import {
-  DragDropContext, Draggable, DraggableProvided, DroppableProvided, DropResult
-} from 'react-beautiful-dnd';
-import ChaiseDroppable from '@isrd-isi-edu/chaise/src/components/chaise-droppable';
+// utils
+import { HELP_PAGES } from '@isrd-isi-edu/chaise/src/utils/constants';
 import {
   getFacetOrderStorageKey, getInitialFacetOpenStatus, getInitialFacetOrder,
   hasStoredFacetOrder
 } from '@isrd-isi-edu/chaise/src/utils/faceting-utils';
 import LocalStorage from '@isrd-isi-edu/chaise/src/utils/storage';
+import { getHelpPageURL } from '@isrd-isi-edu/chaise/src/utils/uri-utils';
 
 
 type FacetingProps = {
@@ -805,45 +809,55 @@ const Faceting = ({
   };
 
   const renderFacetDropdownMenu = () => {
-    const showChangeIndicator = facetListModified;
-    const disableSaveBtn = !facetListModified && isStoredFacetOrderApplied;
-    const disableApplyDefault = !facetListModified && !isStoredFacetOrderApplied;
-    const disableApplyStored = isStoredFacetOrderApplied || !hasStoredFacetOrder(reference);
+    const storedIsAvailable = hasStoredFacetOrder(reference);
+    const showChangeIndicator = facetListModified || (storedIsAvailable && !isStoredFacetOrderApplied);
+    const allowSave = showChangeIndicator;
+    const allowApplyDefault = facetListModified || isStoredFacetOrderApplied;
+    const allowApplySaved = storedIsAvailable && showChangeIndicator;
 
     return (
       <Dropdown className='chaise-dropdown chaise-dropdown-no-icon side-panel-heading-menu'>
         <ChaiseTooltip
-          placement='right' tooltip='Find more about this side panel'
+          placement='right' tooltip='Customize the filter order'
         >
           <Dropdown.Toggle className={`chaise-btn chaise-btn-sm chaise-btn-tertiary${showChangeIndicator ? ' chaise-btn-with-indicator' : ''}`}>
             <span className='fa-solid fa-bars'></span>
           </Dropdown.Toggle>
         </ChaiseTooltip>
         <Dropdown.Menu>
-          <Dropdown.Item className='dropdown-item-w-icon' disabled={disableSaveBtn} onClick={() => storeFacetOrder()}>
+          <Dropdown.Item className='dropdown-item-w-icon save-facet-order-btn' disabled={!allowSave} onClick={() => storeFacetOrder()}>
             <span>
               <span className='dropdown-item-icon fa-solid fa-check-to-slot'></span>
               <span>Save facet order</span>
             </span>
           </Dropdown.Item>
-          <Dropdown.Item className='dropdown-item-w-icon' disabled={disableApplyDefault} onClick={() => applyDefaultOrStoredFacetOrder(true)}>
+          <Dropdown.Item
+            className='dropdown-item-w-icon show-default-facet-order-btn'
+            disabled={!allowApplyDefault} onClick={() => applyDefaultOrStoredFacetOrder(true)}
+          >
             <span>
               <span className='dropdown-item-icon fa-solid fa-undo'></span>
               <span>Reset to default</span>
             </span>
           </Dropdown.Item>
-          <Dropdown.Item className='dropdown-item-w-icon' disabled={disableApplyStored} onClick={() => applyDefaultOrStoredFacetOrder(false)}>
+          <Dropdown.Item
+            className='dropdown-item-w-icon apply-saved-facet-order-btn'
+            disabled={!allowApplySaved} onClick={() => applyDefaultOrStoredFacetOrder(false)}
+          >
             <span>
               <span className='dropdown-item-icon fa-solid fa-check'></span>
               <span>Apply saved state</span>
             </span>
           </Dropdown.Item>
-          {/* <Dropdown.Item className='dropdown-item-w-icon' href={getHelpPageURL(HELP_PAGES.FACET_PANEL)} target='_blank'>
+          <Dropdown.Item
+            className='dropdown-item-w-icon side-panel-heading-menu-help-btn'
+            href={getHelpPageURL(HELP_PAGES.FACET_PANEL)} target='_blank'
+          >
             <span>
               <span className='dropdown-item-icon chaise-icon chaise-info'></span>
               <span>Help</span>
             </span>
-          </Dropdown.Item> */}
+          </Dropdown.Item>
         </Dropdown.Menu>
       </Dropdown>
     )

src/utils/constants.ts

@@ -198,7 +198,22 @@ export const CUSTOM_EVENTS = {
 
 export const HELP_PAGES_FOLDER_LOCATION = 'help-docs';
 
-export const HELP_PAGES = {
+export const HELP_PAGES : {
+  [name: string]: {
+    /**
+     * the title of page (what users see)
+     */
+    title: string,
+    /**
+     * what should be used as the query parameter to find the page.
+     */
+    location: string,
+    /**
+     * whether this is a built-in component or a markdown help page.
+     */
+    isComponent: boolean
+  }
+} = {
   MARKDOWN_HELP: {
     title: 'Markdown Help',
     location: 'chaise/markdown-help',
@@ -213,6 +228,11 @@ export const HELP_PAGES = {
     title: 'Viewer Annotation',
     location: 'chaise/viewer-annotation',
     isComponent: false
+  },
+  FACET_PANEL: {
+    title: 'Filter panel',
+    location: 'chaise/facet-panel',
+    isComponent: false
   }
 }
 

test/e2e/locators/recordset.ts

@@ -290,7 +290,27 @@ export default class RecordsetLocators {
 
   static getShowFilterPanelBtn(container: Page | Locator): Locator {
     return container.locator('.show-filter-panel-btn');
-}
+  }
+
+  static getSidePanelHeadingMenu(container: Page | Locator): Locator {
+    return container.locator('.side-panel-heading-menu .dropdown-toggle');
+  }
+
+  static getSaveFacetOrderBtn(container: Page | Locator): Locator {
+    return container.locator('.save-facet-order-btn');
+  }
+
+  static getShowDefaultFacetOrderBtn(container: Page | Locator): Locator {
+    return container.locator('.show-default-facet-order-btn');
+  }
+
+  static getApplySavedFacetOrderBtn(container: Page | Locator): Locator {
+    return container.locator('.apply-saved-facet-order-btn');
+  }
+
+  static getSidePanelHeadingMenuHelpBtn(container: Page | Locator): Locator {
+    return container.locator('.side-panel-heading-menu-help-btn');
+  }
 
   static getAllFacets(container: Page | Locator): Locator {
     return container.locator('.panel-group .facet-panel');

test/e2e/specs/delete-prohibited/recordset/reorder-facet.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect, TestInfo, Page } from '@playwright/test';
+import { test, expect, TestInfo, Page, Locator } from '@playwright/test';
 
 // locators
 import RecordsetLocators from '@isrd-isi-edu/chaise/test/e2e/locators/recordset';
@@ -9,7 +9,7 @@ import {
   openRecordsetAndResetFacetState, TestIndividualFacetParams, testIndividualFacet, resetFacetState,
   testDisplayedFacets
 } from '@isrd-isi-edu/chaise/test/e2e/utils/recordset-utils';
-import { dragAndDropWithScroll } from '@isrd-isi-edu/chaise/test/e2e/utils/page-utils';
+import { clickNewTabLink, dragAndDropWithScroll } from '@isrd-isi-edu/chaise/test/e2e/utils/page-utils';
 
 
 const testParams = {
@@ -27,6 +27,7 @@ const testParams = {
       'col_w_column_order_false', 'col_w_column_order', 'col_w_long_values'
     ],
     openFacetIndexes: [0, 1, 11],
+    openFacetNames: ['id', 'int_col', 'to_name'],
     /**
      * this order is generated by pausing the page after the moveFacet function calls and looking at the UI.
      */
@@ -36,7 +37,8 @@ const testParams = {
       'f3 (term)', 'from_name', 'to_name', 'F1 with Term', 'Check Presence Text',
       'F3 Entity', 'F5', 'F5 with filter', 'Outbound1 (using F1)',
       'col_w_column_order_false', 'col_w_column_order', 'col_w_long_values',
-    ]
+    ],
+    facetsToOpenAfterReorder: [4, 10]
   },
   savedStateWInvalids: {
     storage: [
@@ -151,8 +153,12 @@ const facetSelectionParams: TestIndividualFacetParams[] = [
 test.describe('Facet reorder feature', () => {
   test.describe.configure({ mode: 'parallel' });
 
-  test('changing the order of facets', async ({ page, baseURL }, testInfo) => {
+  test.only('changing the order of facets', async ({ page, baseURL }, testInfo) => {
     const currParams = testParams.initialState;
+    const menuBtn = RecordsetLocators.getSidePanelHeadingMenu(page);
+    const saveBtn = RecordsetLocators.getSaveFacetOrderBtn(page);
+    const applyDefaultBtn = RecordsetLocators.getShowDefaultFacetOrderBtn(page);
+    const applySavedBtn = RecordsetLocators.getApplySavedFacetOrderBtn(page);
 
     // this will close all the facets
     await openRecordsetAndResetFacetState(
@@ -172,14 +178,69 @@ test.describe('Facet reorder feature', () => {
     });
 
     await test.step('interacting with the reordered facets', async () => {
+      // test facet selection
       await testFacetSelection(page, []);
+
+      // open some of the facets
+      for await (const facetId of testParams.initialState.facetsToOpenAfterReorder) {
+        const facet = RecordsetLocators.getFacetById(page, facetId);
+        await RecordsetLocators.getFacetHeaderButtonById(facet, facetId).click();
+      }
+    });
+
+    await test.step('the Save button should be available and clicking on it should save the order.', async () => {
+      await testMenuBtnIndicator(menuBtn, true);
+      await menuBtn.click();
+
+      await testMenuBtnDisabled(saveBtn, false);
+      await testMenuBtnDisabled(applyDefaultBtn, false);
+      await testMenuBtnDisabled(applySavedBtn, true);
+      await saveBtn.click();
+
+      await testMenuBtnIndicator(menuBtn, false);
+      await testDisplayedFacets(page, testParams.initialState.facetNamesAfterReorder, ['timestamp_col', 'F1']);
+    });
+
+    await test.step('clicking on "Reset to default" should display the default order.', async () => {
+      await menuBtn.click();
+      await testMenuBtnDisabled(saveBtn, true);
+      await testMenuBtnDisabled(applyDefaultBtn, false);
+      await testMenuBtnDisabled(applySavedBtn, true);
+      await applyDefaultBtn.click();
+
+      await testMenuBtnIndicator(menuBtn, true);
+      await testDisplayedFacets(page, testParams.initialState.facetNames, ['to_name']);
+    });
+
+    await test.step('clicking on "Apply saved state" should display the saved state.', async () => {
+      await menuBtn.click();
+      await testMenuBtnDisabled(saveBtn, false);
+      await testMenuBtnDisabled(applyDefaultBtn, true);
+      await testMenuBtnDisabled(applySavedBtn, false)
+      await applySavedBtn.click();
+
+      await testMenuBtnIndicator(menuBtn, false);
+      await testDisplayedFacets(page, testParams.initialState.facetNamesAfterReorder);
     });
 
     await test.step('refreshing the page should display the saved order and open state.', async () => {
       await page.reload();
-      // int_col and id will always be open
-      await testDisplayedFacets(page, testParams.initialState.facetNamesAfterReorder, ['int_col', 'id']);
+      await testDisplayedFacets(page, testParams.initialState.facetNamesAfterReorder);
+    });
+
+    await test.step('changing the order of facets without clicking on save should not save the order.', async () => {
+      await moveFacet(page, 0, 2);
+      await page.reload();
+      await testDisplayedFacets(page, testParams.initialState.facetNamesAfterReorder);
+    });
+
+    await test.step('"Help" option should navigate to the help page.', async () => {
+      await menuBtn.click();
+      const newPage = await clickNewTabLink(RecordsetLocators.getSidePanelHeadingMenuHelpBtn(page));
+      await newPage.waitForURL('**/help/?page=chaise%2Ffacet-panel');
+      await newPage.close();
     });
+
   });
 
   test('opening a page where the saved state has extra or invalid facets', async ({ page, baseURL }, testInfo) => {
@@ -276,3 +337,21 @@ const changeStoredOrder = async (page: Page, testInfo: TestInfo, order: any) =>
 
   await page.reload();
 }
+
+const testMenuBtnDisabled = async (locator: Locator, disabled: boolean) => {
+  await expect.soft(locator).toBeVisible();
+  if (disabled) {
+    await expect.soft(locator).toHaveClass(/disabled/);
+  } else {
+    await expect.soft(locator).not.toHaveClass(/disabled/);
+  }
+}
+
+const testMenuBtnIndicator = async (locator: Locator, hasIndicator: boolean) => {
+  await expect.soft(locator).toBeVisible();
+  if (hasIndicator) {
+    await expect.soft(locator).toHaveClass(/chaise-btn-with-indicator/);
+  } else {
+    await expect.soft(locator).not.toHaveClass(/chaise-btn-with-indicator/);
+  }
+}