From 2344ab016b406770b5feebb100815b8e18bfa105 Mon Sep 17 00:00:00 2001 From: karanh37 <33024356+karanh37@users.noreply.github.com> Date: Tue, 25 Apr 2023 21:20:57 +0530 Subject: [PATCH] fix: store user details in localstorage for welcome screen (#11259) * Change the description of Welcome screen * localization key change * feat: store username in cookie for welcome screen * fix: use username instead of email * fix: show welcome screen on initial load * changes placeholder for entity table tags search * fix: use localstorage instead of cookie * fix unit test * change global search placeholder * fix: placeholder label of glossary terms --------- Co-authored-by: Ashish Gupta --- .../EntityTable/EntityTable.component.tsx | 6 +++ .../components/Explore/Explore.component.tsx | 18 ++++---- .../components/MyData/MyData.component.tsx | 44 ++++++++++++++----- .../TableTags/TableTags.component.tsx | 2 + .../TableTags/TableTags.interface.ts | 1 + .../components/TableTags/TableTags.test.tsx | 1 + .../TagsContainer/tags-container.interface.ts | 1 + .../Tag/TagsContainer/tags-container.tsx | 11 +++-- .../ui/src/constants/Services.constant.ts | 2 +- .../resources/ui/src/constants/constants.ts | 1 + 10 files changed, 62 insertions(+), 25 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/EntityTable/EntityTable.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/EntityTable/EntityTable.component.tsx index 0880147594e..7371f719b67 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/EntityTable/EntityTable.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/EntityTable/EntityTable.component.tsx @@ -543,6 +543,9 @@ const EntityTable = ({ index={index} isReadOnly={isReadOnly} isTagLoading={isTagLoading} + placeholder={t('label.search-entity', { + entity: t('label.tag-plural'), + })} record={record} tagFetchFailed={tagFetchFailed} tagList={classificationTags} @@ -574,6 +577,9 @@ const EntityTable = ({ index={index} isReadOnly={isReadOnly} isTagLoading={isTagLoading} + placeholder={t('label.search-entity', { + entity: t('label.glossary-term-plural'), + })} record={record} tagFetchFailed={tagFetchFailed} tagList={glossaryTags} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx index bb3923ebd72..7219793445e 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx @@ -15,13 +15,13 @@ import { SortAscendingOutlined, SortDescendingOutlined, } from '@ant-design/icons'; -import { Button, Card, Col, Row, Space, Tabs, Typography } from 'antd'; -import { ReactComponent as SearchNotFound } from 'assets/svg/nothing_here.svg'; +import { Button, Card, Col, Row, Space, Tabs } from 'antd'; +import ErrorPlaceHolder from 'components/common/error-with-placeholder/ErrorPlaceHolder'; import FacetFilter from 'components/common/facetfilter/FacetFilter'; import { useGlobalSearchProvider } from 'components/GlobalSearchProvider/GlobalSearchProvider'; import SearchedData from 'components/searched-data/SearchedData'; import { SearchedDataProps } from 'components/searched-data/SearchedData.interface'; -import { SORT_ORDER } from 'enums/common.enum'; +import { ERROR_PLACEHOLDER_TYPE, SORT_ORDER } from 'enums/common.enum'; import { EntityType } from 'enums/entity.enum'; import unique from 'fork-ts-checker-webpack-plugin/lib/utils/array/unique'; import { @@ -427,15 +427,13 @@ const Explore: React.FC = ({ - -
- - {`${t('label.no-data-asset-found-for')} `} - {searchQueryParam} - -
+ )} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.component.tsx index d2c71cf3316..1d3fe98db95 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.component.tsx @@ -26,7 +26,10 @@ import React, { import { useTranslation } from 'react-i18next'; import { Link } from 'react-router-dom'; import AppState from '../../AppState'; -import { getUserPath } from '../../constants/constants'; +import { + getUserPath, + LOGGED_IN_USER_STORAGE_KEY, +} from '../../constants/constants'; import { observerOptions } from '../../constants/Mydata.constants'; import { FeedFilter } from '../../enums/mydata.enum'; import { ThreadType } from '../../generated/entity/feed/thread'; @@ -67,7 +70,29 @@ const MyData: React.FC = ({ const [elementRef, isInView] = useInfiniteScroll(observerOptions); const [feedFilter, setFeedFilter] = useState(FeedFilter.OWNER); const [threadType, setThreadType] = useState(); - const [showWelcomeScreen, setShowWelcomeScreen] = useState(true); + const [showWelcomeScreen, setShowWelcomeScreen] = useState(false); + const storageData = localStorage.getItem(LOGGED_IN_USER_STORAGE_KEY); + + const loggedInUserName = useMemo(() => { + return AppState.getCurrentUserDetails()?.name || ''; + }, [AppState]); + + const usernameExistsInCookie = useMemo(() => { + return storageData + ? storageData.split(',').includes(loggedInUserName) + : false; + }, [storageData, loggedInUserName]); + + const updateWelcomeScreen = (show: boolean) => { + if (loggedInUserName) { + const arr = storageData ? storageData.split(',') : []; + if (!arr.includes(loggedInUserName)) { + arr.push(loggedInUserName); + localStorage.setItem(LOGGED_IN_USER_STORAGE_KEY, arr.join(',')); + } + } + setShowWelcomeScreen(show); + }; const getLeftPanel = () => { return ( @@ -215,6 +240,9 @@ const MyData: React.FC = ({ useEffect(() => { isMounted.current = true; + updateWelcomeScreen(!usernameExistsInCookie); + + return () => updateWelcomeScreen(false); }, []); const handleFeedFilterChange = useCallback( @@ -229,14 +257,8 @@ const MyData: React.FC = ({ const newFeedsLength = activityFeeds && activityFeeds.length; const showActivityFeedList = useMemo( - () => - !( - feedFilter === FeedFilter.OWNER && - feedData.length === 0 && - !isFeedLoading && - showWelcomeScreen - ), - [feedFilter, feedData, isFeedLoading, showWelcomeScreen] + () => !(!isFeedLoading && showWelcomeScreen), + [isFeedLoading, showWelcomeScreen] ); return ( @@ -267,7 +289,7 @@ const MyData: React.FC = ({ /> ) : ( !isFeedLoading && ( - setShowWelcomeScreen(false)} /> + updateWelcomeScreen(false)} /> ) )} {isFeedLoading ? : null} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TableTags/TableTags.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TableTags/TableTags.component.tsx index b1d01505549..092f8b2806d 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/TableTags/TableTags.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/TableTags/TableTags.component.tsx @@ -50,6 +50,7 @@ const TableTags = ({ fetchTags, tagFetchFailed, dataTestId, + placeholder, }: TableTagsComponentProps) => { const { t } = useTranslation(); const [editColumnTag, setEditColumnTag] = useState<{ @@ -135,6 +136,7 @@ const TableTags = ({ className="w-min-13 w-max-13" editable={editColumnTag?.index === index} isLoading={isTagLoading && editColumnTag?.index === index} + placeholder={placeholder} selectedTags={tags[type] || []} showAddTagButton={hasTagEditAccess && isEmpty(tags[type])} size="small" diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TableTags/TableTags.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/TableTags/TableTags.interface.ts index f301b42db5b..a5ea7f84668 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/TableTags/TableTags.interface.ts +++ b/openmetadata-ui/src/main/resources/ui/src/components/TableTags/TableTags.interface.ts @@ -43,6 +43,7 @@ export interface TableTagsComponentProps { type: TagSource; fetchTags: () => void; dataTestId: string; + placeholder: string; } export interface TagsCollection { diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TableTags/TableTags.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TableTags/TableTags.test.tsx index 54130d9e561..81298a3d4e1 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/TableTags/TableTags.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/TableTags/TableTags.test.tsx @@ -61,6 +61,7 @@ const classificationTags = [ ]; const mockProp = { + placeholder: 'Search Tags', dataTestId: 'tag-container', tags: { Classification: [], diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsContainer/tags-container.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsContainer/tags-container.interface.ts index ba8e95bc2c7..cc6972b253f 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsContainer/tags-container.interface.ts +++ b/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsContainer/tags-container.interface.ts @@ -31,4 +31,5 @@ export type TagsContainerProps = { onSelectionChange?: (selectedTags: Array) => void; onCancel?: (event: React.MouseEvent) => void; onAddButtonClick?: () => void; + placeholder?: string; }; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsContainer/tags-container.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsContainer/tags-container.tsx index 4adc1149696..96e18d3cbb9 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsContainer/tags-container.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsContainer/tags-container.tsx @@ -47,6 +47,7 @@ const TagsContainer: FunctionComponent = ({ showTags = true, showAddTagButton = false, showEditTagButton = false, + placeholder, showNoTagPlaceholder = true, }: TagsContainerProps) => { const { t } = useTranslation(); @@ -227,9 +228,13 @@ const TagsContainer: FunctionComponent = ({ defaultValue={selectedTagsInternal} mode="multiple" optionLabelProp="label" - placeholder={t('label.select-field', { - field: t('label.tag-plural'), - })} + placeholder={ + placeholder + ? placeholder + : t('label.select-field', { + field: t('label.tag-plural'), + }) + } removeIcon={ } diff --git a/openmetadata-ui/src/main/resources/ui/src/constants/Services.constant.ts b/openmetadata-ui/src/main/resources/ui/src/constants/Services.constant.ts index 733413316a8..b9c279e2e3c 100644 --- a/openmetadata-ui/src/main/resources/ui/src/constants/Services.constant.ts +++ b/openmetadata-ui/src/main/resources/ui/src/constants/Services.constant.ts @@ -223,7 +223,7 @@ export const SERVICE_CATEGORY_TYPE = { pipelineServices: 'pipelines', mlmodelServices: 'mlModels', metadataServices: 'metadata', - storageServices: 'storage', + storageServices: 'storages', }; export const servicesDisplayName: { [key: string]: string } = { diff --git a/openmetadata-ui/src/main/resources/ui/src/constants/constants.ts b/openmetadata-ui/src/main/resources/ui/src/constants/constants.ts index 8511da30fe9..5b6b3a3d300 100644 --- a/openmetadata-ui/src/main/resources/ui/src/constants/constants.ts +++ b/openmetadata-ui/src/main/resources/ui/src/constants/constants.ts @@ -39,6 +39,7 @@ export const DEFAULT_CHART_OPACITY = 1; export const HOVER_CHART_OPACITY = 0.3; export const SUPPORTED_FIELD_TYPES = ['string', 'markdown', 'integer']; +export const LOGGED_IN_USER_STORAGE_KEY = 'loggedInUsers'; export const TAG_VIEW_CAP = 33; export const FOLLOWERS_VIEW_CAP = 20;