fix #14661: Improve Messages in the UI (#14805)

* Improve Messages in the UI * fix failing tests & add locale files * change message to locale * add locale files * change no pipeline message * add message for test suite pipeline & kpi * address comments * add locale files * change delete message * fix failing test * change incorrect spelling mistakes
open-metadata · Jan 24, 2024 · 020254a · 020254a
1 parent 2f58ec3
commit 020254a
Show file tree

Hide file tree

Showing 36 changed files with 362 additions and 134 deletions.
diff --git a/...esources/ui/src/components/ActivityFeed/ActivityFeedList/ActivityFeedListV1.component.tsx b/...esources/ui/src/components/ActivityFeed/ActivityFeedList/ActivityFeedListV1.component.tsx
@@ -12,7 +12,7 @@
  */
 import { Typography } from 'antd';
 import { isEmpty } from 'lodash';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { ReactNode, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ReactComponent as FeedEmptyIcon } from '../../../assets/svg/activity-feed-no-data-placeholder.svg';
 import ErrorPlaceHolder from '../../../components/common/ErrorWithPlaceholder/ErrorPlaceHolder';
@@ -32,7 +32,7 @@ interface ActivityFeedListV1Props {
   activeFeedId?: string;
   hidePopover: boolean;
   isForFeedTab?: boolean;
-  emptyPlaceholderText: string;
+  emptyPlaceholderText: ReactNode;
   tab: ActivityFeedTabs;
 }
 

diff --git a/...in/resources/ui/src/components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.component.tsx b/...in/resources/ui/src/components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.component.tsx
@@ -22,7 +22,7 @@ import {
   useState,
 } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useHistory, useParams } from 'react-router-dom';
+import { Link, useHistory, useParams } from 'react-router-dom';
 import { ReactComponent as AllActivityIcon } from '../../../assets/svg/all-activity-v2.svg';
 import { ReactComponent as CheckIcon } from '../../../assets/svg/ic-check.svg';
 import { ReactComponent as MentionIcon } from '../../../assets/svg/ic-mentions.svg';
@@ -31,6 +31,7 @@ import { ReactComponent as TaskListIcon } from '../../../assets/svg/task-ic.svg'
 import {
   COMMON_ICON_STYLES,
   ICON_DIMENSION,
+  ROUTES,
 } from '../../../constants/constants';
 import { observerOptions } from '../../../constants/Mydata.constants';
 import { EntityTabs, EntityType } from '../../../enums/entity.enum';
@@ -43,7 +44,11 @@ import {
 import { useAuth } from '../../../hooks/authHooks';
 import { useElementInView } from '../../../hooks/useElementInView';
 import { getAllFeeds, getFeedCount } from '../../../rest/feedsAPI';
-import { getCountBadge, getEntityDetailLink } from '../../../utils/CommonUtils';
+import {
+  getCountBadge,
+  getEntityDetailLink,
+  Transi18next,
+} from '../../../utils/CommonUtils';
 import {
   ENTITY_LINK_SEPARATOR,
   getEntityFeedLink,
@@ -126,11 +131,21 @@ export const ActivityFeedTab = ({
 
   const placeholderText = useMemo(() => {
     if (activeTab === ActivityFeedTabs.ALL) {
-      return t('message.no-activity-feed');
+      return (
+        <Transi18next
+          i18nKey="message.no-activity-feed"
+          renderElement={
+            <Link rel="noreferrer" to={{ pathname: ROUTES.EXPLORE }} />
+          }
+          values={{
+            explored: t('message.have-not-explored-yet'),
+          }}
+        />
+      );
     } else if (activeTab === ActivityFeedTabs.MENTIONS) {
       return t('message.no-mentions');
     } else {
-      return t('message.no-tasks-assigned');
+      return t('message.no-open-tasks');
     }
   }, [activeTab]);
 

diff --git a/...a-ui/src/main/resources/ui/src/components/ClassificationDetails/ClassificationDetails.tsx b/...a-ui/src/main/resources/ui/src/components/ClassificationDetails/ClassificationDetails.tsx
@@ -541,7 +541,12 @@ const ClassificationDetails = forwardRef(
             dataSource={tags}
             loading={isTagsLoading}
             locale={{
-              emptyText: <ErrorPlaceHolder className="m-y-md" />,
+              emptyText: (
+                <ErrorPlaceHolder
+                  className="m-y-md"
+                  placeholderText={t('message.no-tags-description')}
+                />
+              ),
             }}
             pagination={false}
             rowClassName={(record) => (record.disabled ? 'opacity-60' : '')}

diff --git a/...tadata-ui/src/main/resources/ui/src/components/CustomEntityDetail/CustomPropertyTable.tsx b/...tadata-ui/src/main/resources/ui/src/components/CustomEntityDetail/CustomPropertyTable.tsx
@@ -19,7 +19,7 @@ import { ReactComponent as IconEdit } from '../../assets/svg/edit-new.svg';
 import { ReactComponent as IconDelete } from '../../assets/svg/ic-delete.svg';
 import ErrorPlaceHolder from '../../components/common/ErrorWithPlaceholder/ErrorPlaceHolder';
 import Table from '../../components/common/Table/Table';
-import { CUSTOM_PROPERTIES_DOCS } from '../../constants/docs.constants';
+import { ADD_CUSTOM_PROPERTIES_DOCS } from '../../constants/docs.constants';
 import { NO_PERMISSION_FOR_ACTION } from '../../constants/HelperTextUtil';
 import { ERROR_PLACEHOLDER_TYPE, OPERATION } from '../../enums/common.enum';
 import { CustomProperty } from '../../generated/entity/type';
@@ -165,7 +165,7 @@ export const CustomPropertyTable: FC<CustomPropertyTableProp> = ({
           emptyText: (
             <ErrorPlaceHolder
               className="mt-xs"
-              doc={CUSTOM_PROPERTIES_DOCS}
+              doc={ADD_CUSTOM_PROPERTIES_DOCS}
               heading={t('label.property')}
               permission={hasAccess}
               type={ERROR_PLACEHOLDER_TYPE.CREATE}

diff --git a/...adata-ui/src/main/resources/ui/src/components/DataInsightDetail/EmptyGraphPlaceholder.tsx b/...adata-ui/src/main/resources/ui/src/components/DataInsightDetail/EmptyGraphPlaceholder.tsx
@@ -12,41 +12,24 @@
  */
 
 import { Typography } from 'antd';
-import React, { ReactElement } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
-import { DATA_INSIGHT_DOCS } from '../../constants/docs.constants';
+import React, { ReactElement, ReactNode } from 'react';
 import { ERROR_PLACEHOLDER_TYPE, SIZE } from '../../enums/common.enum';
-import { Transi18next } from '../../utils/CommonUtils';
 import ErrorPlaceHolder from '../common/ErrorWithPlaceholder/ErrorPlaceHolder';
 
-export const EmptyGraphPlaceholder = ({ icon }: { icon?: ReactElement }) => {
-  const { t } = useTranslation();
-
+export const EmptyGraphPlaceholder = ({
+  icon,
+  message,
+}: {
+  icon?: ReactElement;
+  message?: ReactNode;
+}) => {
   return (
     <ErrorPlaceHolder
       icon={icon}
       size={SIZE.MEDIUM}
       type={ERROR_PLACEHOLDER_TYPE.CUSTOM}>
       <Typography.Paragraph style={{ marginBottom: '0' }}>
-        {t('message.adding-new-entity-is-easy-just-give-it-a-spin', {
-          entity: t('label.data-insight'),
-        })}
-      </Typography.Paragraph>
-      <Typography.Paragraph>
-        <Transi18next
-          i18nKey="message.refer-to-our-doc"
-          renderElement={
-            <Link
-              rel="noreferrer"
-              target="_blank"
-              to={{ pathname: DATA_INSIGHT_DOCS }}
-            />
-          }
-          values={{
-            doc: t('label.doc-plural-lowercase'),
-          }}
-        />
+        {message}
       </Typography.Paragraph>
     </ErrorPlaceHolder>
   );

diff --git a/...c/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx b/...c/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx
@@ -355,6 +355,7 @@ const GlossaryTermTab = ({
         doc={GLOSSARIES_DOCS}
         heading={t('label.glossary-term')}
         permission={permissions.Create}
+        placeholderText={t('message.no-glossary-term')}
         type={
           permissions.Create && glossaryTermStatus === Status.Approved
             ? ERROR_PLACEHOLDER_TYPE.CREATE

diff --git a/...c/components/Glossary/GlossaryUpdateConfirmationModal/GlossaryUpdateConfirmationModal.tsx b/...c/components/Glossary/GlossaryUpdateConfirmationModal/GlossaryUpdateConfirmationModal.tsx
@@ -185,7 +185,7 @@ export const GlossaryUpdateConfirmationModal = ({
                   />
                   <Alert
                     className="m-t-sm"
-                    message={t('message.glossary-tag-assignement-help-message')}
+                    message={t('message.glossary-tag-assignment-help-message')}
                     type="warning"
                   />
                 </>

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/KPIWidget/KPIWidget.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/KPIWidget/KPIWidget.component.tsx
@@ -61,9 +61,7 @@ const EmptyPlaceholder = () => {
       <KPIEmptyIcon width={SIZE.X_SMALL} />
       <div className="m-t-xs text-center">
         <Typography.Paragraph style={{ marginBottom: '0' }}>
-          {t('message.adding-new-entity-is-easy-just-give-it-a-spin', {
-            entity: t('label.data-insight'),
-          })}
+          {t('message.no-kpi')}
         </Typography.Paragraph>
         <Typography.Paragraph>
           <Transi18next

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/MyData/RightSidebar/FollowingWidget.tsx b/openmetadata-ui/src/main/resources/ui/src/components/MyData/RightSidebar/FollowingWidget.tsx
@@ -18,6 +18,7 @@ import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { ReactComponent as FollowingEmptyIcon } from '../../../assets/svg/following-no-data-placeholder.svg';
 import { getUserPath } from '../../../constants/constants';
+import { FOLLOW_DATA_ASSET } from '../../../constants/docs.constants';
 import { ERROR_PLACEHOLDER_TYPE, SIZE } from '../../../enums/common.enum';
 import { EntityReference } from '../../../generated/entity/type';
 import { WidgetCommonProps } from '../../../pages/CustomizablePage/CustomizablePage.interface';
@@ -99,6 +100,13 @@ function FollowingWidget({
               <Typography.Paragraph>
                 {t('message.not-followed-anything')}
               </Typography.Paragraph>
+              <Link
+                className="link-title"
+                rel="noreferrer"
+                target="_blank"
+                to={FOLLOW_DATA_ASSET}>
+                {t('label.learn-more')}
+              </Link>
             </ErrorPlaceHolder>
           </div>
         }

diff --git a/...urces/ui/src/components/TestSuite/TestSuitePipelineTab/TestSuitePipelineTab.component.tsx b/...urces/ui/src/components/TestSuite/TestSuitePipelineTab/TestSuitePipelineTab.component.tsx
@@ -582,8 +582,9 @@ const TestSuitePipelineTab = ({ testSuite }: Props) => {
           }
           heading={t('label.pipeline')}
           permission={createPermission}
-          type={ERROR_PLACEHOLDER_TYPE.ASSIGN}
-        />
+          type={ERROR_PLACEHOLDER_TYPE.ASSIGN}>
+          {t('message.no-table-pipeline')}
+        </ErrorPlaceHolder>
       ) : (
         <ErrorPlaceHolder type={ERROR_PLACEHOLDER_TYPE.NO_DATA} />
       ),

diff --git a/...ain/resources/ui/src/components/TotalDataAssetsWidget/TotalDataAssetsWidget.component.tsx b/...ain/resources/ui/src/components/TotalDataAssetsWidget/TotalDataAssetsWidget.component.tsx
@@ -22,6 +22,7 @@ import {
   useState,
 } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
 import {
   Area,
   AreaChart,
@@ -34,6 +35,7 @@ import {
 import { ReactComponent as TotalDataAssetsEmptyIcon } from '../../assets/svg/data-insight-no-data-placeholder.svg';
 import { CHART_WIDGET_DAYS_DURATION } from '../../constants/constants';
 import { TOTAL_ENTITY_CHART_COLOR } from '../../constants/DataInsight.constants';
+import { DATA_INSIGHT_GUIDE_DOCS } from '../../constants/docs.constants';
 import { SIZE } from '../../enums/common.enum';
 import { WidgetWidths } from '../../enums/CustomizablePage.enum';
 import { DataReportIndex } from '../../generated/dataInsight/dataInsightChart';
@@ -43,6 +45,7 @@ import {
 } from '../../generated/dataInsight/dataInsightChartResult';
 import { getAggregateChartData } from '../../rest/DataInsightAPI';
 import { axisTickFormatter } from '../../utils/ChartUtils';
+import { Transi18next } from '../../utils/CommonUtils';
 import { getGraphDataByEntityType } from '../../utils/DataInsightUtils';
 import {
   getCurrentMillis,
@@ -148,6 +151,21 @@ const TotalDataAssetsWidget = ({
                   width={SIZE.X_SMALL}
                 />
               }
+              message={
+                <Transi18next
+                  i18nKey="message.no-total-data-assets"
+                  renderElement={
+                    <Link
+                      rel="noreferrer"
+                      target="_blank"
+                      to={{ pathname: DATA_INSIGHT_GUIDE_DOCS }}
+                    />
+                  }
+                  values={{
+                    setup: t('message.setup-data-insights'),
+                  }}
+                />
+              }
             />
           </Col>
         </Row>

diff --git a/...ata-ui/src/main/resources/ui/src/components/Widgets/FeedsWidget/FeedsWidget.component.tsx b/...ata-ui/src/main/resources/ui/src/components/Widgets/FeedsWidget/FeedsWidget.component.tsx
@@ -15,11 +15,12 @@ import { Button, Space, Tabs, Typography } from 'antd';
 import { isUndefined } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useHistory } from 'react-router-dom';
+import { Link, useHistory } from 'react-router-dom';
 import ActivityFeedListV1 from '../../../components/ActivityFeed/ActivityFeedList/ActivityFeedListV1.component';
 import { useActivityFeedProvider } from '../../../components/ActivityFeed/ActivityFeedProvider/ActivityFeedProvider';
 import { ActivityFeedTabs } from '../../../components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.interface';
 import { useTourProvider } from '../../../components/TourProvider/TourProvider';
+import { ROUTES } from '../../../constants/constants';
 import { mockFeedData } from '../../../constants/mockTourData.constants';
 import { EntityTabs, EntityType } from '../../../enums/entity.enum';
 import { FeedFilter } from '../../../enums/mydata.enum';
@@ -29,7 +30,11 @@ import {
 } from '../../../generated/entity/feed/thread';
 import { WidgetCommonProps } from '../../../pages/CustomizablePage/CustomizablePage.interface';
 import { getFeedsWithFilter } from '../../../rest/feedsAPI';
-import { getCountBadge, getEntityDetailLink } from '../../../utils/CommonUtils';
+import {
+  getCountBadge,
+  getEntityDetailLink,
+  Transi18next,
+} from '../../../utils/CommonUtils';
 import { showErrorToast } from '../../../utils/ToastUtils';
 import { useAuthContext } from '../../Auth/AuthProviders/AuthProvider';
 import FeedsFilterPopover from '../../common/FeedsFilterPopover/FeedsFilterPopover.component';
@@ -148,7 +153,20 @@ const FeedsWidget = ({
             children: (
               <>
                 <ActivityFeedListV1
-                  emptyPlaceholderText={t('message.no-activity-feed')}
+                  emptyPlaceholderText={
+                    <Transi18next
+                      i18nKey="message.no-activity-feed"
+                      renderElement={
+                        <Link
+                          rel="noreferrer"
+                          to={{ pathname: ROUTES.EXPLORE }}
+                        />
+                      }
+                      values={{
+                        explored: t('message.have-not-explored-yet'),
+                      }}
+                    />
+                  }
                   feedList={isTourOpen ? mockFeedData : threads}
                   hidePopover={isEditView}
                   isLoading={loading && !isTourOpen}
@@ -187,7 +205,7 @@ const FeedsWidget = ({
             children: (
               <>
                 <ActivityFeedListV1
-                  emptyPlaceholderText={t('message.no-tasks-assigned')}
+                  emptyPlaceholderText={t('message.no-open-tasks')}
                   feedList={threads}
                   hidePopover={isEditView}
                   isLoading={loading}

diff --git a/...etadata-ui/src/main/resources/ui/src/components/Widgets/RecentlyViewed/RecentlyViewed.tsx b/...etadata-ui/src/main/resources/ui/src/components/Widgets/RecentlyViewed/RecentlyViewed.tsx
@@ -18,6 +18,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { ReactComponent as RecentlyViewedEmptyIcon } from '../../../assets/svg/recently-viewed-no-data-placeholder.svg';
+import { RECENTLY_VIEWED } from '../../../constants/docs.constants';
 import { ERROR_PLACEHOLDER_TYPE, SIZE } from '../../../enums/common.enum';
 import { EntityReference } from '../../../generated/type/entityReference';
 import { WidgetCommonProps } from '../../../pages/CustomizablePage/CustomizablePage.interface';
@@ -114,6 +115,13 @@ const RecentlyViewed = ({
                 <Typography.Paragraph>
                   {t('message.no-recently-viewed-date')}
                 </Typography.Paragraph>
+                <Link
+                  className="link-title"
+                  rel="noreferrer"
+                  target="_blank"
+                  to={RECENTLY_VIEWED}>
+                  {t('label.learn-more')}
+                </Link>
               </ErrorPlaceHolder>
             </div>
           ) : (

diff --git a/...i/src/main/resources/ui/src/components/common/CustomPropertyTable/CustomPropertyTable.tsx b/...i/src/main/resources/ui/src/components/common/CustomPropertyTable/CustomPropertyTable.tsx
@@ -11,12 +11,14 @@
  *  limitations under the License.
  */
 
-import { Skeleton, Typography } from 'antd';
+import { Skeleton } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import { AxiosError } from 'axios';
 import { isEmpty, isUndefined } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { CUSTOM_PROPERTIES_DOCS } from '../../../constants/docs.constants';
 import { EntityField } from '../../../constants/Feeds.constants';
 import { ERROR_PLACEHOLDER_TYPE } from '../../../enums/common.enum';
 import { EntityType } from '../../../enums/entity.enum';
@@ -26,6 +28,7 @@ import {
   Type,
 } from '../../../generated/entity/type';
 import { getTypeByFQN } from '../../../rest/metadataTypeAPI';
+import { Transi18next } from '../../../utils/CommonUtils';
 import { columnSorter, getEntityName } from '../../../utils/EntityUtils';
 import {
   getChangedEntityNewValue,
@@ -209,13 +212,24 @@ export const CustomPropertyTable = <T extends ExtentionEntitiesKeys>({
   ) {
     return (
       <div className="flex-center tab-content-height">
-        <ErrorPlaceHolder className={className}>
-          <Typography.Paragraph>
-            {t('message.adding-new-entity-is-easy-just-give-it-a-spin', {
-              entity: t('label.custom-property-plural'),
-            })}
-          </Typography.Paragraph>
-        </ErrorPlaceHolder>
+        <ErrorPlaceHolder
+          className={className}
+          placeholderText={
+            <Transi18next
+              i18nKey="message.no-custom-properties-table"
+              renderElement={
+                <Link
+                  rel="noreferrer"
+                  target="_blank"
+                  to={{ pathname: CUSTOM_PROPERTIES_DOCS }}
+                />
+              }
+              values={{
+                docs: 'label.doc-plural-lowercase',
+              }}
+            />
+          }
+        />
       </div>
     );
   }