From 1f89e2b7c39639ffa38fdae403d6508961df8e8a Mon Sep 17 00:00:00 2001 From: Carina Ursu Date: Tue, 16 Aug 2022 15:12:28 -0700 Subject: [PATCH] fix: fix searchbar X button (#564) chore: fix searchbar X button Signed-off-by: Carina Ursu Signed-off-by: Carina Ursu --- .../SearchableLaunchPlanNameList.tsx | 13 +++++++++---- .../__stories__/helpers/typeGenerators.ts | 5 +---- .../Literals/test/helpers/mock_simpleTypes.ts | 18 +++++++++--------- .../Workflow/SearchableWorkflowNameList.tsx | 12 ++++++++---- .../common/FilterableNamedEntityList.tsx | 10 +++++++--- .../flytegraph/ReactFlow/ReactFlowWrapper.tsx | 8 ++++---- 6 files changed, 38 insertions(+), 28 deletions(-) diff --git a/packages/zapp/console/src/components/LaunchPlan/SearchableLaunchPlanNameList.tsx b/packages/zapp/console/src/components/LaunchPlan/SearchableLaunchPlanNameList.tsx index e8b7137a5..b5e985e40 100644 --- a/packages/zapp/console/src/components/LaunchPlan/SearchableLaunchPlanNameList.tsx +++ b/packages/zapp/console/src/components/LaunchPlan/SearchableLaunchPlanNameList.tsx @@ -4,10 +4,11 @@ import { useNamedEntityListStyles } from 'components/common/SearchableNamedEntit import { useCommonStyles } from 'components/common/styles'; import { separatorColor, primaryTextColor, launchPlanLabelColor } from 'components/Theme/constants'; import * as React from 'react'; +import { useState, useEffect } from 'react'; import { Link } from 'react-router-dom'; import { Routes } from 'routes/routes'; import { debounce } from 'lodash'; -import { Typography, FormGroup } from '@material-ui/core'; +import { FormGroup } from '@material-ui/core'; import { ResourceType } from 'models/Common/types'; import { MuiLaunchPlanIcon } from '@flyteconsole/ui-atoms'; import { LaunchPlanListStructureItem } from './types'; @@ -120,18 +121,22 @@ export const SearchableLaunchPlanNameList: React.FC { const styles = useStyles(); - const [search, setSearch] = React.useState(''); + const [search, setSearch] = useState(''); const { results, setSearchString } = useSearchableListState({ items: launchPlans, propertyGetter: ({ id }) => id.name, }); + useEffect(() => { + const debouncedSearch = debounce(() => setSearchString(search), 1000); + debouncedSearch(); + }, [search]); + const onSearchChange = (event: React.ChangeEvent) => { const searchString = event.target.value; setSearch(searchString); - const debouncedSearch = debounce(() => setSearchString(searchString), 1000); - debouncedSearch(); }; + const onClear = () => setSearch(''); return ( diff --git a/packages/zapp/console/src/components/Literals/__stories__/helpers/typeGenerators.ts b/packages/zapp/console/src/components/Literals/__stories__/helpers/typeGenerators.ts index edf237870..4974f3ab1 100644 --- a/packages/zapp/console/src/components/Literals/__stories__/helpers/typeGenerators.ts +++ b/packages/zapp/console/src/components/Literals/__stories__/helpers/typeGenerators.ts @@ -1,8 +1,5 @@ import { Core } from 'flyteidl'; -import { - blobScalars, - schemaScalars, -} from '../scalarValues'; +import { blobScalars, schemaScalars } from '../scalarValues'; // SIMPLE type GeneratedSimpleType = { diff --git a/packages/zapp/console/src/components/Literals/test/helpers/mock_simpleTypes.ts b/packages/zapp/console/src/components/Literals/test/helpers/mock_simpleTypes.ts index 0bd9d543f..16e7e8f80 100644 --- a/packages/zapp/console/src/components/Literals/test/helpers/mock_simpleTypes.ts +++ b/packages/zapp/console/src/components/Literals/test/helpers/mock_simpleTypes.ts @@ -1,17 +1,17 @@ import { Core } from 'flyteidl'; export function extractSimpleTypes() { - const simpleTypes= Object.keys(Core.SimpleType).map((key) => ({ - [key]: { - type: 'simple', - simple: Core.SimpleType[key], - }, - })).reduce((acc, v) => ({...acc, ...v}), {}); + const simpleTypes = Object.keys(Core.SimpleType) + .map((key) => ({ + [key]: { + type: 'simple', + simple: Core.SimpleType[key], + }, + })) + .reduce((acc, v) => ({ ...acc, ...v }), {}); return simpleTypes; } const simple: Core.SimpleType[] = extractSimpleTypes() as any; -export { - simple -}; +export { simple }; diff --git a/packages/zapp/console/src/components/Workflow/SearchableWorkflowNameList.tsx b/packages/zapp/console/src/components/Workflow/SearchableWorkflowNameList.tsx index 5d4da6a19..2d4514a99 100644 --- a/packages/zapp/console/src/components/Workflow/SearchableWorkflowNameList.tsx +++ b/packages/zapp/console/src/components/Workflow/SearchableWorkflowNameList.tsx @@ -5,6 +5,7 @@ import { useNamedEntityListStyles } from 'components/common/SearchableNamedEntit import { useCommonStyles } from 'components/common/styles'; import { separatorColor, primaryTextColor, workflowLabelColor } from 'components/Theme/constants'; import * as React from 'react'; +import { useEffect, useState } from 'react'; import { Link } from 'react-router-dom'; import { Routes } from 'routes/routes'; import { Shimmer } from 'components/common/Shimmer'; @@ -23,7 +24,6 @@ import ArchiveOutlined from '@material-ui/icons/ArchiveOutlined'; import { useMutation } from 'react-query'; import { NamedEntityState } from 'models/enums'; import { updateWorkflowState } from 'models/Workflow/api'; -import { useState } from 'react'; import { useSnackbar } from 'notistack'; import { padExecutionPaths, padExecutions } from 'common/utils'; import { WorkflowListStructureItem } from './types'; @@ -322,18 +322,22 @@ export const SearchableWorkflowNameList: React.FC { const styles = useStyles(); - const [search, setSearch] = React.useState(''); + const [search, setSearch] = useState(''); const { results, setSearchString } = useSearchableListState({ items: workflows, propertyGetter: ({ id }) => id.name, }); + useEffect(() => { + const debouncedSearch = debounce(() => setSearchString(search), 1000); + debouncedSearch(); + }, [search]); + const onSearchChange = (event: React.ChangeEvent) => { const searchString = event.target.value; setSearch(searchString); - const debouncedSearch = debounce(() => setSearchString(searchString), 1000); - debouncedSearch(); }; + const onClear = () => setSearch(''); return ( diff --git a/packages/zapp/console/src/components/common/FilterableNamedEntityList.tsx b/packages/zapp/console/src/components/common/FilterableNamedEntityList.tsx index 74afadbb9..fe713433f 100644 --- a/packages/zapp/console/src/components/common/FilterableNamedEntityList.tsx +++ b/packages/zapp/console/src/components/common/FilterableNamedEntityList.tsx @@ -2,6 +2,7 @@ import { Checkbox, debounce, FormControlLabel, FormGroup } from '@material-ui/co import { makeStyles, Theme } from '@material-ui/core/styles'; import { NamedEntity } from 'models/Common/types'; import * as React from 'react'; +import { useEffect, useState } from 'react'; import { NoResults } from './NoResults'; import { SearchableInput, SearchResult } from './SearchableList'; import { useCommonStyles } from './styles'; @@ -60,18 +61,21 @@ export const FilterableNamedEntityList: React.FC archiveCheckboxLabel, }) => { const styles = useStyles(); - const [search, setSearch] = React.useState(''); + const [search, setSearch] = useState(''); const { results, setSearchString } = useSearchableListState({ items: names, propertyGetter: ({ id }) => id.name, }); + useEffect(() => { + const debouncedSearch = debounce(() => setSearchString(search), 1000); + debouncedSearch(); + }, [search]); + const onSearchChange = (event: React.ChangeEvent) => { const searchString = event.target.value; setSearch(searchString); - const debouncedSearch = debounce(() => setSearchString(searchString), 1000); - debouncedSearch(); }; const onClear = () => setSearch(''); diff --git a/packages/zapp/console/src/components/flytegraph/ReactFlow/ReactFlowWrapper.tsx b/packages/zapp/console/src/components/flytegraph/ReactFlow/ReactFlowWrapper.tsx index d7c8bd13a..b2a806eff 100644 --- a/packages/zapp/console/src/components/flytegraph/ReactFlow/ReactFlowWrapper.tsx +++ b/packages/zapp/console/src/components/flytegraph/ReactFlow/ReactFlowWrapper.tsx @@ -41,7 +41,7 @@ export const ReactFlowWrapper: React.FC = ({ edges: rfGraphJson.edges, version: version, reactFlowInstance: null, - needFitView: false + needFitView: false, }); useEffect(() => { @@ -49,7 +49,7 @@ export const ReactFlowWrapper: React.FC = ({ ...state, shouldUpdate: true, nodes: rfGraphJson.nodes, - edges: rfGraphJson.edges.map(edge => ({ ...edge, zIndex: 0 })), + edges: rfGraphJson.edges.map((edge) => ({ ...edge, zIndex: 0 })), })); }, [rfGraphJson]); @@ -96,8 +96,8 @@ export const ReactFlowWrapper: React.FC = ({ }; const onNodeClick = () => { - setState((state) => ({ ...state, needFitView: false })) - } + setState((state) => ({ ...state, needFitView: false })); + }; return (