fix(ui): service, database and database schema page bugs (#12673)

* fixed bugs on service details page

* fixed bugs on database details page
refactored database details page code

* fixed bugs on database schema page

* reverted the changes for code refactoring on dataset details page

openmetadata-ui/src/main/resources/ui/src/pages/DatabaseDetailsPage/DatabaseDetailsPage.tsx

@@ -40,7 +40,7 @@ import { compare, Operation } from 'fast-json-patch';
 import { LabelType } from 'generated/entity/data/table';
 import { Include } from 'generated/type/include';
 import { State, TagSource } from 'generated/type/tagLabel';
-import { isNil, isUndefined } from 'lodash';
+import { isEmpty, isNil, isUndefined } from 'lodash';
 import { observer } from 'mobx-react';
 import { EntityTags } from 'Models';
 import React, {
@@ -61,6 +61,7 @@ import {
 } from 'rest/databaseAPI';
 import { getFeedCount, postThread } from 'rest/feedsAPI';
 import { handleDataAssetAfterDeleteAction } from 'utils/Assets/AssetsUtils';
+import { getEntityMissingError } from 'utils/CommonUtils';
 import { default as appState } from '../../AppState';
 import { FQN_SEPARATOR_CHAR } from '../../constants/char.constants';
 import {
@@ -87,7 +88,6 @@ import {
 } from '../../utils/EntityUtils';
 import { getEntityFieldThreadCounts } from '../../utils/FeedUtils';
 import { DEFAULT_ENTITY_PERMISSION } from '../../utils/PermissionsUtils';
-import { getErrorText } from '../../utils/StringsUtils';
 import {
   getTagsWithoutTier,
   getTierTags,
@@ -122,7 +122,6 @@ const DatabaseDetails: FunctionComponent = () => {
   const [databaseSchemaInstanceCount, setSchemaInstanceCount] =
     useState<number>(0);
 
-  const [error, setError] = useState('');
   const [feedCount, setFeedCount] = useState<number>(0);
   const [entityFieldThreadCount, setEntityFieldThreadCount] = useState<
     EntityFieldThreadCount[]
@@ -149,7 +148,7 @@ const DatabaseDetails: FunctionComponent = () => {
       );
       setDatabasePermission(response);
     } catch (error) {
-      showErrorToast(error as AxiosError);
+      // Error
     } finally {
       setIsLoading(false);
     }
@@ -177,13 +176,8 @@ const DatabaseDetails: FunctionComponent = () => {
           }
           resolve();
         })
-        .catch((err: AxiosError) => {
-          showErrorToast(
-            err,
-            t('server.entity-fetch-error', {
-              entity: t('label.database schema'),
-            })
-          );
+        .catch(() => {
+          // Error
 
           reject();
         })
@@ -218,8 +212,8 @@ const DatabaseDetails: FunctionComponent = () => {
           throw t('server.unexpected-response');
         }
       })
-      .catch((err: AxiosError) => {
-        showErrorToast(err, t('server.entity-feed-fetch-error'));
+      .catch(() => {
+        // Error
       });
   };
 
@@ -236,19 +230,10 @@ const DatabaseDetails: FunctionComponent = () => {
           setServiceType(serviceType);
           setShowDeletedSchemas(res.deleted ?? false);
           fetchDatabaseSchemasAndDBTModels();
-        } else {
-          throw t('server.unexpected-response');
         }
       })
-      .catch((err: AxiosError) => {
-        const errMsg = getErrorText(
-          err,
-          t('server.entity-fetch-error', {
-            entity: t('label.database'),
-          })
-        );
-        setError(errMsg);
-        showErrorToast(errMsg);
+      .catch(() => {
+        // Error
       })
       .finally(() => {
         setIsLoading(false);
@@ -735,14 +720,6 @@ const DatabaseDetails: FunctionComponent = () => {
     return <Loader />;
   }
 
-  if (error) {
-    return (
-      <ErrorPlaceHolder>
-        <p data-testid="error-message">{error}</p>
-      </ErrorPlaceHolder>
-    );
-  }
-
   if (!(databasePermission.ViewAll || databasePermission.ViewBasic)) {
     return <ErrorPlaceHolder type={ERROR_PLACEHOLDER_TYPE.PERMISSION} />;
   }
@@ -753,42 +730,48 @@ const DatabaseDetails: FunctionComponent = () => {
       pageTitle={t('label.entity-detail-plural', {
         entity: getEntityName(database),
       })}>
-      <Row gutter={[0, 12]}>
-        <Col className="p-x-lg" span={24}>
-          <DataAssetsHeader
-            isRecursiveDelete
-            afterDeleteAction={handleDataAssetAfterDeleteAction}
-            dataAsset={database}
-            entityType={EntityType.DATABASE}
-            permissions={databasePermission}
-            onDisplayNameUpdate={handleUpdateDisplayName}
-            onOwnerUpdate={handleUpdateOwner}
-            onRestoreDataAsset={handleRestoreDatabase}
-            onTierUpdate={handleUpdateTier}
-          />
-        </Col>
-        <Col span={24}>
-          <Tabs
-            activeKey={activeTab ?? EntityTabs.SCHEMA}
-            className="entity-details-page-tabs"
-            data-testid="tabs"
-            items={tabs}
-            onChange={activeTabHandler}
-          />
-        </Col>
+      {isEmpty(database) ? (
+        <ErrorPlaceHolder className="m-0">
+          {getEntityMissingError(EntityType.DATABASE, databaseFQN)}
+        </ErrorPlaceHolder>
+      ) : (
+        <Row gutter={[0, 12]}>
+          <Col className="p-x-lg" span={24}>
+            <DataAssetsHeader
+              isRecursiveDelete
+              afterDeleteAction={handleDataAssetAfterDeleteAction}
+              dataAsset={database}
+              entityType={EntityType.DATABASE}
+              permissions={databasePermission}
+              onDisplayNameUpdate={handleUpdateDisplayName}
+              onOwnerUpdate={handleUpdateOwner}
+              onRestoreDataAsset={handleRestoreDatabase}
+              onTierUpdate={handleUpdateTier}
+            />
+          </Col>
+          <Col span={24}>
+            <Tabs
+              activeKey={activeTab ?? EntityTabs.SCHEMA}
+              className="entity-details-page-tabs"
+              data-testid="tabs"
+              items={tabs}
+              onChange={activeTabHandler}
+            />
+          </Col>
 
-        {threadLink ? (
-          <ActivityThreadPanel
-            createThread={createThread}
-            deletePostHandler={deleteFeed}
-            open={Boolean(threadLink)}
-            postFeedHandler={postFeed}
-            threadLink={threadLink}
-            updateThreadHandler={updateFeed}
-            onCancel={onThreadPanelClose}
-          />
-        ) : null}
-      </Row>
+          {threadLink ? (
+            <ActivityThreadPanel
+              createThread={createThread}
+              deletePostHandler={deleteFeed}
+              open={Boolean(threadLink)}
+              postFeedHandler={postFeed}
+              threadLink={threadLink}
+              updateThreadHandler={updateFeed}
+              onCancel={onThreadPanelClose}
+            />
+          ) : null}
+        </Row>
+      )}
     </PageLayoutV1>
   );
 };

openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/DatabaseSchemaPage.component.tsx

@@ -36,7 +36,7 @@ import { compare, Operation } from 'fast-json-patch';
 import { ThreadType } from 'generated/entity/feed/thread';
 import { Include } from 'generated/type/include';
 import { LabelType, State, TagLabel, TagSource } from 'generated/type/tagLabel';
-import { isString, isUndefined } from 'lodash';
+import { isEmpty, isString, isUndefined } from 'lodash';
 import { observer } from 'mobx-react';
 import { EntityTags, PagingResponse } from 'Models';
 import React, {
@@ -57,6 +57,7 @@ import {
 import { getFeedCount, postThread } from 'rest/feedsAPI';
 import { getTableList, TableListParams } from 'rest/tableAPI';
 import { handleDataAssetAfterDeleteAction } from 'utils/Assets/AssetsUtils';
+import { getEntityMissingError } from 'utils/CommonUtils';
 import { default as appState } from '../../AppState';
 import {
   getDatabaseSchemaDetailsPath,
@@ -577,54 +578,60 @@ const DatabaseSchemaPage: FunctionComponent = () => {
       pageTitle={t('label.entity-detail-plural', {
         entity: getEntityName(databaseSchema),
       })}>
-      <Row gutter={[0, 12]}>
-        <Col className="p-x-lg" span={24}>
-          {isSchemaDetailsLoading ? (
-            <Skeleton
-              active
-              paragraph={{
-                rows: 3,
-                width: ['20%', '80%', '60%'],
-              }}
+      {isEmpty(databaseSchema) ? (
+        <ErrorPlaceHolder className="m-0">
+          {getEntityMissingError(EntityType.DATABASE_SCHEMA, databaseSchemaFQN)}
+        </ErrorPlaceHolder>
+      ) : (
+        <Row gutter={[0, 12]}>
+          <Col className="p-x-lg" span={24}>
+            {isSchemaDetailsLoading ? (
+              <Skeleton
+                active
+                paragraph={{
+                  rows: 3,
+                  width: ['20%', '80%', '60%'],
+                }}
+              />
+            ) : (
+              <DataAssetsHeader
+                isRecursiveDelete
+                afterDeleteAction={handleDataAssetAfterDeleteAction}
+                dataAsset={databaseSchema}
+                entityType={EntityType.DATABASE_SCHEMA}
+                permissions={databaseSchemaPermission}
+                onDisplayNameUpdate={handleUpdateDisplayName}
+                onOwnerUpdate={handleUpdateOwner}
+                onRestoreDataAsset={handleRestoreDatabaseSchema}
+                onTierUpdate={handleUpdateTier}
+              />
+            )}
+          </Col>
+          <Col span={24}>
+            <Tabs
+              activeKey={activeTab}
+              className="entity-details-page-tabs"
+              data-testid="tabs"
+              items={tabs}
+              onChange={activeTabHandler}
             />
-          ) : (
-            <DataAssetsHeader
-              isRecursiveDelete
-              afterDeleteAction={handleDataAssetAfterDeleteAction}
-              dataAsset={databaseSchema}
-              entityType={EntityType.DATABASE_SCHEMA}
-              permissions={databaseSchemaPermission}
-              onDisplayNameUpdate={handleUpdateDisplayName}
-              onOwnerUpdate={handleUpdateOwner}
-              onRestoreDataAsset={handleRestoreDatabaseSchema}
-              onTierUpdate={handleUpdateTier}
-            />
-          )}
-        </Col>
-        <Col span={24}>
-          <Tabs
-            activeKey={activeTab}
-            className="entity-details-page-tabs"
-            data-testid="tabs"
-            items={tabs}
-            onChange={activeTabHandler}
-          />
-        </Col>
-        <Col span={24}>
-          {threadLink ? (
-            <ActivityThreadPanel
-              createThread={createThread}
-              deletePostHandler={deleteFeed}
-              open={Boolean(threadLink)}
-              postFeedHandler={postFeed}
-              threadLink={threadLink}
-              threadType={threadType}
-              updateThreadHandler={updateFeed}
-              onCancel={onThreadPanelClose}
-            />
-          ) : null}
-        </Col>
-      </Row>
+          </Col>
+          <Col span={24}>
+            {threadLink ? (
+              <ActivityThreadPanel
+                createThread={createThread}
+                deletePostHandler={deleteFeed}
+                open={Boolean(threadLink)}
+                postFeedHandler={postFeed}
+                threadLink={threadLink}
+                threadType={threadType}
+                updateThreadHandler={updateFeed}
+                onCancel={onThreadPanelClose}
+              />
+            ) : null}
+          </Col>
+        </Row>
+      )}
     </PageLayoutV1>
   );
 };

openmetadata-ui/src/main/resources/ui/src/pages/ServiceDetailsPage/ServiceDetailsPage.tsx

@@ -97,6 +97,8 @@ import { getPipelines } from 'rest/pipelineAPI';
 import { getServiceByFQN, patchService } from 'rest/serviceAPI';
 import { getContainers } from 'rest/storageAPI';
 import { getTopics } from 'rest/topicsAPI';
+import { handleDataAssetAfterDeleteAction } from 'utils/Assets/AssetsUtils';
+import { getEntityMissingError } from 'utils/CommonUtils';
 import { getEntityName } from 'utils/EntityUtils';
 import { DEFAULT_ENTITY_PERMISSION } from 'utils/PermissionsUtils';
 import { getEditConnectionPath } from 'utils/RouterUtils';
@@ -1008,31 +1010,38 @@ const ServiceDetailsPage: FunctionComponent = () => {
       pageTitle={t('label.entity-detail-plural', {
         entity: getEntityName(serviceDetails),
       })}>
-      <Row data-testid="service-page" gutter={[0, 12]}>
-        <Col className="p-x-lg" span={24}>
-          <DataAssetsHeader
-            isRecursiveDelete
-            allowSoftDelete={false}
-            dataAsset={serviceDetails}
-            entityType={entityType}
-            permissions={servicePermission}
-            onDisplayNameUpdate={handleUpdateDisplayName}
-            onOwnerUpdate={handleUpdateOwner}
-            onRestoreDataAsset={() => Promise.resolve()}
-            onTierUpdate={handleUpdateTier}
-          />
-        </Col>
+      {isEmpty(serviceDetails) ? (
+        <ErrorPlaceHolder className="m-0">
+          {getEntityMissingError(serviceCategory as string, serviceFQN)}
+        </ErrorPlaceHolder>
+      ) : (
+        <Row data-testid="service-page" gutter={[0, 12]}>
+          <Col className="p-x-lg" span={24}>
+            <DataAssetsHeader
+              isRecursiveDelete
+              afterDeleteAction={handleDataAssetAfterDeleteAction}
+              allowSoftDelete={false}
+              dataAsset={serviceDetails}
+              entityType={entityType}
+              permissions={servicePermission}
+              onDisplayNameUpdate={handleUpdateDisplayName}
+              onOwnerUpdate={handleUpdateOwner}
+              onRestoreDataAsset={() => Promise.resolve()}
+              onTierUpdate={handleUpdateTier}
+            />
+          </Col>
 
-        <Col span={24}>
-          <Tabs
-            activeKey={activeTab}
-            className="entity-details-page-tabs"
-            data-testid="tabs"
-            items={tabs}
-            onChange={activeTabHandler}
-          />
-        </Col>
-      </Row>
+          <Col span={24}>
+            <Tabs
+              activeKey={activeTab}
+              className="entity-details-page-tabs"
+              data-testid="tabs"
+              items={tabs}
+              onChange={activeTabHandler}
+            />
+          </Col>
+        </Row>
+      )}
     </PageLayoutV1>
   );
 };