From a72d05829371f6a375e165dd2d3739474587fa63 Mon Sep 17 00:00:00 2001 From: lyndsiWilliams Date: Thu, 12 Jan 2023 13:28:53 -0600 Subject: [PATCH] Fix useEffect warnings and autosetting db from local storage, add translations, change window.location.href redirect to use history.push() --- .../data/database/DatabaseModal/index.tsx | 6 +- .../dataset/AddDataset/DatasetPanel/index.tsx | 10 +- .../dataset/AddDataset/LeftPanel/index.tsx | 98 +++++++++++-------- .../CRUD/data/dataset/AddDataset/index.tsx | 25 +++-- .../CRUD/data/dataset/AddDataset/types.tsx | 8 +- .../src/views/CRUD/data/hooks.ts | 6 +- 6 files changed, 89 insertions(+), 64 deletions(-) diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx index 66d4a1ef13ddb..89c2f1b6154b6 100644 --- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx +++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx @@ -31,6 +31,7 @@ import React, { useReducer, Reducer, } from 'react'; +import { useHistory } from 'react-router-dom'; import { setItem, LocalStorageKeys } from 'src/utils/localStorageHelpers'; import { UploadChangeParam, UploadFile } from 'antd/lib/upload/interface'; import Tabs from 'src/components/Tabs'; @@ -462,6 +463,7 @@ const DatabaseModal: FunctionComponent = ({ t('database'), addDangerToast, ); + const history = useHistory(); const [tabKey, setTabKey] = useState(DEFAULT_TAB_KEY); const [availableDbs, getAvailableDbs] = useAvailableDatabases(); @@ -1231,7 +1233,7 @@ const DatabaseModal: FunctionComponent = ({ onClick={() => { setLoading(true); fetchAndSetDB(); - window.location.href = '/dataset/add/'; + history.push('/dataset/add/'); }} > {t('CREATE DATASET')} @@ -1242,7 +1244,7 @@ const DatabaseModal: FunctionComponent = ({ onClick={() => { setLoading(true); fetchAndSetDB(); - window.location.href = `/superset/sqllab/?db=true`; + history.push(`/superset/sqllab/?db=true`); }} > {t('QUERY DATA IN SQL LAB')} diff --git a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/DatasetPanel/index.tsx b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/DatasetPanel/index.tsx index 56939258e1b20..1095f044a0112 100644 --- a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/DatasetPanel/index.tsx +++ b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/DatasetPanel/index.tsx @@ -17,7 +17,7 @@ * under the License. */ import React, { useEffect, useState, useRef } from 'react'; -import { SupersetClient, logging } from '@superset-ui/core'; +import { SupersetClient, logging, t } from '@superset-ui/core'; import { DatasetObject } from 'src/views/CRUD/data/dataset/AddDataset/types'; import { addDangerToast } from 'src/components/MessageToasts/actions'; import DatasetPanel from './DatasetPanel'; @@ -96,10 +96,14 @@ const DatasetPanelWrapper = ({ setHasColumns?.(false); setHasError(true); addDangerToast( - `The API response from ${path} does not match the IDatabaseTable interface.`, + t( + 'The API response from %s does not match the IDatabaseTable interface.', + ), ); logging.error( - `The API response from ${path} does not match the IDatabaseTable interface.`, + t( + 'The API response from %s does not match the IDatabaseTable interface.', + ), ); } } catch (error) { diff --git a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/LeftPanel/index.tsx b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/LeftPanel/index.tsx index be9181c70ac5c..14dd7dca4b842 100644 --- a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/LeftPanel/index.tsx +++ b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/LeftPanel/index.tsx @@ -16,7 +16,13 @@ * specific language governing permissions and limitations * under the License. */ -import React, { useEffect, useState, SetStateAction, Dispatch } from 'react'; +import React, { + useEffect, + useState, + SetStateAction, + Dispatch, + useCallback, +} from 'react'; import { SupersetClient, t, @@ -41,13 +47,15 @@ import { } from 'src/components/EmptyState'; import { useToasts } from 'src/components/MessageToasts/withToasts'; import { LocalStorageKeys, getItem } from 'src/utils/localStorageHelpers'; -import { DatasetActionType } from '../types'; +import { + DatasetActionType, + DatasetObject, +} from 'src/views/CRUD/data/dataset/AddDataset/types'; interface LeftPanelProps { setDataset: Dispatch>; - schema?: string | null | undefined; - dbId?: number; - datasets?: (string | null | undefined)[] | undefined; + dataset?: Partial | null; + datasetNames?: (string | null | undefined)[] | undefined; } const SearchIcon = styled(Icons.Search)` @@ -146,9 +154,8 @@ const LeftPanelStyle = styled.div` export default function LeftPanel({ setDataset, - schema, - dbId, - datasets, + dataset, + datasetNames, }: LeftPanelProps) { const theme = useTheme(); @@ -161,11 +168,14 @@ export default function LeftPanel({ const { addDangerToast } = useToasts(); - const setDatabase = (db: Partial) => { - setDataset({ type: DatasetActionType.selectDatabase, payload: { db } }); - setSelectedTable(null); - setResetTables(true); - }; + const setDatabase = useCallback( + (db: Partial) => { + setDataset({ type: DatasetActionType.selectDatabase, payload: { db } }); + setSelectedTable(null); + setResetTables(true); + }, + [setDataset], + ); const setTable = (tableName: string, index: number) => { setSelectedTable(index); @@ -175,29 +185,32 @@ export default function LeftPanel({ }); }; - const getTablesList = (url: string) => { - SupersetClient.get({ url }) - .then(({ json }) => { - const options: TableOption[] = json.options.map((table: Table) => { - const option: TableOption = { - value: table.value, - label: , - text: table.label, - }; + const getTablesList = useCallback( + (url: string) => { + SupersetClient.get({ url }) + .then(({ json }) => { + const options: TableOption[] = json.options.map((table: Table) => { + const option: TableOption = { + value: table.value, + label: , + text: table.label, + }; - return option; - }); + return option; + }); - setTableOptions(options); - setLoadTables(false); - setResetTables(false); - setRefresh(false); - }) - .catch(error => { - addDangerToast('There was an error fetching tables'); - logging.error('There was an error fetching tables', error); - }); - }; + setTableOptions(options); + setLoadTables(false); + setResetTables(false); + setRefresh(false); + }) + .catch(error => { + addDangerToast(t('There was an error fetching tables')); + logging.error(t('There was an error fetching tables'), error); + }); + }, + [addDangerToast], + ); const setSchema = (schema: string) => { if (schema) { @@ -211,7 +224,9 @@ export default function LeftPanel({ setResetTables(true); }; - const encodedSchema = schema ? encodeURIComponent(schema) : undefined; + const encodedSchema = dataset?.schema + ? encodeURIComponent(dataset?.schema) + : undefined; useEffect(() => { const currentUserSelectedDb = getItem( @@ -221,16 +236,16 @@ export default function LeftPanel({ if (currentUserSelectedDb) { setDatabase(currentUserSelectedDb); } - }, []); + }, [setDatabase]); useEffect(() => { if (loadTables) { const endpoint = encodeURI( - `/superset/tables/${dbId}/${encodedSchema}/${refresh}/`, + `/superset/tables/${dataset?.db?.id}/${encodedSchema}/${refresh}/`, ); getTablesList(endpoint); } - }, [loadTables]); + }, [loadTables, dataset?.db?.id, encodedSchema, getTablesList, refresh]); useEffect(() => { if (resetTables) { @@ -274,6 +289,7 @@ export default function LeftPanel({ {SELECT_DATABASE_AND_SCHEMA_TEXT}

{loadTables && !refresh && Loader(TABLE_LOADING_TEXT)} - {schema && !loadTables && !tableOptions.length && !searchVal && ( + {dataset?.schema && !loadTables && !tableOptions.length && !searchVal && (
)} - {schema && (tableOptions.length > 0 || searchVal.length > 0) && ( + {dataset?.schema && (tableOptions.length > 0 || searchVal.length > 0) && ( <>

{SELECT_DATABASE_TABLE_TEXT}

@@ -335,7 +351,7 @@ export default function LeftPanel({ onClick={() => setTable(option.value, i)} > {option.label} - {datasets?.includes(option.value) && ( + {datasetNames?.includes(option.value) && ( { + const getDatasetsList = useCallback(async () => { await UseGetDatasetsList(queryParams) .then(json => { setDatasets(json?.result); }) .catch(error => { - addDangerToast('There was an error fetching dataset'); - logging.error('There was an error fetching dataset', error); + addDangerToast(t('There was an error fetching dataset')); + logging.error(t('There was an error fetching dataset'), error); }); - }; + }, [queryParams]); useEffect(() => { if (dataset?.schema) { getDatasetsList(); } - }, [dataset?.schema]); + }, [dataset?.schema, getDatasetsList]); const HeaderComponent = () => (
@@ -116,9 +122,8 @@ export default function AddDataset() { const LeftPanelComponent = () => ( ); diff --git a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/types.tsx b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/types.tsx index dbeef93ead7b0..9fc1bf3e705aa 100644 --- a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/types.tsx +++ b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/types.tsx @@ -16,6 +16,8 @@ * specific language governing permissions and limitations * under the License. */ +import { DatabaseObject } from 'src/components/DatabaseSelector'; + export enum DatasetActionType { selectDatabase, selectSchema, @@ -24,11 +26,7 @@ export enum DatasetActionType { } export interface DatasetObject { - db: { - id: number; - database_name?: string; - owners?: number[]; - }; + db: DatabaseObject; schema?: string | null; dataset_name: string; table_name?: string | null; diff --git a/superset-frontend/src/views/CRUD/data/hooks.ts b/superset-frontend/src/views/CRUD/data/hooks.ts index 82c63bb3200d0..e15e4be957164 100644 --- a/superset-frontend/src/views/CRUD/data/hooks.ts +++ b/superset-frontend/src/views/CRUD/data/hooks.ts @@ -17,7 +17,7 @@ * under the License. */ import { useState, useEffect } from 'react'; -import { SupersetClient, logging } from '@superset-ui/core'; +import { SupersetClient, logging, t } from '@superset-ui/core'; import { addDangerToast } from 'src/components/MessageToasts/actions'; type BaseQueryObject = { @@ -82,6 +82,6 @@ export const UseGetDatasetsList = (queryParams: string | undefined) => }) .then(({ json }) => json) .catch(error => { - addDangerToast('There was an error fetching dataset'); - logging.error('There was an error fetching dataset', error); + addDangerToast(t('There was an error fetching dataset')); + logging.error(t('There was an error fetching dataset'), error); });