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

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 (

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,
+                start: (page - 1) * pageSize,
-                count: DEFAULT_GROUP_LIST_PAGE_SIZE,
+                count: pageSize,
             },
         },
     });
@@ -19,8 +19,8 @@ export const removeGroupFromListGroupsCache = (urn, client) => {
         query: ListGroupsDocument,
         variables: {
             input: {
-                start: 0,
+                start: (page - 1) * pageSize,
-                count: DEFAULT_GROUP_LIST_PAGE_SIZE,
+                count: pageSize,
             },
         },
         data: {

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 {

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,
+                start: (page - 1) * pageSize,
-                count: DEFAULT_USER_LIST_PAGE_SIZE,
+                count: pageSize,
             },
         },
     });
@@ -20,8 +20,8 @@ export const removeUserFromListUsersCache = (urn, client) => {
         query: ListUsersDocument,
         variables: {
             input: {
-                start: 0,
+                start: (page - 1) * pageSize,
-                count: DEFAULT_USER_LIST_PAGE_SIZE,
+                count: pageSize,
             },
         },
         data: {

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

@@ -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
+                    <strong>Term Groups</strong> act as folders, containing Terms and nested Term Groups.
-                    for nesting.
                 </p>
                 <p>
                     For example, there could be a <strong>PII Term Group</strong> containing Terms for different types

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

@@ -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
+                    You can view an entity&apos;s key-value <strong>Properties</strong> on this tab. These are sourced
-                    sourced from the original Data Platform.
+                    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
+                    <strong>Tags</strong> are labels for organizing your data. For example, you can add a Tag to mark an
-                    asset as <strong>Deprecated</strong>.
+                    asset as <strong>Mission Critical</strong>.
                 </p>
                 <p>
                     Learn more about <strong>Tags</strong>{' '}

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

@@ -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>,
+                    Configure new Integrations from DataHub to your <strong>Data Platforms</strong>, including
-                    including Transactional Databases like <strong>MySQL</strong>, Data Warehouses like{' '}
+                    Transactional Databases like <strong>MySQL</strong>, Data Warehouses such as{' '}
-                    <strong>Snowflake</strong>, Dashboarding tools like <strong>Looker</strong>, and many more!
+                    <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>Click to force a refresh of running ingestion sources.</p>
-                <p>You can view both pipelines created on this page and those set up using the DataHub CLI.</p>
             </Typography.Paragraph>
         ),
     },

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

@@ -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
+                    When more fine-grained control over user and group permissions is required, then{' '}
-                    Roles do not fit your use case, then Policies can be used.
+                    <strong>Policies</strong> will do the trick.
                 </p>
                 <p>
                     Learn more about <strong>Policies</strong>{' '}

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

@@ -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{' '}
+                Quickly find relevant assets by applying one or more filters. Try filtering by <strong>Type</strong>,{' '}
-                <strong>Entity Type</strong>, <strong>Owner</strong>, and more!
+                <strong>Owner</strong>, and more!
             </Typography.Paragraph>
         ),
     },

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 (

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<FacetMetadata>;

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);