Skip to content

Commit

Permalink
Addresses comments
Browse files Browse the repository at this point in the history
  • Loading branch information
@michael-s-molina
michael-s-molina committed Aug 16, 2022
1 parent e301e92 commit d834952
Show file tree
Hide file tree
Showing 5 changed files with 150 additions and 111 deletions.
163 changes: 84 additions & 79 deletions superset-frontend/src/components/MetadataBar/ContentConfig.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import React from 'react';
import moment from 'moment';
import { ensureIsArray, styled, t } from '@superset-ui/core';
import Icons from 'src/components/Icons';
import { ContentType } from './ContentType';
import { ContentType, MetadataType } from './ContentType';

const Header = styled.div`
font-weight: ${({ theme }) => theme.typography.weights.bold};
Expand Down Expand Up @@ -54,85 +54,90 @@ const config = (contentType: ContentType) => {
* types of tooltips to their own components and reference them here.
*/

if (type === 'dashboards') {
return {
icon: Icons.FundProjectionScreenOutlined,
title: contentType.title,
tooltip: contentType.description ? (
<div>
<Info header={contentType.title} text={contentType.description} />
</div>
) : undefined,
};
}
if (type === 'description') {
return {
icon: Icons.BookOutlined,
title: contentType.value,
};
}
if (type === 'lastModified') {
const value = moment.utc(contentType.value).fromNow();
return {
icon: Icons.EditOutlined,
title: value,
tooltip: (
<div>
<Info header={t('Last modified')} text={value} />
<Info header={t('Modified by')} text={contentType.modifiedBy} />
</div>
),
};
}
if (type === 'owner') {
return {
icon: Icons.UserOutlined,
title: contentType.createdBy,
tooltip: (
<div>
<Info header={t('Created by')} text={contentType.createdBy} />
<Info header={t('Owners')} text={contentType.owners} />
<Info
header={t('Created on')}
text={moment.utc(contentType.createdOn).fromNow()}
/>
</div>
),
};
}
if (type === 'rows') {
return {
icon: Icons.InsertRowBelowOutlined,
title: contentType.title,
tooltip: contentType.title,
};
}
if (type === 'sql') {
return {
icon: Icons.ConsoleSqlOutlined,
title: contentType.title,
tooltip: contentType.title,
};
}
if (type === 'table') {
return {
icon: Icons.Table,
title: contentType.title,
tooltip: contentType.title,
};
}
if (type === 'tags') {
return {
icon: Icons.TagsOutlined,
title: contentType.values.join(', '),
tooltip: (
<div>
<Info header={t('Tags')} text={contentType.values} />
</div>
),
};
switch (type) {
case MetadataType.DASHBOARDS:
return {
icon: Icons.FundProjectionScreenOutlined,
title: contentType.title,
tooltip: contentType.description ? (
<div>
<Info header={contentType.title} text={contentType.description} />
</div>
) : undefined,
};

case MetadataType.DESCRIPTION:
return {
icon: Icons.BookOutlined,
title: contentType.value,
};

case MetadataType.LAST_MODIFIED:
return {
icon: Icons.EditOutlined,
title: moment.utc(contentType.value).fromNow(),
tooltip: (
<div>
<Info
header={t('Last modified')}
text={moment.utc(contentType.value).fromNow()}
/>
<Info header={t('Modified by')} text={contentType.modifiedBy} />
</div>
),
};

case MetadataType.OWNER:
return {
icon: Icons.UserOutlined,
title: contentType.createdBy,
tooltip: (
<div>
<Info header={t('Created by')} text={contentType.createdBy} />
<Info header={t('Owners')} text={contentType.owners} />
<Info
header={t('Created on')}
text={moment.utc(contentType.createdOn).fromNow()}
/>
</div>
),
};

case MetadataType.ROWS:
return {
icon: Icons.InsertRowBelowOutlined,
title: contentType.title,
tooltip: contentType.title,
};

case MetadataType.SQL:
return {
icon: Icons.ConsoleSqlOutlined,
title: contentType.title,
tooltip: contentType.title,
};

case MetadataType.TABLE:
return {
icon: Icons.Table,
title: contentType.title,
tooltip: contentType.title,
};

case MetadataType.TAGS:
return {
icon: Icons.TagsOutlined,
title: contentType.values.join(', '),
tooltip: (
<div>
<Info header={t('Tags')} text={contentType.values} />
</div>
),
};

default:
throw Error(`Invalid type provided: ${type}`);
}
throw Error(`Invalid type provided: ${type}`);
};

export { config };
27 changes: 19 additions & 8 deletions superset-frontend/src/components/MetadataBar/ContentType.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,54 +17,65 @@
* under the License.
*/

export enum MetadataType {
DASHBOARDS = 'dashboards',
DESCRIPTION = 'description',
LAST_MODIFIED = 'lastModified',
OWNER = 'owner',
ROWS = 'rows',
SQL = 'sql',
TABLE = 'table',
TAGS = 'tags',
}

export type Dashboards = {
type: 'dashboards';
type: MetadataType.DASHBOARDS;
title: string;
description?: string;
onClick?: (type: string) => void;
};

export type Description = {
type: 'description';
type: MetadataType.DESCRIPTION;
value: string;
onClick?: (type: string) => void;
};

export type LastModified = {
type: 'lastModified';
type: MetadataType.LAST_MODIFIED;
value: Date;
modifiedBy: string;
onClick?: (type: string) => void;
};

export type Owner = {
type: 'owner';
type: MetadataType.OWNER;
createdBy: string;
owners: string[];
createdOn: Date;
onClick?: (type: string) => void;
};

export type Rows = {
type: 'rows';
type: MetadataType.ROWS;
title: string;
onClick?: (type: string) => void;
};

export type Sql = {
type: 'sql';
type: MetadataType.SQL;
title: string;
onClick?: (type: string) => void;
};

export type Table = {
type: 'table';
type: MetadataType.TABLE;
title: string;
onClick?: (type: string) => void;
};

export type Tags = {
type: 'tags';
type: MetadataType.TAGS;
values: string[];
onClick?: (type: string) => void;
};
Expand Down
32 changes: 18 additions & 14 deletions superset-frontend/src/components/MetadataBar/MetadataBar.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@ import * as resizeDetector from 'react-resize-detector';
import moment from 'moment';
import { supersetTheme } from '@superset-ui/core';
import { hexToRgb } from 'src/utils/colorUtils';
import MetadataBar from '.';
import { ContentType } from './ContentType';
import MetadataBar, { MIN_NUMBER_ITEMS, MAX_NUMBER_ITEMS } from '.';
import { ContentType, MetadataType } from './ContentType';

const DASHBOARD_TITLE = 'Added to 452 dashboards';
const DASHBOARD_DESCRIPTION =
Expand All @@ -48,39 +48,39 @@ const runWithBarCollapsed = async (func: Function) => {

const ITEMS: ContentType[] = [
{
type: 'dashboards',
type: MetadataType.DASHBOARDS,
title: DASHBOARD_TITLE,
description: DASHBOARD_DESCRIPTION,
},
{
type: 'description',
type: MetadataType.DESCRIPTION,
value: DESCRIPTION_VALUE,
},
{
type: 'lastModified',
type: MetadataType.LAST_MODIFIED,
value: DATE,
modifiedBy: MODIFIED_BY,
},
{
type: 'owner',
type: MetadataType.OWNER,
createdBy: CREATED_BY,
owners: OWNERS,
createdOn: DATE,
},
{
type: 'rows',
type: MetadataType.ROWS,
title: ROWS_TITLE,
},
{
type: 'sql',
type: MetadataType.SQL,
title: SQL_TITLE,
},
{
type: 'table',
type: MetadataType.TABLE,
title: TABLE_TITLE,
},
{
type: 'tags',
type: MetadataType.TAGS,
values: TAGS,
},
];
Expand All @@ -94,11 +94,15 @@ test('renders an array of items', () => {
test('throws errors when out of min/max restrictions', () => {
const spy = jest.spyOn(console, 'error');
spy.mockImplementation(() => {});
expect(() => render(<MetadataBar items={ITEMS.slice(0, 1)} />)).toThrow(
'The minimum number of items for the metadata bar is 2.',
expect(() =>
render(<MetadataBar items={ITEMS.slice(0, MIN_NUMBER_ITEMS - 1)} />),
).toThrow(
`The minimum number of items for the metadata bar is ${MIN_NUMBER_ITEMS}.`,
);
expect(() => render(<MetadataBar items={ITEMS} />)).toThrow(
'The maximum number of items for the metadata bar is 6.',
expect(() =>
render(<MetadataBar items={ITEMS.slice(0, MAX_NUMBER_ITEMS + 1)} />),
).toThrow(
`The maximum number of items for the metadata bar is ${MAX_NUMBER_ITEMS}.`,
);
spy.mockRestore();
});
Expand Down
Loading

0 comments on commit d834952

Please sign in to comment.