fix(AllEntitiesTable): show Tags (#31301)

This commit is contained in:
alexandrusoare 2024-12-09 18:06:32 +02:00 committed by GitHub
parent 48c5ee4f8b
commit 0133bab038
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 136 additions and 1 deletions

View File

@ -0,0 +1,131 @@
/**
* 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 { render } from 'spec/helpers/testing-library';
import { screen } from '@testing-library/react';
import * as useQueryParamsModule from 'use-query-params';
import AllEntitiesTable from './AllEntitiesTable';
describe('AllEntitiesTable', () => {
const mockSetShowTagModal = jest.fn();
const mockObjects = {
dashboard: [],
chart: [],
query: [],
};
const mockObjectsWithTags = {
dashboard: [
{
id: 1,
type: 'dashboard',
name: 'Sales Dashboard',
url: '/dashboard/1',
changed_on: '2023-11-20T12:34:56Z',
created_by: 1,
creator: 'John Doe',
owners: [{ id: 1, first_name: 'John', last_name: 'Doe' }],
tags: [
{ id: 101, name: 'Sales', type: 'TagType.custom' },
{ id: 42, name: 'Current Tag', type: 'TagType.custom' },
],
},
],
chart: [
{
id: 2,
type: 'chart',
name: 'Monthly Revenue',
url: '/chart/2',
changed_on: '2023-11-19T12:00:00Z',
created_by: 2,
creator: 'Jane Smith',
owners: [{ id: 2, first_name: 'Jane', last_name: 'Smith' }],
tags: [
{ id: 102, name: 'Revenue', type: 'TagType.custom' },
{ id: 42, name: 'Current Tag', type: 'TagType.custom' },
],
},
],
query: [
{
id: 3,
type: 'query',
name: 'User Engagement',
url: '/query/3',
changed_on: '2023-11-18T09:30:00Z',
created_by: 3,
creator: 'Alice Brown',
owners: [{ id: 3, first_name: 'Alice', last_name: 'Brown' }],
tags: [
{ id: 103, name: 'Engagement', type: 'TagType.custom' },
{ id: 42, name: 'Current Tag', type: 'TagType.custom' },
],
},
],
};
beforeEach(() => {
jest
.spyOn(useQueryParamsModule, 'useQueryParam')
.mockReturnValue([42, jest.fn()]);
});
afterEach(() => {
jest.restoreAllMocks();
});
it('renders when empty', () => {
render(
<AllEntitiesTable
search=""
setShowTagModal={mockSetShowTagModal}
objects={mockObjects}
/>,
);
expect(
screen.getByText('No entities have this tag currently assigned'),
).toBeInTheDocument();
expect(screen.getByText('Add tag to entities')).toBeInTheDocument();
});
it('renders the correct tags for each object type, excluding the current tag', () => {
render(
<AllEntitiesTable
search=""
setShowTagModal={mockSetShowTagModal}
objects={mockObjectsWithTags}
/>,
);
expect(screen.getByText('Sales Dashboard')).toBeInTheDocument();
expect(screen.getByText('Sales')).toBeInTheDocument();
expect(screen.getByText('Monthly Revenue')).toBeInTheDocument();
expect(screen.getByText('Revenue')).toBeInTheDocument();
expect(screen.getByText('User Engagement')).toBeInTheDocument();
expect(screen.getByText('Engagement')).toBeInTheDocument();
expect(screen.queryByText('Current Tag')).not.toBeInTheDocument();
});
});

View File

@ -24,6 +24,7 @@ import FacePile from 'src/components/FacePile';
import Tag from 'src/types/TagType'; import Tag from 'src/types/TagType';
import Owner from 'src/types/Owner'; import Owner from 'src/types/Owner';
import { EmptyStateBig } from 'src/components/EmptyState'; import { EmptyStateBig } from 'src/components/EmptyState';
import { NumberParam, useQueryParam } from 'use-query-params';
const MAX_TAGS_TO_SHOW = 3; const MAX_TAGS_TO_SHOW = 3;
const PAGE_SIZE = 10; const PAGE_SIZE = 10;
@ -79,6 +80,7 @@ export default function AllEntitiesTable({
}: AllEntitiesTableProps) { }: AllEntitiesTableProps) {
type objectType = 'dashboard' | 'chart' | 'query'; type objectType = 'dashboard' | 'chart' | 'query';
const [tagId] = useQueryParam('id', NumberParam);
const showListViewObjs = const showListViewObjs =
objects.dashboard.length > 0 || objects.dashboard.length > 0 ||
objects.chart.length > 0 || objects.chart.length > 0 ||
@ -119,7 +121,9 @@ export default function AllEntitiesTable({
<TagsList <TagsList
tags={tags.filter( tags={tags.filter(
(tag: Tag) => (tag: Tag) =>
tag.type === 'TagTypes.custom' || tag.type === 1, tag.type !== undefined &&
['TagType.custom', 1].includes(tag.type) &&
tag.id !== tagId,
)} )}
maxTags={MAX_TAGS_TO_SHOW} maxTags={MAX_TAGS_TO_SHOW}
/> />