fix(dep-graph): filter by text correctly during quick inputs (nrwl#10986

)
domiSchenk · Jul 6, 2022 · fb4e92a · fb4e92a
1 parent 01e25ec
commit fb4e92a
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 38 deletions.
diff --git a/dep-graph/client-e2e/src/integration/app.spec.ts b/dep-graph/client-e2e/src/integration/app.spec.ts
@@ -30,6 +30,13 @@ describe('dep-graph-client', () => {
     cy.wait('@getGraph');
   });
 
+  afterEach(() => {
+    // clean up by hiding all projects and clearing text input
+    getDeselectAllButton().click();
+    getTextFilterInput().clear();
+    getCheckedProjectItems().should('have.length', 0);
+  });
+
   describe('select projects message', () => {
     it('should display on load', () => {
       getSelectProjectsMessage().should('be.visible');
@@ -53,13 +60,26 @@ describe('dep-graph-client', () => {
       getTextFilterReset().should('exist');
     });
 
+    it('should clear selection on reset', () => {
+      getTextFilterInput().type('cart');
+      getCheckedProjectItems().should(
+        'have.length',
+        nxExamplesJson.projects.filter((project) =>
+          project.name.includes('cart')
+        ).length
+      );
+      getTextFilterReset().click();
+      getCheckedProjectItems().should('have.length', 0);
+    });
+
     it('should hide clear button after clicking', () => {
       getTextFilterInput().type('cart');
       getTextFilterReset().click().should('not.exist');
     });
 
-    it('should filter projects', () => {
-      getTextFilterInput().type('cart');
+    it('should filter projects by text when pressing enter', () => {
+      getTextFilterInput().type('cart{enter}');
+
       getCheckedProjectItems().should(
         'have.length',
         nxExamplesJson.projects.filter((project) =>
@@ -68,16 +88,26 @@ describe('dep-graph-client', () => {
       );
     });
 
-    it('should clear selection on reset', () => {
+    it('should filter projects by text after debounce', () => {
       getTextFilterInput().type('cart');
       getCheckedProjectItems().should(
         'have.length',
         nxExamplesJson.projects.filter((project) =>
           project.name.includes('cart')
         ).length
       );
-      getTextFilterReset().click();
-      getCheckedProjectItems().should('have.length', 0);
+    });
+
+    it('should include projects in path when option is checked', () => {
+      getTextFilterInput().type('cart');
+      getIncludeProjectsInPathButton().click();
+
+      getCheckedProjectItems().should(
+        'have.length.gt',
+        nxExamplesJson.projects.filter((project) =>
+          project.name.includes('cart')
+        ).length
+      );
     });
   });
 
@@ -142,6 +172,10 @@ describe('dep-graph-client', () => {
     });
 
     it('should deselect a project by clicking on the project name again', () => {
+      cy.get('[data-project="cart"]').click({
+        force: true,
+      });
+
       cy.get('[data-project="cart"][data-active="true"]')
         .should('exist')
         .click({
@@ -195,31 +229,6 @@ describe('dep-graph-client', () => {
     });
   });
 
-  describe('text filtering', () => {
-    it('should filter projects by text when pressing enter', () => {
-      getTextFilterInput().type('cart{enter}');
-
-      getCheckedProjectItems().should(
-        'have.length',
-        nxExamplesJson.projects.filter((project) =>
-          project.name.includes('cart')
-        ).length
-      );
-    });
-
-    it('should include projects in path when option is checked', () => {
-      getTextFilterInput().type('cart');
-      getIncludeProjectsInPathButton().click();
-
-      getCheckedProjectItems().should(
-        'have.length.gt',
-        nxExamplesJson.projects.filter((project) =>
-          project.name.includes('cart')
-        ).length
-      );
-    });
-  });
-
   describe('image download button', () => {
     it('should be hidden initally', () => {
       getImageDownloadButton().should('have.class', 'opacity-0');

diff --git a/dep-graph/client/src/app/hooks/use-debounce.ts b/dep-graph/client/src/app/hooks/use-debounce.ts
@@ -1,6 +1,10 @@
 import { useEffect, useState } from 'react';
+import type { Dispatch, SetStateAction } from 'react';
 
-export function useDebounce(value: string, delay: number) {
+export function useDebounce(
+  value: string,
+  delay: number
+): [string, Dispatch<SetStateAction<string>>] {
   // State and setters for debounced value
   const [debouncedValue, setDebouncedValue] = useState(value);
   useEffect(
@@ -18,5 +22,5 @@ export function useDebounce(value: string, delay: number) {
     },
     [value, delay] // Only re-call effect if value or delay changes
   );
-  return debouncedValue;
+  return [debouncedValue, setDebouncedValue];
 }
diff --git a/dep-graph/client/src/app/sidebar/text-filter-panel.tsx b/dep-graph/client/src/app/sidebar/text-filter-panel.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import type { KeyboardEvent } from 'react';
 import { useDebounce } from '../hooks/use-debounce';
 
 export interface TextFilterPanelProps {
@@ -18,9 +19,12 @@ export function TextFilterPanel({
 }: TextFilterPanelProps) {
   const [currentTextFilter, setCurrentTextFilter] = useState('');
 
-  const debouncedTextFilter = useDebounce(currentTextFilter, 500);
+  const [debouncedValue, setDebouncedValue] = useDebounce(
+    currentTextFilter,
+    500
+  );
 
-  function onTextFilterKeyUp(event: React.KeyboardEvent<HTMLInputElement>) {
+  function onTextFilterKeyUp(event: KeyboardEvent<HTMLInputElement>) {
     if (event.key === 'Enter') {
       updateTextFilter(event.currentTarget.value);
     }
@@ -29,6 +33,8 @@ export function TextFilterPanel({
   function onTextInputChange(change: string) {
     if (change === '') {
       setCurrentTextFilter('');
+      setDebouncedValue('');
+
       resetTextFilter();
     } else {
       setCurrentTextFilter(change);
@@ -37,14 +43,14 @@ export function TextFilterPanel({
 
   function resetClicked() {
     setCurrentTextFilter('');
+    setDebouncedValue('');
+
     resetTextFilter();
   }
 
   useEffect(() => {
-    if (debouncedTextFilter !== '') {
-      updateTextFilter(debouncedTextFilter);
-    }
-  }, [debouncedTextFilter, updateTextFilter]);
+    updateTextFilter(debouncedValue);
+  }, [debouncedValue, updateTextFilter]);
 
   return (
     <div>