Bulk edit v1.3 [] (#10111)

* Bulk-Edit-App: Adding status filter + refactors + some fixes [INTEG-3116] (#10097)

* Adding status filter + refactors + some fixes

* removing unused status multiselect component

* removing unnecessary rename

* using Multiselect.Option

* refactor GenericMultiselect styles

* renaming generic multiselect test

* adding tests for status case in generic multiselect

* fix and comments refactors

* refactor disable CustomMultiselectAll styles and disabled

* removing unnecessary component + general refactors and renames

* removing custom component unnecessary prop

* include refactors

* rename in style file

* Bulk-Edit-App: search bar + reset button + pending refactors [MAPS-34] (#10109)

* adding search entries filter + tests + sticking filters

* adding reset filters logic + tests + warning fixes

* refactor dividing status label from color in entryUtils.ts

* adding new empty state differentiation

* fix bug on SearchFilter when changing page

* fix bug: disable CT list when entries loading

* disabling sort button

* renaming files

* Bulk-Edit-App: Fix v1.3 comments [MAPS-50] (#10123)

* renaming in style file

* adding filtering for pure numbers

* removing old-unused placeholders props

* improving filter multiselect performance

* fix in object-value comparison

* comments corrections

* moving validation

---------

Co-authored-by: Franco Banfi <[email protected]>

Author: JuliRossi

apps/bulk-edit/package-lock.json

@@ -15,7 +15,8 @@
     "contentful-management": "^11.52.0",
     "emotion": "10.0.27",
     "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "react-dom": "18.3.1",
+    "use-debounce": "^10.0.6"
   },
   "scripts": {
     "start": "vite",

apps/bulk-edit/package.json

@@ -8,12 +8,14 @@ interface ContentTypeSidebarProps {
   contentTypes: ContentTypeProps[];
   selectedContentTypeId: string | undefined;
   onContentTypeSelect: (id: string) => void;
+  disabled?: boolean;
 }
 
 export const ContentTypeSidebar: React.FC<ContentTypeSidebarProps> = ({
   contentTypes,
   selectedContentTypeId,
   onContentTypeSelect,
+  disabled = false,
 }) => {
   return (
     <Flex style={styles.sidebar} padding="spacingM" flexDirection="column" gap="spacingXs">
@@ -27,7 +29,8 @@ export const ContentTypeSidebar: React.FC<ContentTypeSidebarProps> = ({
               as="button"
               key={ct.sys.id}
               isActive={ct.sys.id === selectedContentTypeId}
-              onClick={() => onContentTypeSelect(ct.sys.id)}
+              onClick={disabled ? undefined : () => onContentTypeSelect(ct.sys.id)}
+              isDisabled={disabled}
               testId="content-type-nav-item">
               {ct.name}
             </NavList.Item>

apps/bulk-edit/src/locations/Page/components/ColumnMultiselect.tsx

@@ -0,0 +1,9 @@
+import tokens from '@contentful/f36-tokens';
+import { css } from 'emotion';
+
+export const emptyEntryBannerStyles = {
+  container: css({
+    background: tokens.gray100,
+    borderRadius: tokens.borderRadiusMedium,
+  }),
+};

apps/bulk-edit/src/locations/Page/components/ContentTypeSidebar.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Flex, Text } from '@contentful/f36-components';
+import { emptyEntryBannerStyles } from './EmptyEntryBanner.styles';
+
+interface EmptyStateProps {
+  hasEntries: boolean;
+  hasInitialEntries: boolean;
+}
+
+export const EmptyEntryBanner: React.FC<EmptyStateProps> = ({ hasEntries, hasInitialEntries }) => {
+  if (hasEntries) {
+    return null;
+  }
+
+  if (!hasInitialEntries) {
+    return (
+      <Flex
+        alignItems="center"
+        justifyContent="center"
+        flexDirection="column"
+        padding="spacing2Xl"
+        className={emptyEntryBannerStyles.container}>
+        <Text fontSize="fontSizeL" fontWeight="fontWeightDemiBold">
+          No entries found.
+        </Text>
+      </Flex>
+    );
+  }
+
+  return (
+    <Flex
+      alignItems="center"
+      justifyContent="center"
+      flexDirection="column"
+      padding="spacing2Xl"
+      className={emptyEntryBannerStyles.container}>
+      <Text fontSize="fontSizeL" fontWeight="fontWeightDemiBold">
+        We couldn't find any matches.
+      </Text>
+      <Text fontSize="fontSizeM">
+        Try adjusting your filters or resetting them to broaden your search.
+      </Text>
+    </Flex>
+  );
+};

apps/bulk-edit/src/locations/Page/components/EmptyEntryBanner.styles.ts

@@ -0,0 +1,6 @@
+import tokens from '@contentful/f36-tokens';
+import { css } from 'emotion';
+
+export const optionStyles = css({
+  fontSize: tokens.fontSizeS,
+});

apps/bulk-edit/src/locations/Page/components/EmptyEntryBanner.tsx

@@ -0,0 +1,94 @@
+import { Flex } from '@contentful/f36-components';
+import { Multiselect } from '@contentful/f36-multiselect';
+import { useMemo } from 'react';
+import { truncate } from '../utils/entryUtils';
+import { optionStyles } from './FilterMultiselect.styles';
+import { FilterOption } from '../types';
+
+interface FilterMultiselectProps {
+  id?: string;
+  options: FilterOption[];
+  selectedItems: FilterOption[];
+  setSelectedItems: (items: FilterOption[]) => void;
+  disabled?: boolean;
+  placeholderConfig: {
+    noneSelected: string;
+    allSelected: string;
+  };
+  style?: React.CSSProperties | undefined;
+}
+
+const FilterMultiselect = ({
+  id,
+  options,
+  selectedItems,
+  setSelectedItems,
+  disabled,
+  placeholderConfig,
+  style,
+}: FilterMultiselectProps) => {
+  const getPlaceholderText = () => {
+    if (selectedItems.length === 0) return placeholderConfig.noneSelected;
+    if (selectedItems.length === options.length) return placeholderConfig.allSelected;
+    if (selectedItems.length === 1) {
+      return selectedItems[0].label;
+    }
+    const firstLabel = selectedItems[0].label;
+    return `${firstLabel} and ${selectedItems.length - 1} more`;
+  };
+
+  const toggleAll = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const checked = e.target.checked;
+    if (checked) {
+      setSelectedItems(options);
+    } else {
+      setSelectedItems([]);
+    }
+  };
+
+  const selectedValuesSet = useMemo(
+    () => new Set(selectedItems.map((item) => item.value)),
+    [selectedItems]
+  );
+
+  const areAllSelected = useMemo(() => {
+    return options.every((option) => selectedValuesSet.has(option.value));
+  }, [selectedValuesSet, options]);
+
+  return (
+    <Flex gap="spacing2Xs" flexDirection="column" style={{ ...style }}>
+      <Multiselect
+        placeholder={getPlaceholderText()}
+        triggerButtonProps={{ size: 'small', isDisabled: disabled }}
+        popoverProps={{ isFullWidth: true }}>
+        <Multiselect.SelectAll
+          itemId={`selectAll-${id}`}
+          onSelectItem={toggleAll}
+          isDisabled={disabled}
+          isChecked={areAllSelected}
+        />
+        {options.map((option) => (
+          <Multiselect.Option
+            isDisabled={disabled}
+            className={optionStyles}
+            key={option.value}
+            label={truncate(option.label, 30)}
+            value={option.value}
+            itemId={`option-${id}-${option.value}`}
+            isChecked={selectedValuesSet.has(option.value)}
+            onSelectItem={(e) => {
+              const checked = e.target.checked;
+              if (checked) {
+                setSelectedItems([...selectedItems, option]);
+              } else {
+                setSelectedItems(selectedItems.filter((item) => item.value !== option.value));
+              }
+            }}
+          />
+        ))}
+      </Multiselect>
+    </Flex>
+  );
+};
+
+export default FilterMultiselect;

apps/bulk-edit/src/locations/Page/components/FilterMultiselect.styles.ts

@@ -0,0 +1,11 @@
+import { css } from 'emotion';
+import { SIDEBAR_WIDTH, STICKY_SPACER_SPACING } from '../utils/constants';
+
+export const styles = {
+  container: css({
+    position: 'sticky',
+    left: SIDEBAR_WIDTH + STICKY_SPACER_SPACING,
+    zIndex: 1,
+    width: 1400,
+  }),
+};

apps/bulk-edit/src/locations/Page/components/FilterMultiselect.tsx

@@ -0,0 +1,49 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Flex, Text, TextInput } from '@contentful/f36-components';
+import { SearchIcon } from '@contentful/f36-icons';
+import { useDebounce } from 'use-debounce';
+import { styles } from './SearchBar.styles';
+
+interface SearchBarProps {
+  searchQuery: string;
+  onSearchChange: (query: string) => void;
+  isDisabled?: boolean;
+  debounceDelay?: number;
+}
+
+export const SearchBar: React.FC<SearchBarProps> = ({
+  searchQuery,
+  onSearchChange,
+  isDisabled = false,
+  debounceDelay = 300,
+}) => {
+  const [inputValue, setInputValue] = useState(searchQuery);
+  const [debouncedValue] = useDebounce(inputValue, debounceDelay);
+  const prevDebouncedValueRef = useRef<string>(debouncedValue);
+
+  useEffect(() => {
+    setInputValue(searchQuery);
+  }, [searchQuery]);
+
+  useEffect(() => {
+    if (prevDebouncedValueRef.current !== debouncedValue) {
+      onSearchChange(debouncedValue);
+      prevDebouncedValueRef.current = debouncedValue;
+    }
+  }, [debouncedValue, onSearchChange]);
+
+  return (
+    <Flex flexDirection="column" gap="spacingM" className={styles.container}>
+      <Text fontSize="fontSizeM" fontWeight="fontWeightMedium">
+        Search entries
+      </Text>
+      <TextInput
+        placeholder="Search"
+        value={inputValue}
+        onChange={(e) => setInputValue(e.target.value)}
+        icon={<SearchIcon />}
+        isDisabled={isDisabled}
+      />
+    </Flex>
+  );
+};