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
2025-07-12 03:29:53 +00:00 · 2022-09-07 23:04:18 +05:30 · 2022-09-07 23:04:18 +05:30 · 6d3c0de512
commit 6d3c0de512
parent 9e0203e21b
9 changed files with 82 additions and 68 deletions
--- 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} />
--- 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}>
--- 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'
--- 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>
      ) : (
--- 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 />
  );
 };

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

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