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>
2025-09-25 08:50:18 +00:00 · 2023-04-25 21:20:57 +05:30 · 2023-04-25 21:20:57 +05:30 · 2344ab016b
commit 2344ab016b
parent e2eaddf1bb
10 changed files with 62 additions and 25 deletions
--- 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}
--- 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<ExploreProps> = ({
        <Space
          align="center"
          className="w-full h-full flex-center"
+          data-testid="no-search-results"
          direction="vertical"
          size={48}>
-          <SearchNotFound height={180} />
-          <div className="tw-text-center" data-testid="no-search-results">
-            <Typography.Text className="error-placeholder-text">
-              {`${t('label.no-data-asset-found-for')} `}
-              <span className="text-primary"> {searchQueryParam}</span>
-            </Typography.Text>
-          </div>
+          <ErrorPlaceHolder
+            className="mt-0-important"
+            type={ERROR_PLACEHOLDER_TYPE.FILTER}
+          />
        </Space>
      )}
    </PageLayoutV1>
--- 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<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(
-    () =>
-      !(
-        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<MyDataProps> = ({
            />
          ) : (
            !isFeedLoading && (
-              <WelcomeScreen onClose={() => setShowWelcomeScreen(false)} />
+              <WelcomeScreen onClose={() => updateWelcomeScreen(false)} />
            )
          )}
          {isFeedLoading ? <Loader /> : null}
--- 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"
--- 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 {
--- 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: [],
--- 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<EntityTags>) => void;
  onCancel?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
  onAddButtonClick?: () => void;
+  placeholder?: string;
 };
--- 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<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', {
-              field: t('label.tag-plural'),
-            })}
+            placeholder={
+              placeholder
+                ? placeholder
+                : t('label.select-field', {
+                    field: t('label.tag-plural'),
+                  })
+            }
            removeIcon={
              <CloseOutlined data-testid="remove-tags" height={8} width={8} />
            }
--- 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 } = {
--- 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;