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,12 +173,27 @@ const BotListV1 = ({
   }, [showDeleted]);
 
   return handleErrorPlaceholder ? (
+    <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}>
@@ -191,6 +206,8 @@ const BotListV1 = ({
           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,9 +95,7 @@ const MsTeamsPage = () => {
     fetchData();
   }, []);
 
-  return (
+  return !isLoading ? (
-    <PageContainerV1>
-      {!isLoading ? (
     <WebhooksV1
       currentPage={currentPage}
       data={data}
@@ -112,8 +109,6 @@ const MsTeamsPage = () => {
     />
   ) : (
     <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,9 +93,7 @@ export const SlackSettingsPage = () => {
     fetchData();
   }, []);
 
-  return (
+  return !isLoading ? (
-    <PageContainerV1>
-      {!isLoading ? (
     <WebhooksV1
       currentPage={currentPage}
       data={data}
@@ -110,8 +107,6 @@ export const SlackSettingsPage = () => {
     />
   ) : (
     <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;
+}