From 6d3c0de5124b9dda2e8dcad83219bc5a1e8f047c Mon Sep 17 00:00:00 2001
From: Ashish Gupta <ashish@getcollate.io>
Date: Wed, 7 Sep 2022 23:04:18 +0530
Subject: [PATCH] UI :- Placeholder fixes in Webhook (#7308)

* Placeholder fixes in Webhook

* added switch button on placeholder screen in bot

* change placeholder in dataquality table and tooltip placement in webhook table
---
 .../BotListV1/BotListV1.component.tsx         | 53 ++++++++++++-------
 .../component/TestSummary.tsx                 |  7 ++-
 .../src/components/Webhooks/WebhookTable.tsx  |  2 -
 .../ErrorPlaceHolder.tsx                      |  6 ++-
 .../MsTeamsPage/MsTeamsPage.component.tsx     | 33 +++++-------
 .../pages/MsTeamsPage/MsTeamsPage.test.tsx    |  4 +-
 .../SlackSettingsPage.component.tsx           | 33 +++++-------
 .../SlackSettingsPage.test.tsx                |  4 +-
 .../src/main/resources/ui/src/styles/app.less |  8 +++
 9 files changed, 82 insertions(+), 68 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/BotListV1/BotListV1.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/BotListV1/BotListV1.component.tsx
index e55690075eb..c702c60e2fe 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/BotListV1/BotListV1.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/BotListV1/BotListV1.component.tsx
@@ -173,24 +173,41 @@ const BotListV1 = ({
   }, [showDeleted]);
 
   return handleErrorPlaceholder ? (
-    <ErrorPlaceHolder
-      buttons={
-        <div className="tw-text-lg tw-text-center">
-          <Tooltip
-            title={createPermission ? 'Add Bot' : NO_PERMISSION_FOR_ACTION}>
-            <Button
-              disabled={!createPermission}
-              type="primary"
-              onClick={handleAddBotClick}>
-              Add Bot
-            </Button>
-          </Tooltip>
-        </div>
-      }
-      doc={BOTS_DOCS}
-      heading="Bot"
-      type="ADD_DATA"
-    />
+    <Row>
+      <Col className="w-full tw-flex tw-justify-end">
+        <Space align="end" size={5}>
+          <Switch
+            checked={showDeleted}
+            id="switch-deleted"
+            size="small"
+            onClick={handleShowDeleted}
+          />
+          <label htmlFor="switch-deleted">Show deleted</label>
+        </Space>
+      </Col>
+      <Col className="w-full">
+        <ErrorPlaceHolder
+          buttons={
+            <div className="tw-text-lg tw-text-center">
+              <Tooltip
+                placement="left"
+                title={createPermission ? 'Add Bot' : NO_PERMISSION_FOR_ACTION}>
+                <Button
+                  ghost
+                  disabled={!createPermission}
+                  type="primary"
+                  onClick={handleAddBotClick}>
+                  Add Bot
+                </Button>
+              </Tooltip>
+            </div>
+          }
+          doc={BOTS_DOCS}
+          heading="Bot"
+          type="ADD_DATA"
+        />
+      </Col>
+    </Row>
   ) : (
     <Row gutter={[16, 16]}>
       <Col flex={1} />
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ProfilerDashboard/component/TestSummary.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ProfilerDashboard/component/TestSummary.tsx
index abdbb1b57c3..801f47cdec9 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ProfilerDashboard/component/TestSummary.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ProfilerDashboard/component/TestSummary.tsx
@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-import { Col, Empty, Row, Select, Space, Typography } from 'antd';
+import { Col, Row, Select, Space, Typography } from 'antd';
 import { AxiosError } from 'axios';
 import { isEmpty } from 'lodash';
 import moment from 'moment';
@@ -40,6 +40,7 @@ import {
 } from '../../../generated/tests/tableTest';
 import { TestCaseParameterValue } from '../../../generated/tests/testCase';
 import { showErrorToast } from '../../../utils/ToastUtils';
+import ErrorPlaceHolder from '../../common/error-with-placeholder/ErrorPlaceHolder';
 import RichTextEditorPreviewer from '../../common/rich-text-editor/RichTextEditorPreviewer';
 import Loader from '../../Loader/Loader';
 import SchemaEditor from '../../schema-editor/SchemaEditor';
@@ -234,7 +235,9 @@ const TestSummary: React.FC<TestSummaryProps> = ({ data }) => {
             </ResponsiveContainer>
           </div>
         ) : (
-          <Empty description="No Result Available" />
+          <ErrorPlaceHolder classes="tw-mt-0">
+            <Typography.Text>No Result Available</Typography.Text>
+          </ErrorPlaceHolder>
         )}
       </Col>
       <Col span={10}>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Webhooks/WebhookTable.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Webhooks/WebhookTable.tsx
index 282b959680b..dd54207923c 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Webhooks/WebhookTable.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Webhooks/WebhookTable.tsx
@@ -142,7 +142,6 @@ const WebhookTable: FC<Props> = ({ onEdit, webhookList, onDelete }) => {
           return (
             <Space size={4}>
               <Tooltip
-                placement="left"
                 title={deletePermission ? 'Delete' : NO_PERMISSION_FOR_ACTION}>
                 <Button
                   data-testid={`delete-action-${getEntityName(record)}`}
@@ -155,7 +154,6 @@ const WebhookTable: FC<Props> = ({ onEdit, webhookList, onDelete }) => {
                 />
               </Tooltip>
               <Tooltip
-                placement="left"
                 title={
                   createPermission || editPermission
                     ? 'Edit'
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/error-with-placeholder/ErrorPlaceHolder.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/error-with-placeholder/ErrorPlaceHolder.tsx
index 2179b4deae1..3bcaf137ffe 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/error-with-placeholder/ErrorPlaceHolder.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/error-with-placeholder/ErrorPlaceHolder.tsx
@@ -26,6 +26,7 @@ type Props = {
   buttons?: React.ReactNode;
   buttonId?: string;
   description?: React.ReactNode;
+  classes?: string;
 };
 
 const ErrorPlaceHolder = ({
@@ -35,6 +36,7 @@ const ErrorPlaceHolder = ({
   heading,
   buttons,
   description,
+  classes,
 }: Props) => {
   const { Paragraph, Link } = Typography;
 
@@ -68,7 +70,7 @@ const ErrorPlaceHolder = ({
       </div>
     </>
   ) : (
-    <div className="flex-center flex-col tw-mt-24 w-full">
+    <div className={`${classes} flex-center flex-col mt-24 w-full`}>
       <div data-testid="error">
         <img
           data-testid="no-data-image"
@@ -77,7 +79,7 @@ const ErrorPlaceHolder = ({
         />
       </div>
       {children ? (
-        <div className="tw-flex tw-flex-col tw-items-center tw-mt-8 tw-text-base tw-font-medium">
+        <div className="tw-flex tw-flex-col tw-items-center tw-mt-5 tw-text-base tw-font-medium">
           {children}
         </div>
       ) : (
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/MsTeamsPage/MsTeamsPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/MsTeamsPage/MsTeamsPage.component.tsx
index 35a73f96add..34c7397ecf8 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/MsTeamsPage/MsTeamsPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/MsTeamsPage/MsTeamsPage.component.tsx
@@ -15,7 +15,6 @@ import { AxiosError } from 'axios';
 import React, { useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { getWebhooks } from '../../axiosAPIs/webhookAPI';
-import PageContainerV1 from '../../components/containers/PageContainerV1';
 import Loader from '../../components/Loader/Loader';
 import WebhooksV1 from '../../components/Webhooks/WebhooksV1';
 import {
@@ -96,24 +95,20 @@ const MsTeamsPage = () => {
     fetchData();
   }, []);
 
-  return (
-    <PageContainerV1>
-      {!isLoading ? (
-        <WebhooksV1
-          currentPage={currentPage}
-          data={data}
-          paging={paging}
-          selectedStatus={selectedStatus}
-          webhookType={WebhookType.Msteams}
-          onAddWebhook={handleAddWebhook}
-          onClickWebhook={handleClickWebhook}
-          onPageChange={handlePageChange}
-          onStatusFilter={handleStatusFilter}
-        />
-      ) : (
-        <Loader />
-      )}
-    </PageContainerV1>
+  return !isLoading ? (
+    <WebhooksV1
+      currentPage={currentPage}
+      data={data}
+      paging={paging}
+      selectedStatus={selectedStatus}
+      webhookType={WebhookType.Msteams}
+      onAddWebhook={handleAddWebhook}
+      onClickWebhook={handleClickWebhook}
+      onPageChange={handlePageChange}
+      onStatusFilter={handleStatusFilter}
+    />
+  ) : (
+    <Loader />
   );
 };
 
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/MsTeamsPage/MsTeamsPage.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/MsTeamsPage/MsTeamsPage.test.tsx
index 84a5895196d..1336a086dc7 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/MsTeamsPage/MsTeamsPage.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/MsTeamsPage/MsTeamsPage.test.tsx
@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-import { findByTestId, findByText, render } from '@testing-library/react';
+import { findByText, render } from '@testing-library/react';
 import React, { ReactNode } from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { getWebhooks } from '../../axiosAPIs/webhookAPI';
@@ -38,10 +38,8 @@ describe('Test MS Teams page Component', () => {
     const { container } = render(<MsTeamsPage />, {
       wrapper: MemoryRouter,
     });
-    const PageContainerV1 = await findByTestId(container, 'PageContainerV1');
     const webhookComponent = await findByText(container, /testWebhookV1/);
 
-    expect(PageContainerV1).toBeInTheDocument();
     expect(webhookComponent).toBeInTheDocument();
     expect(getWebhooks).toBeCalledTimes(1);
   });
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/SlackSettingsPage/SlackSettingsPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/SlackSettingsPage/SlackSettingsPage.component.tsx
index d477d9681a7..94740550fa8 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/SlackSettingsPage/SlackSettingsPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/SlackSettingsPage/SlackSettingsPage.component.tsx
@@ -15,7 +15,6 @@ import { AxiosError } from 'axios';
 import React, { useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { getWebhooks } from '../../axiosAPIs/webhookAPI';
-import PageContainerV1 from '../../components/containers/PageContainerV1';
 import Loader from '../../components/Loader/Loader';
 import WebhooksV1 from '../../components/Webhooks/WebhooksV1';
 import {
@@ -94,24 +93,20 @@ export const SlackSettingsPage = () => {
     fetchData();
   }, []);
 
-  return (
-    <PageContainerV1>
-      {!isLoading ? (
-        <WebhooksV1
-          currentPage={currentPage}
-          data={data}
-          paging={paging}
-          selectedStatus={selectedStatus}
-          webhookType={WebhookType.Slack}
-          onAddWebhook={handleAddWebhook}
-          onClickWebhook={handleClickWebhook}
-          onPageChange={handlePageChange}
-          onStatusFilter={handleStatusFilter}
-        />
-      ) : (
-        <Loader />
-      )}
-    </PageContainerV1>
+  return !isLoading ? (
+    <WebhooksV1
+      currentPage={currentPage}
+      data={data}
+      paging={paging}
+      selectedStatus={selectedStatus}
+      webhookType={WebhookType.Slack}
+      onAddWebhook={handleAddWebhook}
+      onClickWebhook={handleClickWebhook}
+      onPageChange={handlePageChange}
+      onStatusFilter={handleStatusFilter}
+    />
+  ) : (
+    <Loader />
   );
 };
 
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/SlackSettingsPage/SlackSettingsPage.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/SlackSettingsPage/SlackSettingsPage.test.tsx
index b5a1aaa5c86..ad798807884 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/SlackSettingsPage/SlackSettingsPage.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/SlackSettingsPage/SlackSettingsPage.test.tsx
@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-import { findByTestId, findByText, render } from '@testing-library/react';
+import { findByText, render } from '@testing-library/react';
 import React, { ReactNode } from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { getWebhooks } from '../../axiosAPIs/webhookAPI';
@@ -38,10 +38,8 @@ describe('Test SlackSettings page Component', () => {
     const { container } = render(<SlackSettingsPage />, {
       wrapper: MemoryRouter,
     });
-    const PageContainerV1 = await findByTestId(container, 'PageContainerV1');
     const webhookComponent = await findByText(container, /testWebhookV1/);
 
-    expect(PageContainerV1).toBeInTheDocument();
     expect(webhookComponent).toBeInTheDocument();
     expect(getWebhooks).toBeCalledTimes(1);
   });
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/app.less b/openmetadata-ui/src/main/resources/ui/src/styles/app.less
index ac5ca11bd0e..14646a8ef87 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/app.less
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/app.less
@@ -55,3 +55,11 @@
   border-left: 2px solid @primary;
   background: @primary-light;
 }
+
+.mt-0 {
+  margin-top: 0;
+}
+
+.mt-24 {
+  margin-top: 6rem;
+}