Collection management

.github/workflows/cypress-testing.yml

@@ -96,7 +96,7 @@ jobs:
           git clone https://github.com/glific/cypress-testing.git
           echo done. go to dir.
           cd cypress-testing
-          git checkout main
+          git checkout collections-management
           cd ..
           cp -r cypress-testing/cypress cypress
           yarn add cypress@13.6.2

src/components/UI/DialogBox/DialogBox.module.css

@@ -5,6 +5,10 @@
   width: 474px;
 }
 
+.FullWidth {
+  width: 600px !important;
+}
+
 .ScrollPaper {
   align-items: unset !important;
 }

src/components/UI/DialogBox/DialogBox.tsx

@@ -25,6 +25,7 @@ export interface DialogProps {
   buttonMiddle?: string | null;
   additionalTitleStyles?: string | null;
   buttonOkLoading?: boolean;
+  fullWidth?: boolean;
 }
 
 export const DialogBox = ({
@@ -48,6 +49,7 @@ export const DialogBox = ({
   alwaysOntop = false,
   buttonMiddle,
   buttonOkLoading = false,
+  fullWidth = false,
 }: DialogProps) => {
   let cancelButtonDisplay = null;
   if (!skipCancel) {
@@ -124,7 +126,7 @@ export const DialogBox = ({
       open={open}
       classes={{
         container: styles.Dialogbox,
-        paper: styles.DialogboxPaper,
+        paper: `${styles.DialogboxPaper} ${fullWidth && styles.FullWidth}`,
         scrollPaper: styles.ScrollPaper,
         root: alwaysOntop ? styles.DialogboxRoot : '',
       }}

src/components/UI/Form/AutoComplete/AutoComplete.tsx

@@ -47,6 +47,7 @@ export interface AutocompleteProps {
   hasCreateOption?: boolean;
   handleCreateItem?: any;
   isFilterType?: boolean;
+  showTags?: boolean;
 }
 
 export const AutoComplete = ({
@@ -82,6 +83,7 @@ export const AutoComplete = ({
   handleCreateItem = () => {},
   placeholder = '',
   isFilterType = false,
+  showTags = true,
 }: AutocompleteProps) => {
   const errorText = getIn(errors, field.name);
   const touchedVal = getIn(touched, field.name);
@@ -125,6 +127,7 @@ export const AutoComplete = ({
   };
 
   const getRenderTags = (value: Array<any>, getTagProps: any) => {
+    if (!showTags) return null;
     let tagsToRender = value;
 
     /**
@@ -196,8 +199,6 @@ export const AutoComplete = ({
           onChange={(_event, value: any) => {
             if (asyncSearch && value.length > 0) {
               asyncValues.setValue([...value]);
-              setSearchTerm('');
-              onChange('');
             } else if (asyncSearch && value.length === 0) {
               asyncValues.setValue([]);
             }
@@ -225,7 +226,7 @@ export const AutoComplete = ({
           disableCloseOnSelect={multiple}
           renderTags={getRenderTags}
           renderOption={(props, option, { selected }) => (
-            <li {...props}>
+            <li key={option.id} {...props}>
               {multiple && (
                 <Checkbox
                   icon={icon}

src/components/UI/Pager/Pager.module.css

@@ -119,3 +119,28 @@
 .Skeleton {
   margin: 10px;
 }
+
+.SelectedItems {
+  composes: RowHeadStyle;
+  font-weight: 700;
+  text-align: left;
+}
+
+.Icon {
+  composes: RowHeadStyle;
+}
+
+.Icon span {
+  background-color: #fff;
+  border-radius: 100%;
+  padding: 8px;
+  display: flex;
+  align-items: center;
+  width: 30px;
+  margin-left: auto;
+  cursor: pointer;
+}
+
+.Checkbox {
+  padding: 1rem;
+}

src/components/UI/Pager/Pager.tsx

@@ -31,6 +31,7 @@
   collapseRow: string | undefined;
   noItemsText?: any;
   showPagination?: boolean;
+  checkboxSupport?: { action: any; icon: any; selectedItems: any };
 }
 
 // TODO: cleanup the translations code
@@ -120,41 +121,68 @@
   columnNames: Array<any>,
   columnStyles: any,
   tableVals: any,
-  handleTableChange: Function
+  handleTableChange: Function,
+  totalRows: number,
+  checkboxSupport?: { action: any; icon: any; selectedItems: any }
 ) => {
-  const headerRow = (
-    <TableRow className={styles.TableHeadRow}>
-      {columnNames.map((field: any, i: number) => (
-        <TableCell
-          key={field.label}
-          className={`${columnStyles && columnStyles[i]} ${styles.RowHeadStyle}`}
-        >
-          {i !== columnNames.length - 1 && field.name ? (
-            <TableSortLabel
-              active={field.name === tableVals.sortCol}
-              direction={tableVals.sortDirection}
-              onClick={() => {
-                if (field.name !== tableVals.sortCol) {
-                  handleTableChange('sortCol', field.name);
-                } else {
-                  handleTableChange('sortCol', field.name);
-                  handleTableChange(
-                    'sortDirection',
-                    tableVals.sortDirection === 'asc' ? 'desc' : 'asc'
-                  );
-                }
-              }}
-              className={styles.HeaderColor}
-            >
-              {field.label}
-            </TableSortLabel>
-          ) : (
-            field.label
-          )}
+  let headerRow;
+
+  if (checkboxSupport?.selectedItems && checkboxSupport?.selectedItems.length > 0) {
+    headerRow = (
+      <TableRow className={styles.TableHeadRow}>
+        <TableCell className={`${styles.Checkbox} ${styles.RowHeadStyle}`}>
+          {columnNames[0].label}
         </TableCell>
-      ))}
-    </TableRow>
-  );
+        <TableCell className={styles.SelectedItems}>
+          {checkboxSupport?.selectedItems.length} of {totalRows} selected
+        </TableCell>
+        <TableCell colSpan={3} className={styles.Icon}>
+          <span
+            onClick={() => {
+              checkboxSupport?.action();
+            }}
+          >
+            {checkboxSupport?.icon}
+          </span>
+        </TableCell>
+      </TableRow>
+    );
+  } else {
+    headerRow = (
+      <TableRow className={styles.TableHeadRow}>
+        {columnNames.map((field: any, i: number) => (
+          <TableCell
+            key={field.label}
+            className={`${columnStyles && columnStyles[i]} ${styles.RowHeadStyle}`}
+          >
+            {i !== columnNames.length - 1 && field.name ? (
+              <TableSortLabel
+                active={field.name === tableVals.sortCol}
+                direction={tableVals.sortDirection}
+                onClick={() => {
+                  if (field.name !== tableVals.sortCol) {
+                    handleTableChange('sortCol', field.name);
+                  } else {
+                    handleTableChange('sortCol', field.name);
+                    handleTableChange(
+                      'sortDirection',
+                      tableVals.sortDirection === 'asc' ? 'desc' : 'asc'
+                    );
+                  }
+                }}
+                className={styles.HeaderColor}
+              >
+                {field.label}
+              </TableSortLabel>
+            ) : (
+              field.label
+            )}
+          </TableCell>
+        ))}
+      </TableRow>
+    );
+  }
+
   return headerRow;
 };
 
@@ -193,9 +221,17 @@
   loadingList = false,
   noItemsText,
   showPagination = true,
+  checkboxSupport,
 }: PagerProps) => {
   const rows = createRows(data, columnStyles, collapseRow, collapseOpen);
-  const tableHead = tableHeadColumns(columnNames, columnStyles, tableVals, handleTableChange);
+  const tableHead = tableHeadColumns(
+    columnNames,
+    columnStyles,
+    tableVals,
+    handleTableChange,
+    totalRows,
+    checkboxSupport
+  );
   const tablePagination = pagination(columnNames, totalRows, handleTableChange, tableVals);
 
   return (

src/components/UI/SearchDialogBox/SearchDialogBox.test.tsx

@@ -1,9 +1,8 @@
-import { render, fireEvent } from '@testing-library/react';
+import { render, fireEvent, screen, waitFor } from '@testing-library/react';
 import { MockedProvider } from '@apollo/client/testing';
 import { vi } from 'vitest';
 
 import { SearchDialogBox } from './SearchDialogBox';
-import * as AutoComplete from '../Form/AutoComplete/AutoComplete';
 
 const mockHandleOk = vi.fn();
 const mockHandleCancel = vi.fn();
@@ -15,6 +14,7 @@ const defaultProps: any = {
   onChange: mockHandleChange,
   options: [{ id: '1', label: 'something' }],
   selectedOptions: ['1'],
+  multiple: false,
 };
 
 const asyncSearchProps = {
@@ -37,9 +37,16 @@ test('it should render the title correctly', () => {
   expect(getByTestId('dialogTitle')).toHaveTextContent('Search Box');
 });
 
-test('it should contain the selected option', () => {
-  const { getByTestId } = render(searchDialog());
-  expect(getByTestId('searchChip').querySelector('span')).toHaveTextContent('something');
+test('it should contain the selected option', async () => {
+  const { getByRole } = render(searchDialog());
+  const [interactiveType] = screen.getAllByTestId('autocomplete-element');
+  interactiveType.focus();
+  fireEvent.keyDown(interactiveType, { key: 'ArrowDown' });
+  fireEvent.keyDown(interactiveType, { key: 'Enter' });
+
+  await waitFor(() => {
+    expect(getByRole('option')).toHaveTextContent('something');
+  });
 });
 
 test('save with normal props', () => {
@@ -54,26 +61,14 @@ test('save with async prop', () => {
   // need assertions here
 });
 
-test('change value in dialog box', () => {
-  const spy = vi.spyOn(AutoComplete, 'AutoComplete');
-  spy.mockImplementation((props: any) => {
-    const { form, onChange } = props;
+test('change value in dialog box', async () => {
+  render(searchDialog(defaultProps));
+  const [interactiveType] = screen.getAllByTestId('autocomplete-element');
+  interactiveType.focus();
+  fireEvent.keyDown(interactiveType, { key: 'ArrowDown' });
+  fireEvent.keyDown(interactiveType, { key: 'Enter' });
 
-    return (
-      <div data-testid="searchDialogBox">
-        <input
-          onChange={(value) => {
-            onChange(value);
-            form.setFieldValue(value);
-          }}
-        />
-      </div>
-    );
+  await waitFor(() => {
+    expect(screen.getByRole('option')).toHaveTextContent('something');
   });
-  const { getByTestId } = render(searchDialog(defaultProps));
-  fireEvent.change(getByTestId('searchDialogBox').querySelector('input') as Element, {
-    target: { value: 'change' },
-  });
-
-  // need assertions here
 });

src/components/UI/SearchDialogBox/SearchDialogBox.tsx

@@ -24,6 +24,9 @@ export interface SearchDialogBoxProps {
   buttonOk?: string;
   description?: string;
   colorOk?: string;
+  fullWidth?: boolean;
+  placeholder?: string;
+  showTags?: boolean;
 }
 
 export const SearchDialogBox = (props: SearchDialogBoxProps) => {
@@ -45,10 +48,18 @@ export const SearchDialogBox = (props: SearchDialogBoxProps) => {
     buttonOk = 'Save',
     description = '',
     colorOk,
+    fullWidth = false,
+    showTags = true,
+    placeholder,
   } = props;
 
   const [selectedOption, setSelectedOptions] = useState<any>(multiple ? [] : null);
   const [asyncSelectedOptions, setAsyncSelectedOptions] = useState<Array<any>>([]);
+  const [optionsData, setOptionsData] = useState<any>(options);
+
+  useEffect(() => {
+    setOptionsData(options);
+  }, [options]);
 
   useEffect(() => {
     if (!asyncSearch) {
@@ -68,6 +79,13 @@ export const SearchDialogBox = (props: SearchDialogBoxProps) => {
 
   const changeValue = (event: any, value: any) => {
     setSelectedOptions(value);
+    if (multiple) {
+      const selectedIds = value.map((option: any) => option.id);
+      setOptionsData([
+        ...value,
+        ...options.filter((option: any) => !selectedIds.includes(option.id)),
+      ]);
+    }
   };
 
   const selectedOptionsIds = multiple
@@ -86,14 +104,15 @@ export const SearchDialogBox = (props: SearchDialogBoxProps) => {
       titleAlign="left"
       colorOk={colorOk}
       buttonOk={buttonOk}
+      fullWidth={fullWidth}
     >
       <div>
         <FormControl fullWidth>
           <AutoComplete
             disableClearable={disableClearable}
             asyncSearch={asyncSearch}
             asyncValues={{ value: asyncSelectedOptions, setValue: setAsyncSelectedOptions }}
-            options={options}
+            options={optionsData}
             optionLabel={optionLabel || 'label'}
             additionalOptionLabel={additionalOptionLabel}
             field={{ value: selectedOption }}
@@ -111,6 +130,8 @@ export const SearchDialogBox = (props: SearchDialogBoxProps) => {
             renderTags={renderTags}
             selectedOptionsIds={selectedOptionsIds}
             multiple={multiple}
+            placeholder={placeholder}
+            showTags={showTags}
           />
         </FormControl>
         <div className={styles.Description} data-testid="description">