codyml commented on code in PR #22043:
URL: https://github.com/apache/superset/pull/22043#discussion_r1063842495
##########
superset-frontend/src/views/CRUD/data/hooks.ts:
##########
@@ -75,11 +76,36 @@ export function useQueryPreviewState<D extends
BaseQueryObject = any>({
};
}
-export const UseGetDatasetsList = (queryParams: string | undefined) =>
- SupersetClient.get({
- endpoint: `/api/v1/dataset/?q=${queryParams}`,
- })
- .then(({ json }) => json)
- .catch(error =>
- logging.error('There was an error fetching dataset', error),
- );
+export const useGetDatasetsList = (queryParams: string | undefined) => {
+ const [datasets, setDatasets] = useState<DatasetObject[]>([]);
+
+ const getDatasetsList = () =>
+ SupersetClient.get({
+ endpoint: `/api/v1/dataset/?q=${queryParams}`,
+ })
+ .then(({ json }) => {
+ setDatasets(json?.result);
+ })
+ .catch(error =>
+ logging.error('There was an error fetching dataset', error),
+ );
Review Comment:
```suggestion
const getDatasetsList = useCallback(
() =>
SupersetClient.get({
endpoint: `/api/v1/dataset/?q=${queryParams}`,
})
.then(({ json }) => {
setDatasets(json?.result);
})
.catch(error =>
logging.error('There was an error fetching dataset', error),
),
[queryParams],
);
```
If you wrap this function definition in `useCallback` you can include it in
the dependency array in `index.tsx` above.
##########
superset-frontend/src/views/CRUD/data/dataset/AddDataset/index.tsx:
##########
@@ -76,8 +76,7 @@ export default function AddDataset() {
Reducer<Partial<DatasetObject> | null, DSReducerActionType>
>(datasetReducer, null);
const [hasColumns, setHasColumns] = useState(false);
- const [datasets, setDatasets] = useState<DatasetObject[]>([]);
- const datasetNames = datasets.map(dataset => dataset.table_name);
+ const [editPageIsVisible, setEditPageIsVisible] = useState(false);
const encodedSchema = dataset?.schema
Review Comment:
I think there's a bug in the filtering below (lines 84-91). It doesn't
filter by database, only schema, so if you have multiple databases with schemas
of the same name and columns of the same name it'll say columns already have
datasets when they don't if a different database has datasets based on those
schema/column combinations:
https://user-images.githubusercontent.com/13007381/211111177-9d9c0c2f-f7a9-469e-9072-9a8c99d76969.mov
So, I think we need to add a filter for database ID there?
##########
superset-frontend/src/views/CRUD/data/hooks.ts:
##########
@@ -75,11 +76,36 @@ export function useQueryPreviewState<D extends
BaseQueryObject = any>({
};
}
-export const UseGetDatasetsList = (queryParams: string | undefined) =>
- SupersetClient.get({
- endpoint: `/api/v1/dataset/?q=${queryParams}`,
- })
- .then(({ json }) => json)
- .catch(error =>
- logging.error('There was an error fetching dataset', error),
- );
+export const useGetDatasetsList = (queryParams: string | undefined) => {
+ const [datasets, setDatasets] = useState<DatasetObject[]>([]);
+
+ const getDatasetsList = () =>
+ SupersetClient.get({
+ endpoint: `/api/v1/dataset/?q=${queryParams}`,
+ })
+ .then(({ json }) => {
+ setDatasets(json?.result);
+ })
+ .catch(error =>
+ logging.error('There was an error fetching dataset', error),
+ );
+
+ const datasetNames = datasets?.map(dataset => dataset.table_name);
+
+ return { getDatasetsList, datasets, datasetNames };
+};
+
+export const useGetDatasetRelatedObjects = (id: string) => {
+ const [usageCount, setUsageCount] = useState(0);
+
+ const getDatasetRelatedObjects = () =>
+ SupersetClient.get({
+ endpoint: `/api/v1/dataset/${id}/related_objects`,
+ })
+ .then(({ json }) => {
+ setUsageCount(json?.charts.count);
+ })
+ .catch(error => logging.error(error));
Review Comment:
Not blocking, but do we know how we want errors to appear if these requests
fail? If they should be displayed to the user in toasts, we could include the
`useToasts` hook and call `addDangerToast` here and in `getDatasetsList` above.
##########
superset-frontend/src/views/CRUD/data/dataset/AddDataset/index.tsx:
##########
@@ -91,22 +90,22 @@ export default function AddDataset() {
})
: undefined;
- const getDatasetsList = async () => {
- await UseGetDatasetsList(queryParams)
- .then(json => {
- setDatasets(json?.result);
- })
- .catch(error =>
- logging.error('There was an error fetching dataset', error),
- );
- };
+ const { getDatasetsList, datasets, datasetNames } =
+ useGetDatasetsList(queryParams);
useEffect(() => {
if (dataset?.schema) {
getDatasetsList();
}
}, [dataset?.schema]);
+ const id = window.location.pathname.split('/')[2];
+ useEffect(() => {
+ if (!Number.isNaN(parseFloat(id))) {
Review Comment:
```suggestion
if (!Number.isNaN(parseInt(id, 10))) {
```
##########
superset-frontend/src/views/CRUD/data/dataset/AddDataset/EditDataset/EditDataset.test.tsx:
##########
@@ -0,0 +1,43 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import fetchMock from 'fetch-mock';
+import { render, screen } from 'spec/helpers/testing-library';
+import EditDataset from './index';
+
+const DATASET_ENDPOINT = 'glob:*api/v1/dataset/1/related_objects';
+
+const mockedProps = {
+ id: '1',
+};
+
+fetchMock.get(DATASET_ENDPOINT, { charts: { results: [], count: 2 } });
+
+test('should render edit dataset view with tabs', async () => {
+ fetchMock.calls(DATASET_ENDPOINT);
Review Comment:
Does this do anything? We could do this at the end of the test to check if
a request was made instead:
```ts
expect(fetchMock.called(DATASET_ENDPOINT)).toBeTruthy();
```
##########
superset-frontend/src/views/CRUD/data/dataset/AddDataset/index.tsx:
##########
@@ -91,22 +90,22 @@ export default function AddDataset() {
})
: undefined;
- const getDatasetsList = async () => {
- await UseGetDatasetsList(queryParams)
- .then(json => {
- setDatasets(json?.result);
- })
- .catch(error =>
- logging.error('There was an error fetching dataset', error),
- );
- };
+ const { getDatasetsList, datasets, datasetNames } =
+ useGetDatasetsList(queryParams);
useEffect(() => {
if (dataset?.schema) {
getDatasetsList();
}
}, [dataset?.schema]);
Review Comment:
```suggestion
}, [dataset?.schema, getDatasetsList]);
```
Somewhat related: I'm getting a missing dependency lint error here. I'm
guessing it was left out because it looks like if you add in the missing
`getDatasetsList` dependency then go to the new Add Dataset flow, as soon as
you select a database schema it calls `getDatasets` over and over, firing
endless API calls. I think this is happening because in the
`useGetDatasetsList` hook, `getDatasetsList` is defined as a new function every
time the hook runs, which endlessly triggers the effect. I think the correct
fix would be to put back the missing dependency here, then wrap the definition
of `getDatasetsList` in a `useCallback` call so it's not redefined unless its
dependencies change – see my suggested change in `hooks.ts`.
##########
superset-frontend/src/views/CRUD/data/dataset/AddDataset/index.tsx:
##########
@@ -91,22 +90,22 @@ export default function AddDataset() {
})
: undefined;
- const getDatasetsList = async () => {
- await UseGetDatasetsList(queryParams)
- .then(json => {
- setDatasets(json?.result);
- })
- .catch(error =>
- logging.error('There was an error fetching dataset', error),
- );
- };
+ const { getDatasetsList, datasets, datasetNames } =
+ useGetDatasetsList(queryParams);
useEffect(() => {
if (dataset?.schema) {
getDatasetsList();
}
}, [dataset?.schema]);
+ const id = window.location.pathname.split('/')[2];
Review Comment:
Because we've defined the path for this page as `/dataset/:datasetId` in
`routes.tsx`, React Router will parse out that param for us if we use
[`useParams`](https://v5.reactrouter.com/web/api/Hooks/useparams) hook:
```suggestion
const { datasetId: id } = useParams<{ datasetId: string }>();
```
##########
superset-frontend/src/views/CRUD/data/dataset/AddDataset/Footer/index.tsx:
##########
@@ -104,7 +104,13 @@ function Footer({
if (typeof response === 'number') {
logEvent(LOG_ACTIONS_DATASET_CREATION_SUCCESS, datasetObject);
// When a dataset is created the response we get is its ID number
- goToPreviousUrl();
+
+ // Go to usage page if in testing mode. Will be changed
+ // to go to usage page when completed.
+ if (window.location.search === '?testing') {
+ window.location.href = `/dataset/${response}?testing`;
+ }
+ goToUrl(`/dataset/${response}?testing`);
Review Comment:
I'm a little foggy on what's going on here and above in `goToUrl` with the
redirect URLs but as long as it works for testing and we update it to its final
form before making it publicly accessible it's fine with me 👍🏻
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
