ui: fixed broken tour feature (#13568)

* ui: fixed broken tour feature

* translation sync

* updated the status of import/update glossary via csv

* fixed tour

openmetadata-ui/src/main/resources/ui/src/components/AppBar/Suggestions.tsx

@@ -44,6 +44,7 @@ import {
   TagSource,
   TopicSource,
 } from '../GlobalSearchProvider/GlobalSearchSuggestions/GlobalSearchSuggestions.interface';
+import { useTourProvider } from '../TourProvider/TourProvider';
 
 type SuggestionProp = {
   searchText: string;
@@ -58,6 +59,7 @@ const Suggestions = ({
   searchCriteria,
 }: SuggestionProp) => {
   const { t } = useTranslation();
+  const { isTourOpen } = useTourProvider();
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [options, setOptions] = useState<Array<Option>>([]);
   const [tableSuggestions, setTableSuggestions] = useState<TableSource[]>([]);
@@ -210,8 +212,10 @@ const Suggestions = ({
   }, [searchText, searchCriteria]);
 
   useEffect(() => {
-    if (!isMounting.current && searchText) {
+    if (!isMounting.current && searchText && !isTourOpen) {
       fetchSearchData();
+    } else {
+      setIsLoading(false);
     }
   }, [searchText, searchCriteria]);
 
@@ -224,7 +228,7 @@ const Suggestions = ({
     return <Loader />;
   }
 
-  if (options.length === 0) {
+  if (options.length === 0 && !isTourOpen) {
     return (
       <Typography.Text>
         <Transi18next

openmetadata-ui/src/main/resources/ui/src/components/Glossary/ImportResult/GlossaryImportResult.component.tsx

@@ -19,6 +19,7 @@ import { usePapaParse } from 'react-papaparse';
 import { ReactComponent as FailBadgeIcon } from '../../../assets/svg/fail-badge.svg';
 import { ReactComponent as SuccessBadgeIcon } from '../../../assets/svg/success-badge.svg';
 import Table from '../../../components/common/Table/Table';
+import { GLOSSARY_IMPORT_STATUS } from '../../../constants/Glossary.constant';
 import {
   CSVImportResult,
   Status,
@@ -53,15 +54,7 @@ export const GlossaryImportResult: FC<Props> = ({ csvImportResult }) => {
               data-testid="status-container"
               // Added max width because in case of full success we don't want to occupied full width
               style={{ maxWidth: 200 }}>
-              {status === Status.Success && (
+              {status === Status.Failure ? (
-                <SuccessBadgeIcon
-                  className="m-t-xss"
-                  data-testid="success-badge"
-                  height={16}
-                  width={16}
-                />
-              )}
-              {status === Status.Failure && (
                 <>
                   <FailBadgeIcon
                     className="m-t-xss"
@@ -71,6 +64,13 @@ export const GlossaryImportResult: FC<Props> = ({ csvImportResult }) => {
                   />
                   {record.details}
                 </>
+              ) : (
+                <SuccessBadgeIcon
+                  className="m-t-xss"
+                  data-testid="success-badge"
+                  height={16}
+                  width={16}
+                />
               )}
             </Space>
           );
@@ -201,10 +201,9 @@ export const GlossaryImportResult: FC<Props> = ({ csvImportResult }) => {
               (value) => ({
                 ...value,
                 key: value['name*'],
-                status:
+                status: GLOSSARY_IMPORT_STATUS.includes(value['details'] ?? '')
-                  value['details'] === 'Entity created'
+                  ? Status.Success
-                    ? Status.Success
+                  : Status.Failure,
-                    : Status.Failure,
               })
             )
           );

openmetadata-ui/src/main/resources/ui/src/components/Modals/TourEndModal/TourEndModal.tsx

@@ -37,6 +37,7 @@ const TourEndModal = ({ onSave, visible }: TourEndModalProps) => {
         <Col className="mt-4" span={24}>
           <SVGIcons
             alt={t('label.open-metadata-logo')}
+            height="70"
             icon={Icons.LOGO_SMALL}
             width="70"
           />

openmetadata-ui/src/main/resources/ui/src/components/tour/Tour.tsx

@@ -47,18 +47,22 @@ const Tour = ({ steps }: { steps: TourSteps[] }) => {
           accentColor={PRIMERY_COLOR}
           inViewThreshold={200}
           lastStepNextButton={
-            <Button onClick={() => setShowTourEndModal(true)}>
+            <Button
-              <svg viewBox="0 0 18.4 14.4">
+              icon={
-                <path
+                <svg viewBox="0 0 18.4 14.4" width={16}>
-                  d="M17 7.2H1M10.8 1 17 7.2l-6.2 6.2"
+                  <path
-                  fill="none"
+                    d="M17 7.2H1M10.8 1 17 7.2l-6.2 6.2"
-                  stroke="currentColor"
+                    fill="none"
-                  strokeLinecap="round"
+                    stroke="currentColor"
-                  strokeMiterlimit={10}
+                    strokeLinecap="round"
-                  strokeWidth={2}
+                    strokeMiterlimit={10}
-                />
+                    strokeWidth={2}
-              </svg>
+                  />
-            </Button>
+                </svg>
+              }
+              type="text"
+              onClick={() => setShowTourEndModal(true)}
+            />
           }
           maskColor="#302E36"
           playTour={isTourOpen}

openmetadata-ui/src/main/resources/ui/src/constants/Glossary.constant.ts

@@ -0,0 +1,13 @@
+/*
+ *  Copyright 2023 Collate.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+export const GLOSSARY_IMPORT_STATUS = ['Entity created', 'Entity updated'];

openmetadata-ui/src/main/resources/ui/src/constants/mockTourData.constants.ts

@@ -11,6 +11,8 @@
  *  limitations under the License.
  */
 
+import { SearchIndex } from '../enums/search.enum';
+
 /* eslint-disable max-len */
 
 export const MOCK_ASSETS_COUNTS = {
@@ -1913,3 +1915,17 @@ export const mockSearchData = {
     },
   },
 };
+
+export const MOCK_EXPLORE_PAGE_COUNT = {
+  [SearchIndex.TABLE]: mockSearchData.hits.total.value,
+  [SearchIndex.TOPIC]: 0,
+  [SearchIndex.DASHBOARD]: 0,
+  [SearchIndex.PIPELINE]: 0,
+  [SearchIndex.MLMODEL]: 0,
+  [SearchIndex.CONTAINER]: 0,
+  [SearchIndex.STORED_PROCEDURE]: 0,
+  [SearchIndex.DASHBOARD_DATA_MODEL]: 0,
+  [SearchIndex.GLOSSARY]: 0,
+  [SearchIndex.TAG]: 0,
+  [SearchIndex.SEARCH_INDEX]: 0,
+};

openmetadata-ui/src/main/resources/ui/src/locale/languages/de-de.json

@@ -970,7 +970,7 @@
     "table-entity-text": "Tabelle {{entityText}}",
     "table-lowercase": "tabelle",
     "table-lowercase-plural": "tabellen",
-    "table-partitioned": "Tabelle partitioniert",
+    "table-partitioned": "Table Partitioned",
     "table-plural": "Tabellen",
     "table-profile": "Tabellenprofil",
     "table-tests-summary": "Tabellentestzusammenfassung",

openmetadata-ui/src/main/resources/ui/src/pages/explore/ExplorePageV1.component.tsx

@@ -42,7 +42,10 @@ import {
   INITIAL_SORT_FIELD,
   tabsInfo,
 } from '../../constants/explore.constants';
-import { mockSearchData } from '../../constants/mockTourData.constants';
+import {
+  mockSearchData,
+  MOCK_EXPLORE_PAGE_COUNT,
+} from '../../constants/mockTourData.constants';
 import { SORT_ORDER } from '../../enums/common.enum';
 import { SearchIndex } from '../../enums/search.enum';
 import { Aggregations, SearchResponse } from '../../interface/search.interface';
@@ -286,7 +289,7 @@ const ExplorePageV1: FunctionComponent = () => {
     }
   }, [parsedSearch]);
 
-  useEffect(() => {
+  const fetchEntityCount = () => {
     const updatedQuickFilters = getAdvancedSearchQuickFilters();
 
     const combinedQueryFilter = getCombinedQueryFilterObject(
@@ -379,6 +382,14 @@ const ExplorePageV1: FunctionComponent = () => {
         showErrorToast(err);
       })
       .finally(() => setIsLoading(false));
+  };
+
+  useEffect(() => {
+    if (isTourOpen) {
+      setSearchHitCounts(MOCK_EXPLORE_PAGE_COUNT);
+    } else {
+      fetchEntityCount();
+    }
   }, [
     parsedSearch.quickFilter,
     queryFilter,
@@ -419,7 +430,7 @@ const ExplorePageV1: FunctionComponent = () => {
       showDeleted={showDeleted}
       sortOrder={sortOrder}
       sortValue={sortValue}
-      tabCounts={searchHitCounts}
+      tabCounts={isTourOpen ? MOCK_EXPLORE_PAGE_COUNT : searchHitCounts}
       tabItems={tabItems}
       onChangeAdvancedSearchQuickFilters={handleAdvanceSearchQuickFiltersChange}
       onChangePage={handlePageChange}