fix(core): improve the UX for edit collection (#4827)

Co-authored-by: Peng Xiao <pengxiao@outlook.com>

packages/common/cmdk/src/index.tsx

@@ -4,7 +4,9 @@ import * as RadixDialog from '@radix-ui/react-dialog';
 import * as React from 'react';
 import { commandScore } from './command-score';
 
-type Children = { children?: React.ReactNode };
+type Children = {
+  children?: React.ReactNode;
+};
 type DivProps = React.HTMLAttributes<HTMLDivElement>;
 
 type LoadingProps = Children &
@@ -117,7 +119,11 @@ type Context = {
 type State = {
   search: string;
   value: string;
-  filtered: { count: number; items: Map<string, number>; groups: Set<string> };
+  filtered: {
+    count: number;
+    items: Map<string, number>;
+    groups: Set<string>;
+  };
 };
 type Store = {
   subscribe: (callback: () => void) => () => void;
@@ -827,6 +833,17 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         ref={forwardedRef}
         {...etc}
         cmdk-input=""
+        onKeyDown={e => {
+          if (
+            e.key === 'Escape' ||
+            e.key === 'k' ||
+            e.key.startsWith('Arrow') ||
+            e.key === 'Enter'
+          ) {
+            return;
+          }
+          e.stopPropagation();
+        }}
         autoComplete="off"
         autoCorrect="off"
         spellCheck={false}

packages/frontend/component/src/components/page-list/filter/multi-select.tsx

@@ -29,6 +29,7 @@ export const MultiSelect = ({
             const selected = value.includes(option.value);
             const click = (e: MouseEvent<HTMLDivElement>) => {
               e.stopPropagation();
+              e.preventDefault();
               if (selected) {
                 onChange(value.filter(v => v !== option.value));
               } else {

packages/frontend/component/src/components/page-list/view/affine-shape.tsx

@@ -2,132 +2,126 @@ import type React from 'react';
 
 export const AffineShapeIcon = (props: React.SVGProps<SVGSVGElement>) => (
   <svg
-    width="200"
-    height="174"
-    viewBox="0 0 200 174"
-    fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 800 695"
+    fill="none"
+    width={200}
     {...props}
   >
-    <rect width="200" height="173.475" fill="white" />
     <rect
-      x="51.7242"
+      x="206.896"
-      y="38.4618"
+      y="154.635"
-      width="96.5517"
+      width="386.207"
-      height="96.5517"
+      height="386.207"
-      stroke="#D2D2D2"
+      stroke="currentColor"
-      strokeWidth="0.530504"
+      strokeWidth="3"
     />
     <path
-      d="M51.8341 86.7377L100 38.5717L148.166 86.7377L100 134.904L51.8341 86.7377Z"
+      d="M207.336 347.738L400 155.074L592.664 347.738L400 540.402L207.336 347.738Z"
-      stroke="#D2D2D2"
+      stroke="currentColor"
-      strokeWidth="0.530504"
+      strokeWidth="3"
     />
     <path
-      d="M99.6055 38.1965C107.662 33.4757 117.043 30.7695 127.056 30.7695C157.087 30.7695 181.432 55.1147 181.432 85.1461C181.432 107.547 167.887 126.783 148.541 135.113"
+      d="M398.421 153.574C430.649 134.691 468.171 123.866 508.222 123.866C628.347 123.866 725.729 221.247 725.729 341.372C725.729 430.974 671.549 507.921 594.163 541.241"
-      stroke="#D2D2D2"
+      stroke="currentColor"
-      strokeWidth="0.530504"
+      strokeWidth="3"
     />
     <path
-      d="M148.375 86.4724C153.096 94.5294 155.802 103.91 155.802 113.923C155.802 143.954 131.457 168.299 101.426 168.299C79.0252 168.299 59.7883 154.754 51.4585 135.408"
+      d="M593.501 346.677C612.385 378.905 623.21 416.427 623.21 456.478C623.21 576.603 525.829 673.984 405.703 673.984C316.101 673.984 239.154 619.805 205.835 542.419"
-      stroke="#D2D2D2"
+      stroke="currentColor"
-      strokeWidth="0.530504"
+      strokeWidth="3"
     />
     <path
-      d="M100.395 135.113C92.3376 139.834 82.957 142.54 72.9444 142.54C42.913 142.54 18.5677 118.195 18.5677 88.1636C18.5677 65.7632 32.1126 46.5264 51.459 38.1965"
+      d="M401.578 541.24C369.35 560.123 331.828 570.948 291.777 570.948C171.651 570.948 74.2704 473.567 74.2704 353.441C74.2704 263.84 128.45 186.892 205.835 153.573"
-      stroke="#D2D2D2"
+      stroke="currentColor"
-      strokeWidth="0.530504"
+      strokeWidth="3"
     />
     <path
-      d="M51.4588 87.1319C46.7379 79.0749 44.0317 69.6944 44.0317 59.6818C44.0317 29.6504 68.377 5.3051 98.4084 5.30509C120.809 5.30509 140.046 18.85 148.375 38.1963"
+      d="M205.834 349.315C186.951 317.088 176.126 279.565 176.126 239.515C176.126 119.389 273.507 22.0086 393.633 22.0086C483.235 22.0085 560.182 76.188 593.501 153.573"
-      stroke="#D2D2D2"
+      stroke="currentColor"
-      strokeWidth="0.530504"
+      strokeWidth="3"
     />
     <path
-      d="M51.459 38.1965L148.541 135.279"
+      d="M205.835 153.574L594.164 541.903"
-      stroke="#D2D2D2"
+      stroke="currentColor"
-      strokeWidth="0.530504"
+      strokeWidth="3"
     />
     <path
-      d="M148.541 38.1965L51.459 135.279"
+      d="M594.164 153.574L205.835 541.903"
-      stroke="#D2D2D2"
+      stroke="currentColor"
-      strokeWidth="0.530504"
+      strokeWidth="3"
     />
+    <path d="M399.999 153.574V541.903" stroke="currentColor" strokeWidth="3" />
     <path
-      d="M99.9995 38.1965V135.279"
+      d="M594.164 347.738L205.835 347.738"
-      stroke="#D2D2D2"
+      stroke="currentColor"
-      strokeWidth="0.530504"
+      strokeWidth="3"
-    />
-    <path
-      d="M148.541 86.7376L51.4588 86.7376"
-      stroke="#D2D2D2"
-      strokeWidth="0.530504"
     />
     <ellipse
-      cx="148.276"
+      cx="593.102"
-      cy="38.4618"
+      cy="154.635"
-      rx="3.97878"
+      rx="15.9151"
-      ry="3.97878"
+      ry="15.9151"
-      fill="#5B5B5B"
+      fill="currentColor"
     />
     <ellipse
-      cx="148.276"
+      cx="593.102"
-      cy="135.014"
+      cy="540.842"
-      rx="3.97878"
+      rx="15.9151"
-      ry="3.97878"
+      ry="15.9151"
-      fill="#5B5B5B"
+      fill="currentColor"
     />
     <ellipse
-      cx="148.276"
+      cx="593.102"
-      cy="86.7377"
+      cy="347.738"
-      rx="3.97878"
+      rx="15.9151"
-      ry="3.97878"
+      ry="15.9151"
-      fill="#5B5B5B"
+      fill="currentColor"
     />
     <ellipse
-      cx="51.7239"
+      cx="206.896"
-      cy="38.4618"
+      cy="154.635"
-      rx="3.97878"
+      rx="15.9151"
-      ry="3.97878"
+      ry="15.9151"
-      fill="#5B5B5B"
+      fill="currentColor"
     />
     <ellipse
-      cx="51.7239"
+      cx="206.896"
-      cy="135.014"
+      cy="540.842"
-      rx="3.97878"
+      rx="15.9151"
-      ry="3.97878"
+      ry="15.9151"
-      fill="#5B5B5B"
+      fill="currentColor"
     />
     <ellipse
-      cx="51.7239"
+      cx="206.896"
-      cy="86.7377"
+      cy="347.738"
-      rx="3.97878"
+      rx="15.9151"
-      ry="3.97878"
+      ry="15.9151"
-      fill="#5B5B5B"
+      fill="currentColor"
     />
     <ellipse
-      cx="99.9998"
+      cx="400"
-      cy="38.4618"
+      cy="154.635"
-      rx="3.97878"
+      rx="15.9151"
-      ry="3.97878"
+      ry="15.9151"
-      transform="rotate(-90 99.9998 38.4618)"
+      transform="rotate(-90 400 154.635)"
-      fill="#5B5B5B"
+      fill="currentColor"
     />
     <ellipse
-      cx="99.9998"
+      cx="400"
-      cy="86.2071"
+      cy="345.616"
-      rx="3.97878"
+      rx="15.9151"
-      ry="3.97878"
+      ry="15.9151"
-      transform="rotate(-90 99.9998 86.2071)"
+      transform="rotate(-90 400 345.616)"
-      fill="#5B5B5B"
+      fill="currentColor"
     />
     <ellipse
-      cx="99.9998"
+      cx="400"
-      cy="135.014"
+      cy="540.842"
-      rx="3.97878"
+      rx="15.9151"
-      ry="3.97878"
+      ry="15.9151"
-      transform="rotate(-90 99.9998 135.014)"
+      transform="rotate(-90 400 540.842)"
-      fill="#5B5B5B"
+      fill="currentColor"
     />
   </svg>
 );

packages/frontend/component/src/components/page-list/view/create-collection.tsx

@@ -96,6 +96,9 @@ export const CreateCollection = ({
         <Input
           autoFocus
           value={value}
+          onKeyDown={e => {
+            e.stopPropagation();
+          }}
           data-testid="input-collection-title"
           placeholder={t['com.affine.editCollectionName.name.placeholder']()}
           onChange={useCallback((value: string) => onChange(value), [onChange])}

packages/frontend/component/src/components/page-list/view/edit-collection/edit-collection.tsx

@@ -22,6 +22,7 @@ export interface EditCollectionModalProps {
   onConfirm: (view: Collection) => Promise<void>;
   allPageListConfig: AllPageListConfig;
 }
+
 const contentOptions: DialogContentProps = {
   onPointerDownOutside: e => {
     e.preventDefault();
@@ -29,7 +30,7 @@ const contentOptions: DialogContentProps = {
   style: {
     padding: 0,
     maxWidth: 944,
-    backgroundColor: 'var(--affine-white)',
+    backgroundColor: 'var(--affine-background-primary-color)',
   },
 };
 export const EditCollectionModal = ({
@@ -167,7 +168,15 @@ export const EditCollection = ({
     [mode, t]
   );
   return (
-    <div className={styles.collectionEditContainer}>
+    <div
+      onKeyDown={e => {
+        if (e.key === 'Escape') {
+          return;
+        }
+        e.stopPropagation();
+      }}
+      className={styles.collectionEditContainer}
+    >
       {mode === 'page' ? (
         <PagesMode
           collection={value}

packages/frontend/component/src/components/page-list/view/edit-collection/rules-mode.tsx

@@ -75,7 +75,9 @@ export const RulesMode = ({
       }
     );
   }, [open, updateCollection, collection]);
-  const [expandInclude, setExpandInclude] = useState(true);
+  const [expandInclude, setExpandInclude] = useState(
+    collection.allowList.length > 0
+  );
   return (
     <>
       {/*prevents modal autofocus to the first input*/}

tests/kit/utils/filter.ts

@@ -23,6 +23,7 @@ export const createFirstFilter = async (page: Page, name: string) => {
   await page
     .locator('[data-testid="variable-select-item"]', { hasText: name })
     .click();
+  await page.keyboard.press('Escape');
 };
 
 export const checkFilterName = async (page: Page, name: string) => {
@@ -212,4 +213,5 @@ export const changeFilter = async (page: Page, to: string) => {
 export async function selectTag(page: Page, name: string | RegExp) {
   await page.getByTestId('filter-arg').click();
   await page.getByTestId(`multi-select-${name}`).click();
+  await page.keyboard.press('Escape', { delay: 100 });
 }