From fd6d12f84aa48876e1b569bf979e3147543e451b Mon Sep 17 00:00:00 2001 From: John Joyce Date: Wed, 14 Dec 2022 09:11:51 -0800 Subject: [PATCH] refactor(ux): Misc UX Improvements (tutorial copy, caching, filters) (#6743) --- datahub-web-react/src/app/identity/group/GroupList.tsx | 2 +- datahub-web-react/src/app/identity/group/cacheUtils.ts | 10 +++++----- datahub-web-react/src/app/identity/user/UserList.tsx | 2 +- datahub-web-react/src/app/identity/user/cacheUtils.ts | 10 +++++----- .../config/BusinessGlossaryOnboardingConfig.tsx | 3 +-- .../config/EntityProfileOnboardingConfig.tsx | 8 ++++---- .../onboarding/config/IngestionOnboardingConfig.tsx | 9 ++++----- .../app/onboarding/config/PoliciesOnboardingConfig.tsx | 6 +++--- .../app/onboarding/config/SearchOnboardingConfig.tsx | 4 ++-- .../src/app/search/SimpleSearchFilter.tsx | 10 +++++++++- .../src/app/search/SimpleSearchFilters.tsx | 2 +- .../src/app/search/__tests__/SearchPage.test.tsx | 5 ----- 12 files changed, 36 insertions(+), 35 deletions(-) diff --git a/datahub-web-react/src/app/identity/group/GroupList.tsx b/datahub-web-react/src/app/identity/group/GroupList.tsx index 28854c8dbe..db9901a53b 100644 --- a/datahub-web-react/src/app/identity/group/GroupList.tsx +++ b/datahub-web-react/src/app/identity/group/GroupList.tsx @@ -66,7 +66,7 @@ export const GroupList = () => { }; const handleDelete = (urn: string) => { - removeGroupFromListGroupsCache(urn, client); + removeGroupFromListGroupsCache(urn, client, page, pageSize); }; return ( diff --git a/datahub-web-react/src/app/identity/group/cacheUtils.ts b/datahub-web-react/src/app/identity/group/cacheUtils.ts index 131fad02d3..d4ecd40a40 100644 --- a/datahub-web-react/src/app/identity/group/cacheUtils.ts +++ b/datahub-web-react/src/app/identity/group/cacheUtils.ts @@ -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: { diff --git a/datahub-web-react/src/app/identity/user/UserList.tsx b/datahub-web-react/src/app/identity/user/UserList.tsx index a87ca45f68..1b75eebbc0 100644 --- a/datahub-web-react/src/app/identity/user/UserList.tsx +++ b/datahub-web-react/src/app/identity/user/UserList.tsx @@ -82,7 +82,7 @@ export const UserList = () => { }; const handleDelete = (urn: string) => { - removeUserFromListUsersCache(urn, client); + removeUserFromListUsersCache(urn, client, page, pageSize); }; const { diff --git a/datahub-web-react/src/app/identity/user/cacheUtils.ts b/datahub-web-react/src/app/identity/user/cacheUtils.ts index db0af1f232..7d2d78b036 100644 --- a/datahub-web-react/src/app/identity/user/cacheUtils.ts +++ b/datahub-web-react/src/app/identity/user/cacheUtils.ts @@ -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: { diff --git a/datahub-web-react/src/app/onboarding/config/BusinessGlossaryOnboardingConfig.tsx b/datahub-web-react/src/app/onboarding/config/BusinessGlossaryOnboardingConfig.tsx index 6840f7e5e4..2f4f8cc75e 100644 --- a/datahub-web-react/src/app/onboarding/config/BusinessGlossaryOnboardingConfig.tsx +++ b/datahub-web-react/src/app/onboarding/config/BusinessGlossaryOnboardingConfig.tsx @@ -47,8 +47,7 @@ export const BusinessGlossaryOnboardingConfig: OnboardingStep[] = [ Click here to create a new Term Group.

- Term Groups act as folders, containing Terms and even other Term Groups to allow - for nesting. + Term Groups act as folders, containing Terms and nested Term Groups.

For example, there could be a PII Term Group containing Terms for different types diff --git a/datahub-web-react/src/app/onboarding/config/EntityProfileOnboardingConfig.tsx b/datahub-web-react/src/app/onboarding/config/EntityProfileOnboardingConfig.tsx index a5e627705f..5aa2a8fdfd 100644 --- a/datahub-web-react/src/app/onboarding/config/EntityProfileOnboardingConfig.tsx +++ b/datahub-web-react/src/app/onboarding/config/EntityProfileOnboardingConfig.tsx @@ -35,8 +35,8 @@ export const EntityProfileOnboardingConfig: OnboardingStep[] = [ content: (

- You can view and edit an entity's key-value Properties on this tab. These are - sourced from the original Data Platform. + You can view an entity's key-value Properties on this tab. These are sourced + from the original Data Platform.

If this tab is disabled, Properties have not been ingested for this entity. @@ -121,8 +121,8 @@ export const EntityProfileOnboardingConfig: OnboardingStep[] = [ You can view and add Tags to this asset here.

- Tags are labels for organizing your data. For example, you can add a Tag marking an - asset as Deprecated. + Tags are labels for organizing your data. For example, you can add a Tag to mark an + asset as Mission Critical.

Learn more about Tags{' '} diff --git a/datahub-web-react/src/app/onboarding/config/IngestionOnboardingConfig.tsx b/datahub-web-react/src/app/onboarding/config/IngestionOnboardingConfig.tsx index 690917095f..d8c9b2ff7e 100644 --- a/datahub-web-react/src/app/onboarding/config/IngestionOnboardingConfig.tsx +++ b/datahub-web-react/src/app/onboarding/config/IngestionOnboardingConfig.tsx @@ -13,9 +13,9 @@ export const IngestionOnboardingConfig: OnboardingStep[] = [ content: (

- Click here to configure new Integrations from DataHub to your Data Platforms, - including Transactional Databases like MySQL, Data Warehouses like{' '} - Snowflake, Dashboarding tools like Looker, and many more! + Configure new Integrations from DataHub to your Data Platforms, including + Transactional Databases like MySQL, Data Warehouses such as{' '} + Snowflake, Dashboarding tools like Looker, and more!

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: ( -

Click here to refresh and check whether new ingestion pipelines have been set up.

-

You can view both pipelines created on this page and those set up using the DataHub CLI.

+

Click to force a refresh of running ingestion sources.

), }, diff --git a/datahub-web-react/src/app/onboarding/config/PoliciesOnboardingConfig.tsx b/datahub-web-react/src/app/onboarding/config/PoliciesOnboardingConfig.tsx index 2d8062cd2a..df727f3fa6 100644 --- a/datahub-web-react/src/app/onboarding/config/PoliciesOnboardingConfig.tsx +++ b/datahub-web-react/src/app/onboarding/config/PoliciesOnboardingConfig.tsx @@ -15,11 +15,11 @@ export const PoliciesOnboardingConfig: OnboardingStep[] = [ Welcome to DataHub Policies!

- If you need fine-grained access controls, Policies will do the trick. + In most cases, Roles are the best option for granting privileges to DataHub users."

- For most users, Roles 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{' '} + Policies will do the trick.

Learn more about Policies{' '} diff --git a/datahub-web-react/src/app/onboarding/config/SearchOnboardingConfig.tsx b/datahub-web-react/src/app/onboarding/config/SearchOnboardingConfig.tsx index 2497a967d3..ee150bef0c 100644 --- a/datahub-web-react/src/app/onboarding/config/SearchOnboardingConfig.tsx +++ b/datahub-web-react/src/app/onboarding/config/SearchOnboardingConfig.tsx @@ -12,8 +12,8 @@ export const SearchOnboardingConfig: OnboardingStep[] = [ title: 'Narrow your search ⚡', content: ( - Quickly find relevant assets by applying one or more filters. Try filtering by{' '} - Entity Type, Owner, and more! + Quickly find relevant assets by applying one or more filters. Try filtering by Type,{' '} + Owner, and more! ), }, diff --git a/datahub-web-react/src/app/search/SimpleSearchFilter.tsx b/datahub-web-react/src/app/search/SimpleSearchFilter.tsx index 9d7c32c406..e8ed79f340 100644 --- a/datahub-web-react/src/app/search/SimpleSearchFilter.tsx +++ b/datahub-web-react/src/app/search/SimpleSearchFilter.tsx @@ -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 ( diff --git a/datahub-web-react/src/app/search/SimpleSearchFilters.tsx b/datahub-web-react/src/app/search/SimpleSearchFilters.tsx index ef31ec4210..242d14e375 100644 --- a/datahub-web-react/src/app/search/SimpleSearchFilters.tsx +++ b/datahub-web-react/src/app/search/SimpleSearchFilters.tsx @@ -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; diff --git a/datahub-web-react/src/app/search/__tests__/SearchPage.test.tsx b/datahub-web-react/src/app/search/__tests__/SearchPage.test.tsx index 4a2ca7c789..7e789c5c1a 100644 --- a/datahub-web-react/src/app/search/__tests__/SearchPage.test.tsx +++ b/datahub-web-react/src/app/search/__tests__/SearchPage.test.tsx @@ -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);