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

openmetadata-ui/src/main/resources/ui/src/components/BotListV1/BotListV1.component.tsx

@@ -173,24 +173,41 @@ const BotListV1 = ({
   }, [showDeleted]);
 
   return handleErrorPlaceholder ? (
-    <ErrorPlaceHolder
+    <Row>
-      buttons={
+      <Col className="w-full tw-flex tw-justify-end">
-        <div className="tw-text-lg tw-text-center">
+        <Space align="end" size={5}>
-          <Tooltip
+          <Switch
-            title={createPermission ? 'Add Bot' : NO_PERMISSION_FOR_ACTION}>
+            checked={showDeleted}
-            <Button
+            id="switch-deleted"
-              disabled={!createPermission}
+            size="small"
-              type="primary"
+            onClick={handleShowDeleted}
-              onClick={handleAddBotClick}>
+          />
-              Add Bot
+          <label htmlFor="switch-deleted">Show deleted</label>
-            </Button>
+        </Space>
-          </Tooltip>
+      </Col>
-        </div>
+      <Col className="w-full">
-      }
+        <ErrorPlaceHolder
-      doc={BOTS_DOCS}
+          buttons={
-      heading="Bot"
+            <div className="tw-text-lg tw-text-center">
-      type="ADD_DATA"
+              <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} />

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}>

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'

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>
       ) : (

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 (
+  return !isLoading ? (
-    <PageContainerV1>
+    <WebhooksV1
-      {!isLoading ? (
+      currentPage={currentPage}
-        <WebhooksV1
+      data={data}
-          currentPage={currentPage}
+      paging={paging}
-          data={data}
+      selectedStatus={selectedStatus}
-          paging={paging}
+      webhookType={WebhookType.Msteams}
-          selectedStatus={selectedStatus}
+      onAddWebhook={handleAddWebhook}
-          webhookType={WebhookType.Msteams}
+      onClickWebhook={handleClickWebhook}
-          onAddWebhook={handleAddWebhook}
+      onPageChange={handlePageChange}
-          onClickWebhook={handleClickWebhook}
+      onStatusFilter={handleStatusFilter}
-          onPageChange={handlePageChange}
+    />
-          onStatusFilter={handleStatusFilter}
+  ) : (
-        />
+    <Loader />
-      ) : (
-        <Loader />
-      )}
-    </PageContainerV1>
   );
 };
 

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);
   });

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 (
+  return !isLoading ? (
-    <PageContainerV1>
+    <WebhooksV1
-      {!isLoading ? (
+      currentPage={currentPage}
-        <WebhooksV1
+      data={data}
-          currentPage={currentPage}
+      paging={paging}
-          data={data}
+      selectedStatus={selectedStatus}
-          paging={paging}
+      webhookType={WebhookType.Slack}
-          selectedStatus={selectedStatus}
+      onAddWebhook={handleAddWebhook}
-          webhookType={WebhookType.Slack}
+      onClickWebhook={handleClickWebhook}
-          onAddWebhook={handleAddWebhook}
+      onPageChange={handlePageChange}
-          onClickWebhook={handleClickWebhook}
+      onStatusFilter={handleStatusFilter}
-          onPageChange={handlePageChange}
+    />
-          onStatusFilter={handleStatusFilter}
+  ) : (
-        />
+    <Loader />
-      ) : (
-        <Loader />
-      )}
-    </PageContainerV1>
   );
 };
 

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);
   });

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;
+}