Clean up duplicate sort button; finish prototype

Shopify · Aug 30, 2024 · e9024a0 · e9024a0
1 parent e0eb7e5
commit e9024a0
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 96 deletions.
diff --git a/polaris-react/locales/en.json b/polaris-react/locales/en.json
@@ -182,7 +182,7 @@
       "searchFilterAccessibilityLabel": "Type a query to search the list, and keypress enter to add your query as a filter",
       "editSearchFilter": "Edit search filter",
       "SearchField": {
-        "defaultPlaceholder": "Matches text",
+        "defaultPlaceholder": "Search",
         "action": {
           "addAsFilter": "add as filter",
           "addToFilter": "add to filter",

diff --git a/polaris-react/playground/OrdersPage.tsx b/polaris-react/playground/OrdersPage.tsx
@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React, {useEffect, useRef, useState, useMemo} from 'react';
+import React, {useEffect, useRef, useState, useMemo, useCallback} from 'react';
 import {
   ChartVerticalIcon,
   AppsIcon,
@@ -676,23 +676,20 @@ function OrdersIndexTableWithFilters(
       remove: handleStatusRemove,
       label: 'Status',
       emptyValue: [],
-      locked: selectedView > 0 && selectedView < 5,
     },
     paymentStatus: {
       set: setPaymentStatus,
       change: handlePaymentStatusChange,
       remove: handlePaymentStatusRemove,
       label: 'Payment status',
       emptyValue: [],
-      locked: selectedView === 2,
     },
     fulfillmentStatus: {
       set: setFulfillmentStatus,
       change: handleFulfillmentStatusChange,
       remove: handleFulfillmentStatusRemove,
       label: 'Fulfillment status',
       emptyValue: [],
-      locked: selectedView === 1,
     },
   };
 
@@ -849,10 +846,9 @@ function OrdersIndexTableWithFilters(
     appliedFilters.push({
       key,
       value,
-      locked: handlers[key].locked,
       label: getHumanReadableValue(handlers[key].label, value),
       unsavedChanges: selectedView === 0 ? true : isUnsaved(value, savedValue),
-      onRemove: handlers[key].locked ? undefined : handlers[key].remove,
+      onRemove: handlers[key].remove,
     });
   });
 
@@ -876,12 +872,10 @@ function OrdersIndexTableWithFilters(
     }
   };
 
-  console.lof;
-
   const hasUnsavedChanges =
     (!savedViewFilters[selectedView] && appliedFilters.length > 0) ||
     (appliedFilters.length === 0 &&
-      savedViewFilters[selectedView].length > 0) ||
+      savedViewFilters[selectedView]?.length > 0) ||
     !appliedFilters.every(appliedFilterMatchesSavedFilter);
 
   // ---- View event handlers
@@ -891,22 +885,20 @@ function OrdersIndexTableWithFilters(
 
   const handleSelectView = async (view: number) => {
     setQueryValue('');
-    // if (view > 0 && savedViewFilters[view].length > 0) {
-    //   setMode(IndexFiltersMode.Filtering);
-    // } else {
-    setMode(IndexFiltersMode.Default);
-    // }
+
+    if (view > 0 && savedViewFilters[view].length > 0) {
+      setMode(IndexFiltersMode.Filtering);
+    } else {
+      setMode(IndexFiltersMode.Default);
+    }
+
     setSelectedView(view);
     setLoading(true);
     handleResetToSavedFilters(view);
     await sleep(250);
     setLoading(false);
   };
 
-  const handleEditView = (index: number) => () => {
-    setMode(IndexFiltersMode.Filtering);
-  };
-
   const handleDeleteView = (index: number) => async () => {
     const nextViewNames = [...viewNames];
     const nextSavedViewFilters = [...savedViewFilters];
@@ -949,26 +941,50 @@ function OrdersIndexTableWithFilters(
     return true;
   };
 
-  const handleSaveViewFilters = async (index: number) => {
-    const nextSavedFilters = [...savedViewFilters];
-    nextSavedFilters[index] = appliedFilters.map(({key, value, label}) => ({
-      key,
-      value,
-      label,
-      locked: false,
-    }));
-
-    setSavedViewFilters(nextSavedFilters);
-    await sleep(300);
-    return true;
-  };
+  const handleSaveViewFilters = useCallback(
+    async (index: number) => {
+      const nextSavedFilters = [...savedViewFilters];
+      nextSavedFilters[index] = appliedFilters.map(({key, value, label}) => ({
+        key,
+        value,
+        label,
+      }));
+
+      setSavedViewFilters(nextSavedFilters);
+      await sleep(300);
+      return true;
+    },
+    [appliedFilters, savedViewFilters],
+  );
 
   const handleCreateNewView = async (name: string) => {
-    const newViewIndex = viewNames.length;
     setViewNames((names) => [...names, name]);
-    handleSaveViewFilters(newViewIndex);
+    const newViewIndex = viewNames.length;
+    const shouldSaveAppliedFiltersAsNew =
+      selectedView === 0 &&
+      (queryValue ||
+        paymentStatus.length > 0 ||
+        fulfillmentStatus.length > 0 ||
+        status.length > 0);
+
+    const nextFilters = shouldSaveAppliedFiltersAsNew
+      ? {queryValue, status, paymentStatus, fulfillmentStatus}
+      : {
+          queryValue: '',
+          status: [],
+          paymentStatus: [],
+          fulfillmentStatus: [],
+        };
+
+    if (shouldSaveAppliedFiltersAsNew) {
+      handleSaveViewFilters(newViewIndex);
+    } else {
+      handleClearFilters();
+      setSavedViewFilters((filters) => [...filters, []]);
+    }
+
+    handleFilterOrders(nextFilters);
     await sleep(250);
-    setMode(IndexFiltersMode.Default);
     setSelectedView(newViewIndex);
     return true;
   };
@@ -997,10 +1013,8 @@ function OrdersIndexTableWithFilters(
   };
 
   useEffect(() => {
-    if (hasUnsavedChanges) {
-      if (selectedView > 0) {
-        handleSaveViewFilters(selectedView);
-      }
+    if (hasUnsavedChanges && selectedView > 0) {
+      handleSaveViewFilters(selectedView);
     }
   }, [
     hasUnsavedChanges,
@@ -1041,10 +1055,6 @@ function OrdersIndexTableWithFilters(
                 type: 'duplicate',
                 onPrimaryAction: handleDuplicateView(index),
               },
-              {
-                type: 'edit',
-                onAction: handleEditView(index),
-              },
               {
                 type: 'delete',
                 onPrimaryAction: handleDeleteView(index),
@@ -1054,22 +1064,26 @@ function OrdersIndexTableWithFilters(
     };
   });
 
-  // const primaryAction: IndexFiltersProps['primaryAction'] = {
-  //   type: selectedView > 4 ? 'save' : 'save-as',
-  //   onAction: handleSave,
-  //   disabled: !hasUnsavedChanges,
-  //   loading: false,
-  // };
-
-  // const cancelAction: IndexFiltersProps['cancelAction'] = {
-  //   onAction: handleCancel,
-  //   disabled: false,
-  //   loading: false,
-  // };
-
-  const queryPlaceholder = `Searching in ${viewNames[
-    selectedView
-  ].toLowerCase()}`;
+  const primaryAction: IndexFiltersProps['primaryAction'] =
+    selectedView === 0
+      ? {
+          type: selectedView > 4 ? 'save' : 'save-as',
+          onAction: handleSave,
+          disabled: !hasUnsavedChanges,
+          loading: false,
+        }
+      : undefined;
+
+  const cancelAction: IndexFiltersProps['cancelAction'] =
+    selectedView === 0
+      ? {
+          onAction: handleCancel,
+          disabled: false,
+          loading: false,
+        }
+      : undefined;
+
+  const queryPlaceholder = `Search ${viewNames[selectedView]?.toLowerCase()}`;
 
   return (
     <Card padding="0">
@@ -1085,8 +1099,8 @@ function OrdersIndexTableWithFilters(
         onQueryChange={handleQueryValueChange}
         onQueryClear={handleQueryValueRemove}
         onSort={setSortSelected}
-        // primaryAction={primaryAction}
-        // cancelAction={cancelAction}
+        primaryAction={primaryAction}
+        cancelAction={cancelAction}
         tabs={tabs}
         selected={selectedView}
         onSelect={handleSelectView}

diff --git a/polaris-react/src/components/Filters/components/FiltersBar/FiltersBar.tsx b/polaris-react/src/components/Filters/components/FiltersBar/FiltersBar.tsx
@@ -1,5 +1,5 @@
 import type {PropsWithChildren} from 'react';
-import React, {useState, useRef, useEffect, useMemo} from 'react';
+import React, {useState, useRef, useEffect} from 'react';
 import {PlusIcon} from '@shopify/polaris-icons';
 import type {TransitionStatus} from 'react-transition-group';
 

diff --git a/polaris-react/src/components/IndexFilters/IndexFilters.tsx b/polaris-react/src/components/IndexFilters/IndexFilters.tsx
@@ -162,9 +162,6 @@ export function IndexFilters({
   const [searchFilterValue, setSearchFilterValue] = useState(queryValue);
 
   useEffect(() => {
-    console.log(
-      `'${queryValue}', '${searchOnlyValue}', '${searchFilterValue}'`,
-    );
     if (queryValue === '') {
       setSearchOnlyValue('');
       setSearchFilterValue('');
@@ -618,7 +615,6 @@ export function IndexFilters({
                       >
                         {updateButtonsMarkup}
                       </div>
-                      {sortMarkup}
                     </InlineStack>
                   </div>
                 </Filters>

diff --git a/polaris-react/src/components/IndexFilters/components/SearchField/SearchField.tsx b/polaris-react/src/components/IndexFilters/components/SearchField/SearchField.tsx
@@ -1,15 +1,10 @@
 import React, {useId, useState} from 'react';
-import {SearchIcon, ReturnIcon} from '@shopify/polaris-icons';
+import {SearchIcon} from '@shopify/polaris-icons';
 
-import {Box} from '../../../Box';
 import {Icon} from '../../../Icon';
 import {TextField} from '../../../TextField';
 import {useBreakpoints} from '../../../../utilities/breakpoints';
 import {useI18n} from '../../../../utilities/i18n';
-import {InlineStack} from '../../../InlineStack';
-import {UnstyledButton} from '../../../UnstyledButton';
-
-import styles from './SearchField.module.css';
 
 export interface SearchFieldProps {
   focused?: boolean;
@@ -58,10 +53,6 @@ export function SearchField({
     if (event.key === 'Enter') onKeyDownEnter?.();
   }
 
-  function handleClick() {
-    onKeyDownEnter?.();
-  }
-
   function handleFocus() {
     onFocus?.();
     setFocused(true);
@@ -72,26 +63,6 @@ export function SearchField({
     setFocused(false);
   }
 
-  const addAsFilterText =
-    value && focused ? (
-      <UnstyledButton
-        onClick={handleClick}
-        className={styles.AddAsFilterAction}
-        accessibilityLabel={i18n.translate(
-          'Polaris.IndexFilters.SearchField.action.accessibilityLabel',
-        )}
-      >
-        <InlineStack gap="100" blockAlign="center" align="end">
-          {i18n.translate(
-            'Polaris.IndexFilters.SearchField.action.addAsFilter',
-          )}
-          <Box borderRadius="100" background="bg-surface-tertiary-hover">
-            <Icon source={ReturnIcon} tone="inherit" />
-          </Box>
-        </InlineStack>
-      </UnstyledButton>
-    ) : undefined;
-
   return (
     <div
       onKeyDown={handleKeyDown}