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: [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]
