You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@superset.apache.org by GitBox <gi...@apache.org> on 2023/01/10 23:12:52 UTC

[GitHub] [superset] codyml opened a new pull request, #22670: feat(datasets): Populate Usage tab in Edit Dataset view

codyml opened a new pull request, #22670:
URL: https://github.com/apache/superset/pull/22670

   <!---
   Please write the PR title following the conventions at https://www.conventionalcommits.org/en/v1.0.0/
   Example:
   fix(dashboard): load charts correctly
   -->
   
   ### SUMMARY
   <!--- Describe the change below, including rationale and design decisions -->
   
   ### BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
   <!--- Skip this if not applicable -->
   
   ### TESTING INSTRUCTIONS
   <!--- Required! What steps can be taken to manually verify the changes? -->
   
   ### ADDITIONAL INFORMATION
   <!--- Check any relevant boxes with "x" -->
   <!--- HINT: Include "Fixes #nnn" if you are fixing an existing issue -->
   - [ ] Has associated issue:
   - [ ] Required feature flags:
   - [ ] Changes UI
   - [ ] Includes DB Migration (follow approval process in [SIP-59](https://github.com/apache/superset/issues/13351))
     - [ ] Migration is atomic, supports rollback & is backwards-compatible
     - [ ] Confirm DB migration upgrade and downgrade tested
     - [ ] Runtime estimates and downtime expectations provided
   - [ ] Introduces new feature or API
   - [ ] Removes existing feature or API
   


-- 
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: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org


[GitHub] [superset] codyml commented on a diff in pull request #22670: feat(datasets): Populate Usage tab in Edit Dataset view

Posted by "codyml (via GitHub)" <gi...@apache.org>.
codyml commented on code in PR #22670:
URL: https://github.com/apache/superset/pull/22670#discussion_r1098033176


##########
superset-frontend/src/views/CRUD/data/dataset/AddDataset/EditDataset/UsageTab/UsageTab.test.tsx:
##########
@@ -0,0 +1,405 @@
+/**
+ * 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 userEvent from '@testing-library/user-event';
+import { render, screen, waitFor } from 'spec/helpers/testing-library';
+import { ChartListChart, getMockChart } from 'spec/fixtures/mockCharts';
+import ToastContainer from 'src/components/MessageToasts/ToastContainer';
+import DatasetUsage from '.';
+
+const DEFAULT_DATASET_ID = '1';
+const DEFAULT_ORDER_COLUMN = 'last_saved_at';
+const DEFAULT_ORDER_DIRECTION = 'desc';
+const DEFAULT_PAGE = 0;
+const DEFAULT_PAGE_SIZE = 25;
+
+const getChartResponse = (result: ChartListChart[]) => ({
+  count: result.length,
+  result,
+});
+
+const CHARTS_ENDPOINT = 'glob:*/api/v1/chart/?*';
+const mockChartsFetch = (response: any) => {
+  fetchMock.reset();
+  fetchMock.get('glob:*/api/v1/chart/_info?*', {
+    permissions: ['can_export', 'can_read', 'can_write'],
+  });
+
+  fetchMock.get(CHARTS_ENDPOINT, response);
+};
+
+const renderDatasetUsage = () =>
+  render(
+    <>
+      <DatasetUsage datasetId={DEFAULT_DATASET_ID} />
+      <ToastContainer />
+    </>,
+    { useRedux: true, useRouter: true },
+  );
+
+const expectLastChartRequest = (params?: {
+  datasetId?: string;
+  orderColumn?: string;
+  orderDirection?: 'desc' | 'asc';
+  page?: number;
+  pageSize?: number;
+}) => {
+  const { datasetId, orderColumn, orderDirection, page, pageSize } = {
+    datasetId: DEFAULT_DATASET_ID,
+    orderColumn: DEFAULT_ORDER_COLUMN,
+    orderDirection: DEFAULT_ORDER_DIRECTION,
+    page: DEFAULT_PAGE,
+    pageSize: DEFAULT_PAGE_SIZE,
+    ...(params || {}),
+  };
+
+  const calls = fetchMock.calls(CHARTS_ENDPOINT);
+  expect(calls.length).toBeGreaterThan(0);
+  const lastChartRequestUrl = calls[calls.length - 1][0];
+  expect(lastChartRequestUrl).toMatch(
+    new RegExp(`col:datasource_id,opr:eq,value:%27${datasetId}%27`),
+  );
+
+  expect(lastChartRequestUrl).toMatch(
+    new RegExp(`order_column:${orderColumn}`),
+  );
+
+  expect(lastChartRequestUrl).toMatch(
+    new RegExp(`order_direction:${orderDirection}`),
+  );
+
+  expect(lastChartRequestUrl).toMatch(new RegExp(`page:${page}`));
+  expect(lastChartRequestUrl).toMatch(new RegExp(`page_size:${pageSize}`));
+};
+
+test('shows loading state', () => {
+  mockChartsFetch(
+    new Promise(resolve =>
+      setTimeout(() => resolve(getChartResponse([])), 250),
+    ),
+  );
+
+  renderDatasetUsage();
+
+  const loadingIndicator = screen.getByRole('status', {

Review Comment:
   Good catch, thanks!



-- 
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: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org


[GitHub] [superset] eschutho commented on a diff in pull request #22670: feat(datasets): Populate Usage tab in Edit Dataset view

Posted by "eschutho (via GitHub)" <gi...@apache.org>.
eschutho commented on code in PR #22670:
URL: https://github.com/apache/superset/pull/22670#discussion_r1098026748


##########
superset-frontend/src/components/TruncatedList/index.tsx:
##########
@@ -0,0 +1,160 @@
+/**
+ * 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, { ReactNode, useMemo, useRef } from 'react';
+import { styled, t } from '@superset-ui/core';
+import { useTruncation } from 'src/hooks/useTruncation';
+import { Tooltip } from '../Tooltip';
+
+export type TruncatedListProps<ListItemType> = {
+  /**
+   * Array of input items of type `ListItemType`.
+   */
+  items: ListItemType[];
+
+  /**
+   * Renderer for items not overflowed into the tooltip.
+   * Required if `ListItemType` is not renderable by React.
+   */
+  renderVisibleItem?: (item: ListItemType) => ReactNode;
+
+  /**
+   * Renderer for items that are overflowed into the tooltip.
+   * Required if `ListItemType` is not renderable by React.
+   */
+  renderTooltipItem?: (item: ListItemType) => ReactNode;
+
+  /**
+   * Returns the React key for an item.
+   */
+  getKey?: (item: ListItemType) => React.Key;
+
+  /**
+   * The max number of links that should appear in the tooltip.
+   */
+  maxLinks?: number;
+};
+
+const StyledTruncatedList = styled.div`
+  & > span {
+    width: 100%;
+    display: flex;
+
+    .ant-tooltip-open {
+      display: inline;
+    }
+  }
+`;
+
+const StyledVisibleItems = styled.span`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-block;
+  width: 100%;
+  vertical-align: bottom;
+`;
+
+const StyledVisibleItem = styled.span`
+  &:not(:last-child)::after {
+    content: ', ';
+  }
+`;
+
+const StyledTooltipItem = styled.div`
+  .link {
+    color: ${({ theme }) => theme.colors.grayscale.light5};
+    display: block;
+    text-decoration: underline;
+  }
+`;
+
+const StyledPlus = styled.span`
+  ${({ theme }) => `
+  cursor: pointer;
+  color: ${theme.colors.primary.dark1};
+  font-weight: ${theme.typography.weights.normal};
+  `}
+`;
+
+export default function TruncatedList<ListItemType>({
+  items,
+  renderVisibleItem = item => item,
+  renderTooltipItem = item => item,
+  getKey = item => item as unknown as React.Key,
+  maxLinks = 20,
+}: TruncatedListProps<ListItemType>) {
+  const itemsNotInTooltipRef = useRef<HTMLDivElement>(null);
+  const plusRef = useRef<HTMLDivElement>(null);
+  const [elementsTruncated, hasHiddenElements] = useTruncation(
+    itemsNotInTooltipRef,
+    plusRef,
+  ) as [number, boolean];
+
+  const nMoreItems = useMemo(
+    () => (items.length > maxLinks ? items.length - maxLinks : undefined),
+    [items, maxLinks],
+  );
+
+  const itemsNotInTooltip = useMemo(
+    () => (
+      <StyledVisibleItems ref={itemsNotInTooltipRef} data-test="crosslinks">
+        {items.map(item => (
+          <StyledVisibleItem key={getKey(item)}>

Review Comment:
   Typically you don't want to use an item's index for the key since the order can change: https://reactjs.org/docs/lists-and-keys.html#keys



-- 
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: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org


[GitHub] [superset] codyml commented on a diff in pull request #22670: feat(datasets): Populate Usage tab in Edit Dataset view

Posted by "codyml (via GitHub)" <gi...@apache.org>.
codyml commented on code in PR #22670:
URL: https://github.com/apache/superset/pull/22670#discussion_r1098033787


##########
superset-frontend/src/views/CRUD/data/dataset/AddDataset/EditDataset/UsageTab/UsageTab.test.tsx:
##########
@@ -0,0 +1,405 @@
+/**
+ * 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 userEvent from '@testing-library/user-event';
+import { render, screen, waitFor } from 'spec/helpers/testing-library';
+import { ChartListChart, getMockChart } from 'spec/fixtures/mockCharts';
+import ToastContainer from 'src/components/MessageToasts/ToastContainer';
+import DatasetUsage from '.';
+
+const DEFAULT_DATASET_ID = '1';
+const DEFAULT_ORDER_COLUMN = 'last_saved_at';
+const DEFAULT_ORDER_DIRECTION = 'desc';
+const DEFAULT_PAGE = 0;
+const DEFAULT_PAGE_SIZE = 25;
+
+const getChartResponse = (result: ChartListChart[]) => ({
+  count: result.length,
+  result,
+});
+
+const CHARTS_ENDPOINT = 'glob:*/api/v1/chart/?*';
+const mockChartsFetch = (response: any) => {

Review Comment:
   Thanks for catching!  Looks like I can also use `fetchMock.MockResponse` – do you think that's a better options?



-- 
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: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org


[GitHub] [superset] lyndsiWilliams commented on a diff in pull request #22670: feat(datasets): Populate Usage tab in Edit Dataset view

Posted by "lyndsiWilliams (via GitHub)" <gi...@apache.org>.
lyndsiWilliams commented on code in PR #22670:
URL: https://github.com/apache/superset/pull/22670#discussion_r1097888077


##########
superset-frontend/src/components/TruncatedList/index.tsx:
##########
@@ -0,0 +1,160 @@
+/**
+ * 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, { ReactNode, useMemo, useRef } from 'react';
+import { styled, t } from '@superset-ui/core';
+import { useTruncation } from 'src/hooks/useTruncation';
+import { Tooltip } from '../Tooltip';
+
+export type TruncatedListProps<ListItemType> = {
+  /**
+   * Array of input items of type `ListItemType`.
+   */
+  items: ListItemType[];
+
+  /**
+   * Renderer for items not overflowed into the tooltip.
+   * Required if `ListItemType` is not renderable by React.
+   */
+  renderVisibleItem?: (item: ListItemType) => ReactNode;
+
+  /**
+   * Renderer for items that are overflowed into the tooltip.
+   * Required if `ListItemType` is not renderable by React.
+   */
+  renderTooltipItem?: (item: ListItemType) => ReactNode;
+
+  /**
+   * Returns the React key for an item.
+   */
+  getKey?: (item: ListItemType) => React.Key;
+
+  /**
+   * The max number of links that should appear in the tooltip.
+   */
+  maxLinks?: number;
+};
+
+const StyledTruncatedList = styled.div`
+  & > span {
+    width: 100%;
+    display: flex;
+
+    .ant-tooltip-open {
+      display: inline;
+    }
+  }
+`;
+
+const StyledVisibleItems = styled.span`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-block;
+  width: 100%;
+  vertical-align: bottom;
+`;
+
+const StyledVisibleItem = styled.span`
+  &:not(:last-child)::after {
+    content: ', ';
+  }
+`;
+
+const StyledTooltipItem = styled.div`
+  .link {
+    color: ${({ theme }) => theme.colors.grayscale.light5};
+    display: block;
+    text-decoration: underline;
+  }
+`;
+
+const StyledPlus = styled.span`
+  ${({ theme }) => `
+  cursor: pointer;
+  color: ${theme.colors.primary.dark1};
+  font-weight: ${theme.typography.weights.normal};
+  `}
+`;
+
+export default function TruncatedList<ListItemType>({
+  items,
+  renderVisibleItem = item => item,
+  renderTooltipItem = item => item,
+  getKey = item => item as unknown as React.Key,
+  maxLinks = 20,
+}: TruncatedListProps<ListItemType>) {
+  const itemsNotInTooltipRef = useRef<HTMLDivElement>(null);
+  const plusRef = useRef<HTMLDivElement>(null);
+  const [elementsTruncated, hasHiddenElements] = useTruncation(
+    itemsNotInTooltipRef,
+    plusRef,
+  ) as [number, boolean];
+
+  const nMoreItems = useMemo(
+    () => (items.length > maxLinks ? items.length - maxLinks : undefined),
+    [items, maxLinks],
+  );
+
+  const itemsNotInTooltip = useMemo(
+    () => (
+      <StyledVisibleItems ref={itemsNotInTooltipRef} data-test="crosslinks">
+        {items.map(item => (
+          <StyledVisibleItem key={getKey(item)}>

Review Comment:
   ```suggestion
           {items.map((item, index) => (
             <StyledVisibleItem key={index}>
   ```
   Does `getKey` need to be passed in this way, or could the index from `.map` be used as the key here? I see `getKey` used in `itemsInTooltip` as well, but I think `.map`'s index could also be used for the key there.



##########
superset-frontend/src/views/CRUD/data/dataset/AddDataset/EditDataset/UsageTab/UsageTab.test.tsx:
##########
@@ -0,0 +1,405 @@
+/**
+ * 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 userEvent from '@testing-library/user-event';
+import { render, screen, waitFor } from 'spec/helpers/testing-library';
+import { ChartListChart, getMockChart } from 'spec/fixtures/mockCharts';
+import ToastContainer from 'src/components/MessageToasts/ToastContainer';
+import DatasetUsage from '.';
+
+const DEFAULT_DATASET_ID = '1';
+const DEFAULT_ORDER_COLUMN = 'last_saved_at';
+const DEFAULT_ORDER_DIRECTION = 'desc';
+const DEFAULT_PAGE = 0;
+const DEFAULT_PAGE_SIZE = 25;
+
+const getChartResponse = (result: ChartListChart[]) => ({
+  count: result.length,
+  result,
+});
+
+const CHARTS_ENDPOINT = 'glob:*/api/v1/chart/?*';
+const mockChartsFetch = (response: any) => {
+  fetchMock.reset();
+  fetchMock.get('glob:*/api/v1/chart/_info?*', {
+    permissions: ['can_export', 'can_read', 'can_write'],
+  });
+
+  fetchMock.get(CHARTS_ENDPOINT, response);
+};
+
+const renderDatasetUsage = () =>
+  render(
+    <>
+      <DatasetUsage datasetId={DEFAULT_DATASET_ID} />
+      <ToastContainer />
+    </>,
+    { useRedux: true, useRouter: true },
+  );
+
+const expectLastChartRequest = (params?: {
+  datasetId?: string;
+  orderColumn?: string;
+  orderDirection?: 'desc' | 'asc';
+  page?: number;
+  pageSize?: number;
+}) => {
+  const { datasetId, orderColumn, orderDirection, page, pageSize } = {
+    datasetId: DEFAULT_DATASET_ID,
+    orderColumn: DEFAULT_ORDER_COLUMN,
+    orderDirection: DEFAULT_ORDER_DIRECTION,
+    page: DEFAULT_PAGE,
+    pageSize: DEFAULT_PAGE_SIZE,
+    ...(params || {}),
+  };
+
+  const calls = fetchMock.calls(CHARTS_ENDPOINT);
+  expect(calls.length).toBeGreaterThan(0);
+  const lastChartRequestUrl = calls[calls.length - 1][0];
+  expect(lastChartRequestUrl).toMatch(
+    new RegExp(`col:datasource_id,opr:eq,value:%27${datasetId}%27`),
+  );
+
+  expect(lastChartRequestUrl).toMatch(
+    new RegExp(`order_column:${orderColumn}`),
+  );
+
+  expect(lastChartRequestUrl).toMatch(
+    new RegExp(`order_direction:${orderDirection}`),
+  );
+
+  expect(lastChartRequestUrl).toMatch(new RegExp(`page:${page}`));
+  expect(lastChartRequestUrl).toMatch(new RegExp(`page_size:${pageSize}`));
+};
+
+test('shows loading state', () => {
+  mockChartsFetch(
+    new Promise(resolve =>
+      setTimeout(() => resolve(getChartResponse([])), 250),
+    ),
+  );
+
+  renderDatasetUsage();
+
+  const loadingIndicator = screen.getByRole('status', {

Review Comment:
   ```suggestion
   test('shows loading state', async () => {
     mockChartsFetch(
       new Promise(resolve =>
         setTimeout(() => resolve(getChartResponse([])), 250),
       ),
     );
   
     renderDatasetUsage();
   
     const loadingIndicator = screen.findByRole('status', {
   ```
   This test has an act warning and a "Can't perform a React state update on an unmounted component" warning, if you make it async that will remove these warnings.



##########
superset-frontend/src/views/CRUD/data/dataset/AddDataset/EditDataset/UsageTab/UsageTab.test.tsx:
##########
@@ -0,0 +1,405 @@
+/**
+ * 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 userEvent from '@testing-library/user-event';
+import { render, screen, waitFor } from 'spec/helpers/testing-library';
+import { ChartListChart, getMockChart } from 'spec/fixtures/mockCharts';
+import ToastContainer from 'src/components/MessageToasts/ToastContainer';
+import DatasetUsage from '.';
+
+const DEFAULT_DATASET_ID = '1';
+const DEFAULT_ORDER_COLUMN = 'last_saved_at';
+const DEFAULT_ORDER_DIRECTION = 'desc';
+const DEFAULT_PAGE = 0;
+const DEFAULT_PAGE_SIZE = 25;
+
+const getChartResponse = (result: ChartListChart[]) => ({
+  count: result.length,
+  result,
+});
+
+const CHARTS_ENDPOINT = 'glob:*/api/v1/chart/?*';
+const mockChartsFetch = (response: any) => {

Review Comment:
   ```suggestion
   const mockChartsFetch = (
     response:
       | Promise<unknown>
       | { count: number; result: ChartListChart[] }
       | number,
   ) => {
   ```
   This `any` can be described with this definition.



-- 
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: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org


[GitHub] [superset] lyndsiWilliams commented on a diff in pull request #22670: feat(datasets): Populate Usage tab in Edit Dataset view

Posted by "lyndsiWilliams (via GitHub)" <gi...@apache.org>.
lyndsiWilliams commented on code in PR #22670:
URL: https://github.com/apache/superset/pull/22670#discussion_r1099013093


##########
superset-frontend/src/views/CRUD/data/dataset/AddDataset/EditDataset/UsageTab/UsageTab.test.tsx:
##########
@@ -0,0 +1,405 @@
+/**
+ * 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 userEvent from '@testing-library/user-event';
+import { render, screen, waitFor } from 'spec/helpers/testing-library';
+import { ChartListChart, getMockChart } from 'spec/fixtures/mockCharts';
+import ToastContainer from 'src/components/MessageToasts/ToastContainer';
+import DatasetUsage from '.';
+
+const DEFAULT_DATASET_ID = '1';
+const DEFAULT_ORDER_COLUMN = 'last_saved_at';
+const DEFAULT_ORDER_DIRECTION = 'desc';
+const DEFAULT_PAGE = 0;
+const DEFAULT_PAGE_SIZE = 25;
+
+const getChartResponse = (result: ChartListChart[]) => ({
+  count: result.length,
+  result,
+});
+
+const CHARTS_ENDPOINT = 'glob:*/api/v1/chart/?*';
+const mockChartsFetch = (response: any) => {

Review Comment:
   Oh yeah that's much cleaner 😁 



-- 
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: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org


[GitHub] [superset] codecov[bot] commented on pull request #22670: feat(datasets): Populate Usage tab in Edit Dataset view

Posted by "codecov[bot] (via GitHub)" <gi...@apache.org>.
codecov[bot] commented on PR #22670:
URL: https://github.com/apache/superset/pull/22670#issuecomment-1416540841

   # [Codecov](https://codecov.io/gh/apache/superset/pull/22670?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) Report
   > Merging [#22670](https://codecov.io/gh/apache/superset/pull/22670?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) (10934f1) into [master](https://codecov.io/gh/apache/superset/commit/c9b9b7404a2440a4c9d3173f0c494ed40f7fa2bd?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) (c9b9b74) will **increase** coverage by `0.02%`.
   > The diff coverage is `85.29%`.
   
   ```diff
   @@            Coverage Diff             @@
   ##           master   #22670      +/-   ##
   ==========================================
   + Coverage   67.42%   67.45%   +0.02%     
   ==========================================
     Files        1877     1879       +2     
     Lines       72111    72179      +68     
     Branches     7863     7874      +11     
   ==========================================
   + Hits        48621    48686      +65     
   + Misses      21471    21470       -1     
   - Partials     2019     2023       +4     
   ```
   
   | Flag | Coverage Δ | |
   |---|---|---|
   | javascript | `53.88% <85.29%> (+0.07%)` | :arrow_up: |
   
   Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#carryforward-flags-in-the-pull-request-comment) to find out more.
   
   | [Impacted Files](https://codecov.io/gh/apache/superset/pull/22670?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) | Coverage Δ | |
   |---|---|---|
   | [superset-frontend/src/pages/ChartList/index.tsx](https://codecov.io/gh/apache/superset/pull/22670?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL3BhZ2VzL0NoYXJ0TGlzdC9pbmRleC50c3g=) | `54.61% <ø> (ø)` | |
   | [...CRUD/data/dataset/AddDataset/EditDataset/index.tsx](https://codecov.io/gh/apache/superset/pull/22670?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL3ZpZXdzL0NSVUQvZGF0YS9kYXRhc2V0L0FkZERhdGFzZXQvRWRpdERhdGFzZXQvaW5kZXgudHN4) | `100.00% <ø> (ø)` | |
   | [...et-frontend/src/components/TruncatedList/index.tsx](https://codecov.io/gh/apache/superset/pull/22670?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2NvbXBvbmVudHMvVHJ1bmNhdGVkTGlzdC9pbmRleC50c3g=) | `76.92% <76.92%> (ø)` | |
   | [.../dataset/AddDataset/EditDataset/UsageTab/index.tsx](https://codecov.io/gh/apache/superset/pull/22670?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL3ZpZXdzL0NSVUQvZGF0YS9kYXRhc2V0L0FkZERhdGFzZXQvRWRpdERhdGFzZXQvVXNhZ2VUYWIvaW5kZXgudHN4) | `90.47% <90.47%> (ø)` | |
   | [...rc/components/Table/utils/InteractiveTableUtils.ts](https://codecov.io/gh/apache/superset/pull/22670?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2NvbXBvbmVudHMvVGFibGUvdXRpbHMvSW50ZXJhY3RpdmVUYWJsZVV0aWxzLnRz) | `40.67% <0.00%> (+0.84%)` | :arrow_up: |
   | [superset-frontend/src/views/CRUD/hooks.ts](https://codecov.io/gh/apache/superset/pull/22670?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL3ZpZXdzL0NSVUQvaG9va3MudHM=) | `47.69% <0.00%> (+1.02%)` | :arrow_up: |
   | [superset-frontend/src/components/Table/index.tsx](https://codecov.io/gh/apache/superset/pull/22670?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2NvbXBvbmVudHMvVGFibGUvaW5kZXgudHN4) | `71.42% <0.00%> (+1.19%)` | :arrow_up: |
   | [...erset-frontend/src/components/EmptyState/index.tsx](https://codecov.io/gh/apache/superset/pull/22670?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2NvbXBvbmVudHMvRW1wdHlTdGF0ZS9pbmRleC50c3g=) | `83.67% <0.00%> (+6.12%)` | :arrow_up: |
   
   :mega: We’re building smart automated test selection to slash your CI/CD build times. [Learn more](https://about.codecov.io/iterative-testing/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)
   


-- 
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: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org


[GitHub] [superset] codyml merged pull request #22670: feat(datasets): Populate Usage tab in Edit Dataset view

Posted by "codyml (via GitHub)" <gi...@apache.org>.
codyml merged PR #22670:
URL: https://github.com/apache/superset/pull/22670


-- 
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: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org


[GitHub] [superset] lyndsiWilliams commented on a diff in pull request #22670: feat(datasets): Populate Usage tab in Edit Dataset view

Posted by "lyndsiWilliams (via GitHub)" <gi...@apache.org>.
lyndsiWilliams commented on code in PR #22670:
URL: https://github.com/apache/superset/pull/22670#discussion_r1099012681


##########
superset-frontend/src/components/TruncatedList/index.tsx:
##########
@@ -0,0 +1,160 @@
+/**
+ * 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, { ReactNode, useMemo, useRef } from 'react';
+import { styled, t } from '@superset-ui/core';
+import { useTruncation } from 'src/hooks/useTruncation';
+import { Tooltip } from '../Tooltip';
+
+export type TruncatedListProps<ListItemType> = {
+  /**
+   * Array of input items of type `ListItemType`.
+   */
+  items: ListItemType[];
+
+  /**
+   * Renderer for items not overflowed into the tooltip.
+   * Required if `ListItemType` is not renderable by React.
+   */
+  renderVisibleItem?: (item: ListItemType) => ReactNode;
+
+  /**
+   * Renderer for items that are overflowed into the tooltip.
+   * Required if `ListItemType` is not renderable by React.
+   */
+  renderTooltipItem?: (item: ListItemType) => ReactNode;
+
+  /**
+   * Returns the React key for an item.
+   */
+  getKey?: (item: ListItemType) => React.Key;
+
+  /**
+   * The max number of links that should appear in the tooltip.
+   */
+  maxLinks?: number;
+};
+
+const StyledTruncatedList = styled.div`
+  & > span {
+    width: 100%;
+    display: flex;
+
+    .ant-tooltip-open {
+      display: inline;
+    }
+  }
+`;
+
+const StyledVisibleItems = styled.span`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-block;
+  width: 100%;
+  vertical-align: bottom;
+`;
+
+const StyledVisibleItem = styled.span`
+  &:not(:last-child)::after {
+    content: ', ';
+  }
+`;
+
+const StyledTooltipItem = styled.div`
+  .link {
+    color: ${({ theme }) => theme.colors.grayscale.light5};
+    display: block;
+    text-decoration: underline;
+  }
+`;
+
+const StyledPlus = styled.span`
+  ${({ theme }) => `
+  cursor: pointer;
+  color: ${theme.colors.primary.dark1};
+  font-weight: ${theme.typography.weights.normal};
+  `}
+`;
+
+export default function TruncatedList<ListItemType>({
+  items,
+  renderVisibleItem = item => item,
+  renderTooltipItem = item => item,
+  getKey = item => item as unknown as React.Key,
+  maxLinks = 20,
+}: TruncatedListProps<ListItemType>) {
+  const itemsNotInTooltipRef = useRef<HTMLDivElement>(null);
+  const plusRef = useRef<HTMLDivElement>(null);
+  const [elementsTruncated, hasHiddenElements] = useTruncation(
+    itemsNotInTooltipRef,
+    plusRef,
+  ) as [number, boolean];
+
+  const nMoreItems = useMemo(
+    () => (items.length > maxLinks ? items.length - maxLinks : undefined),
+    [items, maxLinks],
+  );
+
+  const itemsNotInTooltip = useMemo(
+    () => (
+      <StyledVisibleItems ref={itemsNotInTooltipRef} data-test="crosslinks">
+        {items.map(item => (
+          <StyledVisibleItem key={getKey(item)}>

Review Comment:
   That makes sense, good to know! Thanks!



-- 
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: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org