yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-11-01 11:19:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(ux): Misc UX Improvements (tutorial copy, caching, filters) (#6743)

Browse Source
This commit is contained in:
John Joyce 2022-12-14 09:11:51 -08:00 committed by GitHub
parent f0a371941e
commit fd6d12f84a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 36 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
datahub-web-react/src/app/identity/group/GroupList.tsx
View File

@ -66,7 +66,7 @@ export const GroupList = () => {
};
const handleDelete = (urn: string) => {
removeGroupFromListGroupsCache(urn, client);
removeGroupFromListGroupsCache(urn, client, page, pageSize);
};
return (

10
datahub-web-react/src/app/identity/group/cacheUtils.ts
View File

@ -2,13 +2,13 @@ import { ListGroupsDocument, ListGroupsQuery } from '../../../graphql/group.gene
export const DEFAULT_GROUP_LIST_PAGE_SIZE = 25;
export const removeGroupFromListGroupsCache = (urn, client) => {
export const removeGroupFromListGroupsCache = (urn, client, page, pageSize) => {
const currData: ListGroupsQuery | null = client.readQuery({
query: ListGroupsDocument,
variables: {
input: {
start: 0,
count: DEFAULT_GROUP_LIST_PAGE_SIZE,
start: (page - 1) * pageSize,
count: pageSize,
},
},
});
@ -19,8 +19,8 @@ export const removeGroupFromListGroupsCache = (urn, client) => {
query: ListGroupsDocument,
variables: {
input: {
start: 0,
count: DEFAULT_GROUP_LIST_PAGE_SIZE,
start: (page - 1) * pageSize,
count: pageSize,
},
},
data: {

2
datahub-web-react/src/app/identity/user/UserList.tsx
View File

@ -82,7 +82,7 @@ export const UserList = () => {
};
const handleDelete = (urn: string) => {
removeUserFromListUsersCache(urn, client);
removeUserFromListUsersCache(urn, client, page, pageSize);
};
const {

10
datahub-web-react/src/app/identity/user/cacheUtils.ts
View File

@ -2,13 +2,13 @@ import { ListUsersDocument, ListUsersQuery } from '../../../graphql/user.generat
export const DEFAULT_USER_LIST_PAGE_SIZE = 25;
export const removeUserFromListUsersCache = (urn, client) => {
export const removeUserFromListUsersCache = (urn, client, page, pageSize) => {
const currData: ListUsersQuery | null = client.readQuery({
query: ListUsersDocument,
variables: {
input: {
start: 0,
count: DEFAULT_USER_LIST_PAGE_SIZE,
start: (page - 1) * pageSize,
count: pageSize,
},
},
});
@ -20,8 +20,8 @@ export const removeUserFromListUsersCache = (urn, client) => {
query: ListUsersDocument,
variables: {
input: {
start: 0,
count: DEFAULT_USER_LIST_PAGE_SIZE,
start: (page - 1) * pageSize,
count: pageSize,
},
},
data: {

3
datahub-web-react/src/app/onboarding/config/BusinessGlossaryOnboardingConfig.tsx
View File

@ -47,8 +47,7 @@ export const BusinessGlossaryOnboardingConfig: OnboardingStep[] = [
Click here to create a new <strong>Term Group</strong>.
</p>
<p>
<strong>Term Groups</strong> act as folders, containing Terms and even other Term Groups to allow
for nesting.
<strong>Term Groups</strong> act as folders, containing Terms and nested Term Groups.
</p>
<p>
For example, there could be a <strong>PII Term Group</strong> containing Terms for different types

8
datahub-web-react/src/app/onboarding/config/EntityProfileOnboardingConfig.tsx
View File

@ -35,8 +35,8 @@ export const EntityProfileOnboardingConfig: OnboardingStep[] = [
content: (
<Typography.Paragraph>
<p>
You can view and edit an entity&apos;s key-value <strong>Properties</strong> on this tab. These are
sourced from the original Data Platform.
You can view an entity&apos;s key-value <strong>Properties</strong> on this tab. These are sourced
from the original Data Platform.
</p>
<p>
If this tab is disabled, <strong>Properties</strong> have not been ingested for this entity.
@ -121,8 +121,8 @@ export const EntityProfileOnboardingConfig: OnboardingStep[] = [
You can view and add <strong>Tags</strong> to this asset here.
</p>
<p>
<strong>Tags</strong> are labels for organizing your data. For example, you can add a Tag marking an
asset as <strong>Deprecated</strong>.
<strong>Tags</strong> are labels for organizing your data. For example, you can add a Tag to mark an
asset as <strong>Mission Critical</strong>.
</p>
<p>
Learn more about <strong>Tags</strong>{' '}

9
datahub-web-react/src/app/onboarding/config/IngestionOnboardingConfig.tsx
View File

@ -13,9 +13,9 @@ export const IngestionOnboardingConfig: OnboardingStep[] = [
content: (
<Typography.Paragraph>
<p>
Click here to configure new Integrations from DataHub to your <strong>Data Platforms</strong>,
including Transactional Databases like <strong>MySQL</strong>, Data Warehouses like{' '}
<strong>Snowflake</strong>, Dashboarding tools like <strong>Looker</strong>, and many more!
Configure new Integrations from DataHub to your <strong>Data Platforms</strong>, including
Transactional Databases like <strong>MySQL</strong>, Data Warehouses such as{' '}
<strong>Snowflake</strong>, Dashboarding tools like <strong>Looker</strong>, and more!
</p>
<p>
Learn more about ingestion and view the full list of supported Integrations{' '}
@ -37,8 +37,7 @@ export const IngestionOnboardingConfig: OnboardingStep[] = [
title: 'Refresh Ingestion Pipelines',
content: (
<Typography.Paragraph>
<p>Click here to refresh and check whether new ingestion pipelines have been set up.</p>
<p>You can view both pipelines created on this page and those set up using the DataHub CLI.</p>
<p>Click to force a refresh of running ingestion sources.</p>
</Typography.Paragraph>
),
},

6
datahub-web-react/src/app/onboarding/config/PoliciesOnboardingConfig.tsx
View File

@ -15,11 +15,11 @@ export const PoliciesOnboardingConfig: OnboardingStep[] = [
Welcome to DataHub <strong>Policies</strong>!
</p>
<p>
If you need fine-grained access controls, <strong>Policies</strong> will do the trick.
In most cases, <strong>Roles</strong> are the best option for granting privileges to DataHub users."
</p>
<p>
For most users, <strong>Roles</strong> are the recommended way to manage permissions on DataHub. If
Roles do not fit your use case, then Policies can be used.
When more fine-grained control over user and group permissions is required, then{' '}
<strong>Policies</strong> will do the trick.
</p>
<p>
Learn more about <strong>Policies</strong>{' '}

4
datahub-web-react/src/app/onboarding/config/SearchOnboardingConfig.tsx
View File

@ -12,8 +12,8 @@ export const SearchOnboardingConfig: OnboardingStep[] = [
title: 'Narrow your search ⚡',
content: (
<Typography.Paragraph>
Quickly find relevant assets by applying one or more filters. Try filtering by{' '}
<strong>Entity Type</strong>, <strong>Owner</strong>, and more!
Quickly find relevant assets by applying one or more filters. Try filtering by <strong>Type</strong>,{' '}
<strong>Owner</strong>, and more!
</Typography.Paragraph>
),
},

10
datahub-web-react/src/app/search/SimpleSearchFilter.tsx
View File

@ -2,7 +2,7 @@ import { DownOutlined, UpOutlined } from '@ant-design/icons';
import { Button, Checkbox } from 'antd';
import { CheckboxChangeEvent } from 'antd/lib/checkbox';
import * as React from 'react';
import { useState } from 'react';
import { useState, useEffect } from 'react';
import styled from 'styled-components';
import { FacetFilterInput, FacetMetadata } from '../../types.generated';
@ -67,6 +67,14 @@ export const SimpleSearchFilter = ({ facet, selectedFilters, onFilterSelect, def
(agg) => agg.count > 0 || isFacetSelected(facet.field, agg.value) || isGraphDegreeFilter(facet.field),
);
// By default, render a Filter as open if it is selected
const isFilterSelected = !!filteredAggregations.find((agg) => isFacetSelected(facet.field, agg.value));
useEffect(() => {
if (isFilterSelected) {
setAreFiltersVisible(true);
}
}, [isFilterSelected]);
const shouldTruncate = filteredAggregations.length > TRUNCATED_FILTER_LENGTH;
return (

2
datahub-web-react/src/app/search/SimpleSearchFilters.tsx
View File

@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
import { FacetFilterInput, FacetMetadata } from '../../types.generated';
import { SimpleSearchFilter } from './SimpleSearchFilter';
const TOP_FILTERS = ['degree', 'entity', 'tags', 'glossaryTerms', 'domains', 'owners'];
const TOP_FILTERS = ['degree', 'entity', 'platform', 'tags', 'glossaryTerms', 'domains', 'owners'];
interface Props {
facets: Array<FacetMetadata>;

5
datahub-web-react/src/app/search/__tests__/SearchPage.test.tsx
View File

@ -75,11 +75,6 @@ describe('SearchPage', () => {
const datasetEntityBox = getByTestId('facet-entity-DATASET');
expect(datasetEntityBox).toHaveProperty('checked', true);
const expandButton = getByTestId('expand-facet-platform');
act(() => {
fireEvent.click(expandButton);
});
await waitFor(() => expect(queryByTestId('facet-platform-hdfs')).toBeInTheDocument());
const hdfsPlatformBox = getByTestId('facet-platform-hdfs');
expect(hdfsPlatformBox).toHaveProperty('checked', true);