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 <ashish@getcollate.io>

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}

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 { Button, Card, Col, Row, Space, Tabs } from 'antd';
-import { ReactComponent as SearchNotFound } from 'assets/svg/nothing_here.svg';
+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<ExploreProps> = ({
         <Space
           align="center"
           className="w-full h-full flex-center"
+          data-testid="no-search-results"
           direction="vertical"
           size={48}>
-          <SearchNotFound height={180} />
+          <ErrorPlaceHolder
-          <div className="tw-text-center" data-testid="no-search-results">
+            className="mt-0-important"
-            <Typography.Text className="error-placeholder-text">
+            type={ERROR_PLACEHOLDER_TYPE.FILTER}
-              {`${t('label.no-data-asset-found-for')} `}
+          />
-              <span className="text-primary"> {searchQueryParam}</span>
-            </Typography.Text>
-          </div>
         </Space>
       )}
     </PageLayoutV1>

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<MyDataProps> = ({
   const [elementRef, isInView] = useInfiniteScroll(observerOptions);
   const [feedFilter, setFeedFilter] = useState(FeedFilter.OWNER);
   const [threadType, setThreadType] = useState<ThreadType>();
-  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<MyDataProps> = ({
 
   useEffect(() => {
     isMounted.current = true;
+    updateWelcomeScreen(!usernameExistsInCookie);
+
+    return () => updateWelcomeScreen(false);
   }, []);
 
   const handleFeedFilterChange = useCallback(
@@ -229,14 +257,8 @@ const MyData: React.FC<MyDataProps> = ({
   const newFeedsLength = activityFeeds && activityFeeds.length;
 
   const showActivityFeedList = useMemo(
-    () =>
+    () => !(!isFeedLoading && showWelcomeScreen),
-      !(
+    [isFeedLoading, showWelcomeScreen]
-        feedFilter === FeedFilter.OWNER &&
-        feedData.length === 0 &&
-        !isFeedLoading &&
-        showWelcomeScreen
-      ),
-    [feedFilter, feedData, isFeedLoading, showWelcomeScreen]
   );
 
   return (
@@ -267,7 +289,7 @@ const MyData: React.FC<MyDataProps> = ({
             />
           ) : (
             !isFeedLoading && (
-              <WelcomeScreen onClose={() => setShowWelcomeScreen(false)} />
+              <WelcomeScreen onClose={() => updateWelcomeScreen(false)} />
             )
           )}
           {isFeedLoading ? <Loader /> : null}

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"

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 {

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: [],

openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsContainer/tags-container.interface.ts

@@ -31,4 +31,5 @@ export type TagsContainerProps = {
   onSelectionChange?: (selectedTags: Array<EntityTags>) => void;
   onCancel?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
   onAddButtonClick?: () => void;
+  placeholder?: string;
 };

openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsContainer/tags-container.tsx

@@ -47,6 +47,7 @@ const TagsContainer: FunctionComponent<TagsContainerProps> = ({
   showTags = true,
   showAddTagButton = false,
   showEditTagButton = false,
+  placeholder,
   showNoTagPlaceholder = true,
 }: TagsContainerProps) => {
   const { t } = useTranslation();
@@ -227,9 +228,13 @@ const TagsContainer: FunctionComponent<TagsContainerProps> = ({
             defaultValue={selectedTagsInternal}
             mode="multiple"
             optionLabelProp="label"
-            placeholder={t('label.select-field', {
+            placeholder={
-              field: t('label.tag-plural'),
+              placeholder
-            })}
+                ? placeholder
+                : t('label.select-field', {
+                    field: t('label.tag-plural'),
+                  })
+            }
             removeIcon={
               <CloseOutlined data-testid="remove-tags" height={8} width={8} />
             }

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 } = {

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;