UI added support all deleted entities (#2388)

* Added deleted functionality for explore page * Added UI support for deleted topics * Added UI support for deleted Dashboards and Pipelines
2025-08-18 22:18:23 +00:00 · 2022-01-25 13:20:52 +05:30 · 2022-01-25 13:20:52 +05:30 · e75e9d0780
commit e75e9d0780
parent b4d63bd951
26 changed files with 360 additions and 192 deletions
--- a/openmetadata-ui/src/main/resources/ui/src/axiosAPIs/dashboardAPI.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/axiosAPIs/dashboardAPI.ts
@ -58,7 +58,11 @@ export const getDashboardByFqn: Function = (
  fqn: string,
  arrQueryFields: string
 ): Promise<AxiosResponse> => {
-  const url = getURLWithQueryFields(`/dashboards/name/${fqn}`, arrQueryFields);
+  const url = getURLWithQueryFields(
+    `/dashboards/name/${fqn}`,
+    arrQueryFields,
+    'include=all'
+  );

  return APIClient.get(url);
 };
--- a/openmetadata-ui/src/main/resources/ui/src/axiosAPIs/miscAPI.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/axiosAPIs/miscAPI.ts
@ -25,7 +25,8 @@ export const searchData: Function = (
  filters: string,
  sortField: string,
  sortOrder: string,
-  searchIndex: string
+  searchIndex: string,
+  onlyDeleted = false
 ): Promise<AxiosResponse> => {
  return APIClient.get(
    `/search/query?${getSearchAPIQuery(
@ -35,7 +36,8 @@ export const searchData: Function = (
      filters,
      sortField,
      sortOrder,
-      searchIndex
+      searchIndex,
+      onlyDeleted
    )}`
  );
 };
--- a/openmetadata-ui/src/main/resources/ui/src/axiosAPIs/pipelineAPI.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/axiosAPIs/pipelineAPI.ts
@ -58,7 +58,11 @@ export const getPipelineByFqn: Function = (
  fqn: string,
  arrQueryFields: string
 ): Promise<AxiosResponse> => {
-  const url = getURLWithQueryFields(`/pipelines/name/${fqn}`, arrQueryFields);
+  const url = getURLWithQueryFields(
+    `/pipelines/name/${fqn}`,
+    arrQueryFields,
+    'include=all'
+  );

  return APIClient.get(url);
 };
--- a/openmetadata-ui/src/main/resources/ui/src/axiosAPIs/topicsAPI.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/axiosAPIs/topicsAPI.ts
@ -58,7 +58,11 @@ export const getTopicByFqn: Function = (
  fqn: string,
  arrQueryFields: string
 ): Promise<AxiosResponse> => {
-  const url = getURLWithQueryFields(`/topics/name/${fqn}`, arrQueryFields);
+  const url = getURLWithQueryFields(
+    `/topics/name/${fqn}`,
+    arrQueryFields,
+    'include=all'
+  );

  return APIClient.get(url);
 };
--- a/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx
@ -71,6 +71,7 @@ const DashboardDetails = ({
  loadNodeHandler,
  versionHandler,
  version,
+  deleted,
  addLineageHandler,
  removeLineageHandler,
 }: DashboardDetailsProps) => {
@ -131,6 +132,7 @@ const DashboardDetails = ({
        selectedName: 'icon-managecolor',
      },
      isProtected: true,
+      isHidden: deleted,
      protectedState: !owner || hasEditAccess(),
      position: 3,
    },
@ -318,6 +320,7 @@ const DashboardDetails = ({
        <div className="tw-px-6 tw-w-full tw-h-full tw-flex tw-flex-col">
          <EntityPageInfo
            isTagEditable
+            deleted={deleted}
            entityName={entityName}
            extraInfo={extraInfo}
            followHandler={followDashboard}
@ -352,6 +355,7 @@ const DashboardDetails = ({
                        entityName={entityName}
                        hasEditAccess={hasEditAccess()}
                        isEdit={isEdit}
+                        isReadOnly={deleted}
                        owner={owner}
                        onCancel={onCancel}
                        onDescriptionEdit={onDescriptionEdit}
@ -413,6 +417,7 @@ const DashboardDetails = ({
                                      </span>
                                    )}
                                  </div>
+                                  {!deleted && (
                                    <NonAdminAction
                                      html={getHtmlForNonAdminAction(
                                        Boolean(owner)
@ -432,6 +437,7 @@ const DashboardDetails = ({
                                        />
                                      </button>
                                    </NonAdminAction>
+                                  )}
                                </div>
                              </div>
                            </td>
@ -442,8 +448,24 @@ const DashboardDetails = ({
                                  handleEditChartTag(chart, index);
                                }
                              }}>
+                              {deleted ? (
+                                <div className="tw-flex tw-flex-wrap">
+                                  {chart.tags?.map(
+                                    (tag: TagLabel, i: number) => (
+                                      <Tags
+                                        key={i}
+                                        startWith="#"
+                                        tag={tag}
+                                        type="label"
+                                      />
+                                    )
+                                  )}
+                                </div>
+                              ) : (
                                <NonAdminAction
-                                html={getHtmlForNonAdminAction(Boolean(owner))}
+                                  html={getHtmlForNonAdminAction(
+                                    Boolean(owner)
+                                  )}
                                  isOwner={hasEditAccess()}
                                  position="left"
                                  trigger="click">
@ -480,6 +502,7 @@ const DashboardDetails = ({
                                    )}
                                  </TagsContainer>
                                </NonAdminAction>
+                              )}
                            </td>
                          </tr>
                        ))}
@ -492,6 +515,7 @@ const DashboardDetails = ({
                <div className="tw-h-full">
                  <Entitylineage
                    addLineageHandler={addLineageHandler}
+                    deleted={deleted}
                    entityLineage={entityLineage}
                    isNodeLoading={isNodeLoading}
                    lineageLeafNodes={lineageLeafNodes}
@ -500,7 +524,7 @@ const DashboardDetails = ({
                  />
                </div>
              )}
-              {activeTab === 3 && (
+              {activeTab === 3 && !deleted && (
                <div>
                  <ManageTabComponent
                    currentTier={tier?.tagFQN}
--- a/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.interface.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.interface.ts
@ -51,6 +51,7 @@ export interface DashboardDetailsProps {
  followers: Array<User>;
  dashboardTags: Array<EntityTags>;
  slashedDashboardName: TitleBreadcrumbProps['titleLinks'];
+  deleted?: boolean;
  setActiveTabHandler: (value: number) => void;
  followDashboardHandler: () => void;
  unfollowDashboardHandler: () => void;
--- a/openmetadata-ui/src/main/resources/ui/src/components/DatasetDetails/DatasetDetails.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DatasetDetails/DatasetDetails.component.tsx
@ -483,6 +483,7 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
                id="lineageDetails">
                <Entitylineage
                  addLineageHandler={addLineageHandler}
+                  deleted={deleted}
                  entityLineage={entityLineage}
                  isNodeLoading={isNodeLoading}
                  lineageLeafNodes={lineageLeafNodes}
--- a/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/EntityLineage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/EntityLineage.component.tsx
@ -77,6 +77,7 @@ const Entitylineage: FunctionComponent<EntityLineageProp> = ({
  loadNodeHandler,
  lineageLeafNodes,
  isNodeLoading,
+  deleted,
  addLineageHandler,
  removeLineageHandler,
 }: EntityLineageProp) => {
@ -585,6 +586,7 @@ const Entitylineage: FunctionComponent<EntityLineageProp> = ({
                <CustomControls
                  className="tw-absolute tw-top-1 tw-right-1 tw-bottom-full tw-ml-4 tw-mt-4"
                  fitViewParams={{ minZoom: 0.5, maxZoom: 2.5 }}>
+                  {!deleted && (
                    <ControlButton
                      className={classNames(
                        'tw-h-9 tw-w-9 tw-rounded-full tw-px-1 tw-shadow-lg tw-cursor-pointer',
@ -594,7 +596,7 @@ const Entitylineage: FunctionComponent<EntityLineageProp> = ({
                        }
                      )}
                      onClick={() => {
-                      setEditMode((pre) => !pre);
+                        setEditMode((pre) => !pre && !deleted);
                        setSelectedNode({} as SelectedNode);
                        setIsDrawerOpen(false);
                        setNewAddedNode({} as FlowElement);
@ -620,6 +622,7 @@ const Entitylineage: FunctionComponent<EntityLineageProp> = ({
                        />
                      )}
                    </ControlButton>
+                  )}
                </CustomControls>
                {isEditMode ? (
                  <Background
--- a/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/EntityLineage.interface.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/EntityLineage.interface.ts
@ -28,6 +28,7 @@ export interface EntityLineageProp {
  isNodeLoading: LoadingNodeState;
  lineageLeafNodes: LeafNodes;
  entityLineage: EntityLineage;
+  deleted?: boolean;
  loadNodeHandler: (node: EntityReference, pos: LineagePos) => void;
  addLineageHandler: (edge: Edge) => Promise<void>;
  removeLineageHandler: (data: EdgeData) => void;
--- a/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx
@ -74,6 +74,8 @@ const Explore: React.FC<ExploreProps> = ({
  handlePathChange,
  handleSearchText,
  fetchData,
+  showDeleted,
+  onShowDeleted,
  updateTableCount,
  updateTopicCount,
  updateDashboardCount,
@ -145,6 +147,10 @@ const Explore: React.FC<ExploreProps> = ({
    }
  };

+  const handleShowDeleted = (checked: boolean) => {
+    onShowDeleted(checked);
+  };
+
  const onClearFilterHandler = (type: string[]) => {
    setFilters((prevFilters) => {
      const updatedFilter = type.reduce((filterObj, type) => {
@ -482,7 +488,7 @@ const Explore: React.FC<ExploreProps> = ({
      resetFilters();
      fetchTableData();
    }
-  }, [searchText, searchIndex]);
+  }, [searchText, searchIndex, showDeleted]);

  useEffect(() => {
    if (searchResult) {
@ -549,6 +555,8 @@ const Explore: React.FC<ExploreProps> = ({
          <FacetFilter
            aggregations={getAggrWithDefaultValue(aggregations, visibleFilters)}
            filters={getFacetedFilter()}
+            showDeletedOnly={showDeleted}
+            onSelectDeleted={handleShowDeleted}
            onSelectHandler={handleSelectedFilter}
          />
        )}
--- a/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.test.tsx
@ -58,6 +58,7 @@ describe('Test Explore component', () => {
        searchQuery=""
        searchResult={mockSearchResult}
        searchText=""
+        showDeleted={false}
        sortValue=""
        tab=""
        tabCounts={{
@ -72,6 +73,7 @@ describe('Test Explore component', () => {
        updatePipelineCount={mockFunction}
        updateTableCount={mockFunction}
        updateTopicCount={mockFunction}
+        onShowDeleted={mockFunction}
      />,
      {
        wrapper: MemoryRouter,
--- a/openmetadata-ui/src/main/resources/ui/src/components/Explore/explore.interface.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Explore/explore.interface.ts
@ -39,6 +39,7 @@ export interface ExploreProps {
  tab: string;
  error: string;
  searchQuery: string;
+  showDeleted: boolean;
  fetchCount: () => void;
  handlePathChange: (path: string) => void;
  handleSearchText: (text: string) => void;
@ -48,5 +49,6 @@ export interface ExploreProps {
  updatePipelineCount: (count: number) => void;
  updateDbtModelCount: (count: number) => void;
  fetchData: (value: SearchDataFunctionType[]) => void;
+  onShowDeleted: (checked: boolean) => void;
  searchResult: ExploreSearchData | undefined;
 }
--- a/openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.component.tsx
@ -23,6 +23,7 @@ import { LabelType, State } from '../../generated/type/tagLabel';
 import { useAuth } from '../../hooks/authHooks';
 import {
  getCurrentUserId,
+  getHtmlForNonAdminAction,
  getUserTeams,
  isEven,
 } from '../../utils/CommonUtils';
@ -30,6 +31,7 @@ import SVGIcons from '../../utils/SvgUtils';
 import { getTagsWithoutTier } from '../../utils/TableUtils';
 import Description from '../common/description/Description';
 import EntityPageInfo from '../common/entityPageInfo/EntityPageInfo';
+import NonAdminAction from '../common/non-admin-action/NonAdminAction';
 import RichTextEditorPreviewer from '../common/rich-text-editor/RichTextEditorPreviewer';
 import TabsPane from '../common/TabsPane/TabsPane';
 import PageContainer from '../containers/PageContainer';
@ -65,6 +67,7 @@ const PipelineDetails = ({
  lineageLeafNodes,
  isNodeLoading,
  version,
+  deleted,
  versionHandler,
  addLineageHandler,
  removeLineageHandler,
@ -123,6 +126,7 @@ const PipelineDetails = ({
        selectedName: 'icon-managecolor',
      },
      isProtected: true,
+      isHidden: deleted,
      protectedState: !owner || hasEditAccess(),
      position: 3,
    },
@ -274,6 +278,7 @@ const PipelineDetails = ({
        <div className="tw-px-6 tw-w-full tw-h-full tw-flex tw-flex-col">
          <EntityPageInfo
            isTagEditable
+            deleted={deleted}
            entityName={entityName}
            extraInfo={extraInfo}
            followHandler={followPipeline}
@ -307,6 +312,7 @@ const PipelineDetails = ({
                        entityName={entityName}
                        hasEditAccess={hasEditAccess()}
                        isEdit={isEdit}
+                        isReadOnly={deleted}
                        owner={owner}
                        onCancel={onCancel}
                        onDescriptionEdit={onDescriptionEdit}
@ -363,9 +369,18 @@ const PipelineDetails = ({
                                    </span>
                                  )}
                                </div>
+                                {!deleted && (
+                                  <NonAdminAction
+                                    html={getHtmlForNonAdminAction(
+                                      Boolean(owner)
+                                    )}
+                                    isOwner={hasEditAccess()}
+                                    position="top">
                                    <button
                                      className="tw-self-start tw-w-8 tw-h-auto tw-opacity-0 tw-ml-1 group-hover:tw-opacity-100 focus:tw-outline-none"
-                                  onClick={() => handleUpdateTask(task, index)}>
+                                      onClick={() =>
+                                        handleUpdateTask(task, index)
+                                      }>
                                      <SVGIcons
                                        alt="edit"
                                        icon="icon-edit"
@ -373,6 +388,8 @@ const PipelineDetails = ({
                                        width="10px"
                                      />
                                    </button>
+                                  </NonAdminAction>
+                                )}
                              </div>
                            </td>
                            <td className="tableBody-cell">{task.taskType}</td>
@ -387,6 +404,7 @@ const PipelineDetails = ({
                <div className="tw-h-full">
                  <Entitylineage
                    addLineageHandler={addLineageHandler}
+                    deleted={deleted}
                    entityLineage={entityLineage}
                    isNodeLoading={isNodeLoading}
                    lineageLeafNodes={lineageLeafNodes}
@ -395,7 +413,7 @@ const PipelineDetails = ({
                  />
                </div>
              )}
-              {activeTab === 3 && (
+              {activeTab === 3 && !deleted && (
                <div>
                  <ManageTabComponent
                    currentTier={tier?.tagFQN}
--- a/openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.interface.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.interface.ts
@ -48,6 +48,7 @@ export interface PipeLineDetailsProp {
  slashedPipelineName: TitleBreadcrumbProps['titleLinks'];
  entityLineage: EntityLineage;
  tasks: Task[];
+  deleted?: boolean;
  setActiveTabHandler: (value: number) => void;
  followPipelineHandler: () => void;
  unfollowPipelineHandler: () => void;
--- a/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicDetails.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicDetails.component.tsx
@ -56,6 +56,7 @@ const TopicDetails: React.FC<TopicDetailsProps> = ({
  tagUpdateHandler,
  version,
  versionHandler,
+  deleted,
 }: TopicDetailsProps) => {
  const { isAuthDisabled } = useAuth();
  const [isEdit, setIsEdit] = useState(false);
@ -139,6 +140,7 @@ const TopicDetails: React.FC<TopicDetailsProps> = ({
        selectedName: 'icon-managecolor',
      },
      isProtected: true,
+      isHidden: deleted,
      protectedState: !owner || hasEditAccess(),
      position: 3,
    },
@ -275,6 +277,7 @@ const TopicDetails: React.FC<TopicDetailsProps> = ({
      <div className="tw-px-6 tw-w-full tw-h-full tw-flex tw-flex-col">
        <EntityPageInfo
          isTagEditable
+          deleted={deleted}
          entityName={entityName}
          extraInfo={extraInfo}
          followHandler={followTopic}
@ -308,6 +311,7 @@ const TopicDetails: React.FC<TopicDetailsProps> = ({
                      entityName={entityName}
                      hasEditAccess={hasEditAccess()}
                      isEdit={isEdit}
+                      isReadOnly={deleted}
                      owner={owner}
                      onCancel={onCancel}
                      onDescriptionEdit={onDescriptionEdit}
@ -326,7 +330,7 @@ const TopicDetails: React.FC<TopicDetailsProps> = ({
                <SchemaEditor value={JSON.stringify(getConfigObject())} />
              </div>
            )}
-            {activeTab === 3 && (
+            {activeTab === 3 && !deleted && (
              <div>
                <ManageTabComponent
                  currentTier={tier?.tagFQN}
--- a/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicDetails.interface.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicDetails.interface.ts
@ -37,6 +37,7 @@ export interface TopicDetailsProps {
  followers: Array<User>;
  topicTags: Array<EntityTags>;
  slashedTopicName: TitleBreadcrumbProps['titleLinks'];
+  deleted?: boolean;
  setActiveTabHandler: (value: number) => void;
  followTopicHandler: () => void;
  unfollowTopicHandler: () => void;
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/EntityPageInfo.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/EntityPageInfo.tsx
@ -284,7 +284,7 @@ const EntityPageInfo = ({
        ))}
      </div>
      <div className="tw-flex tw-flex-wrap tw-pt-1 tw-ml-7 tw-group">
-        {(!isEditable || !isTagEditable) && (
+        {(!isEditable || !isTagEditable || deleted) && (
          <>
            {(tags.length > 0 || !isEmpty(tier)) && (
              <SVGIcons
@ -347,7 +347,7 @@ const EntityPageInfo = ({
            )}
          </>
        )}
-        {isTagEditable && (
+        {isTagEditable && !deleted && (
          <NonAdminAction
            html={getHtmlForNonAdminAction(Boolean(owner))}
            isOwner={hasEditAccess}
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FacetFilter.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FacetFilter.tsx
@ -11,6 +11,7 @@
 *  limitations under the License.
 */

+import classNames from 'classnames';
 import { lowerCase } from 'lodash';
 import { AggregationType, Bucket, FilterObject } from 'Models';
 import PropTypes from 'prop-types';
@ -23,8 +24,10 @@ import { FacetProp } from './FacetTypes';
 import FilterContainer from './FilterContainer';
 const FacetFilter: FunctionComponent<FacetProp> = ({
  aggregations,
-  onSelectHandler,
  filters,
+  showDeletedOnly = false,
+  onSelectHandler,
+  onSelectDeleted,
  onClearFilter,
  onSelectAllFilter,
 }: FacetProp) => {
@ -133,6 +136,31 @@ const FacetFilter: FunctionComponent<FacetProp> = ({

  return (
    <>
+      <div
+        className="sidebar-my-data-holder mt-2 mb-3"
+        data-testid="show-deleted-cntnr">
+        <div
+          className="filter-group tw-justify-between tw-mb-2"
+          data-testid="filter-container-deleted">
+          <div className="tw-flex">
+            <div className="filters-title tw-w-40 tw-truncate custom-checkbox-label">
+              Show Deleted
+            </div>
+          </div>
+          <div
+            className={classNames(
+              'toggle-switch tw-mr-0',
+              showDeletedOnly ? 'open' : null
+            )}
+            data-testid="show-deleted"
+            onClick={() => {
+              onSelectDeleted?.(!showDeletedOnly);
+            }}>
+            <div className="switch" />
+          </div>
+        </div>
+      </div>
+      {getSeparator(aggregations.length, 0)}
      {aggregations.map((aggregation: AggregationType, index: number) => {
        return (
          <Fragment key={index}>
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FacetTypes.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FacetTypes.ts
@ -15,24 +15,26 @@ import { AggregationType, FilterObject } from 'Models';

 export type FacetProp = {
  aggregations: Array<AggregationType>;
+  filters: FilterObject;
+  showDeletedOnly?: boolean;
  onSelectHandler: (
    checked: boolean,
    name: string,
    type: keyof FilterObject
  ) => void;
-  filters: FilterObject;
  onClearFilter?: (value: keyof FilterObject) => void;
  onSelectAllFilter?: (
    type: keyof FilterObject,
    filters: Array<string>
  ) => void;
+  onSelectDeleted?: (checked: boolean) => void;
 };

 export type FilterContainerProp = {
  name: string;
-  count: number;
+  count?: number;
  onSelect: (checked: boolean, name: string, type: keyof FilterObject) => void;
  isSelected: boolean;
-  type: keyof FilterObject;
+  type?: keyof FilterObject;
  isDisabled?: boolean;
 };
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FilterContainer.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FilterContainer.tsx
@ -12,6 +12,7 @@
 */

 import classNames from 'classnames';
+import { isNil } from 'lodash';
 import React, { FunctionComponent } from 'react';
 import { getCountBadge } from '../../../utils/CommonUtils';
 import { FilterContainerProp } from './FacetTypes';
@ -20,7 +21,7 @@ const FilterContainer: FunctionComponent<FilterContainerProp> = ({
  count,
  onSelect,
  isSelected,
-  type,
+  type = '',
  isDisabled = false,
 }: FilterContainerProp) => {
  return (
@ -49,7 +50,8 @@ const FilterContainer: FunctionComponent<FilterContainerProp> = ({
          {name.startsWith('Tier.Tier') ? name.split('.')[1] : name}
        </div>
      </div>
-      {getCountBadge(count, classNames('tw-py-0 tw-px-0'), isSelected)}
+      {!isNil(count) &&
+        getCountBadge(count, classNames('tw-py-0 tw-px-0'), isSelected)}
    </div>
  );
 };
--- a/openmetadata-ui/src/main/resources/ui/src/pages/DashboardDetailsPage/DashboardDetailsPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/DashboardDetailsPage/DashboardDetailsPage.component.tsx
@ -11,7 +11,7 @@
 *  limitations under the License.
 */

-import { AxiosPromise, AxiosResponse } from 'axios';
+import { AxiosError, AxiosPromise, AxiosResponse } from 'axios';
 import { compare, Operation } from 'fast-json-patch';
 import {
  EntityTags,
@ -106,6 +106,7 @@ const DashboardDetailsPage = () => {
    state: false,
  });
  const [currentVersion, setCurrentVersion] = useState<string>();
+  const [deleted, setDeleted] = useState<boolean>(false);

  const activeTabHandler = (tabValue: number) => {
    const currentTabIndex = tabValue - 1;
@ -195,6 +196,22 @@ const DashboardDetailsPage = () => {
    });
  };

+  const getLineageData = () => {
+    getLineageByFQN(dashboardFQN, EntityType.DASHBOARD)
+      .then((res: AxiosResponse) => {
+        setEntityLineage(res.data);
+      })
+      .catch((err: AxiosError) => {
+        showToast({
+          variant: 'error',
+          body: err.message ?? 'Error while fetching lineage data',
+        });
+      })
+      .finally(() => {
+        setIsLineageLoading(false);
+      });
+  };
+
  const fetchDashboardDetail = (dashboardFQN: string) => {
    setLoading(true);
    getDashboardByFqn(dashboardFQN, [
@ -203,9 +220,11 @@ const DashboardDetailsPage = () => {
      'tags',
      'usageSummary',
      'charts',
-    ]).then((res: AxiosResponse) => {
+    ])
+      .then((res: AxiosResponse) => {
        const {
          id,
+          deleted,
          description,
          followers,
          fullyQualifiedName,
@ -228,6 +247,7 @@ const DashboardDetailsPage = () => {
        setTier(getTierTags(tags));
        setTags(getTagsWithoutTier(tags));
        setServiceType(serviceType);
+        setDeleted(deleted);
        setSlashedDashboardName([
          {
            name: service.name,
@ -254,16 +274,16 @@ const DashboardDetailsPage = () => {
          timestamp: 0,
        });

-      getLineageByFQN(dashboardFQN, EntityType.DASHBOARD)
-        .then((res: AxiosResponse) => {
-          setEntityLineage(res.data);
-        })
-        .finally(() => {
+        if (!deleted) {
+          getLineageData();
+        } else {
          setIsLineageLoading(false);
-        });
+        }

        setDashboardUrl(dashboardUrl);
        fetchCharts(charts).then((charts) => setCharts(charts));
+      })
+      .finally(() => {
        setLoading(false);
      });
  };
@ -432,6 +452,7 @@ const DashboardDetailsPage = () => {
          dashboardDetails={dashboardDetails}
          dashboardTags={tags}
          dashboardUrl={dashboardUrl}
+          deleted={deleted}
          description={description}
          descriptionUpdateHandler={descriptionUpdateHandler}
          entityLineage={entityLineage}
--- a/openmetadata-ui/src/main/resources/ui/src/pages/PipelineDetails/PipelineDetailsPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/PipelineDetails/PipelineDetailsPage.component.tsx
@ -11,7 +11,7 @@
 *  limitations under the License.
 */

-import { AxiosResponse } from 'axios';
+import { AxiosError, AxiosResponse } from 'axios';
 import { compare, Operation } from 'fast-json-patch';
 import { observer } from 'mobx-react';
 import {
@ -107,6 +107,7 @@ const PipelineDetailsPage = () => {
  const [leafNodes, setLeafNodes] = useState<LeafNodes>({} as LeafNodes);

  const [currentVersion, setCurrentVersion] = useState<string>();
+  const [deleted, setDeleted] = useState<boolean>(false);

  const activeTabHandler = (tabValue: number) => {
    const currentTabIndex = tabValue - 1;
@ -148,12 +149,29 @@ const PipelineDetailsPage = () => {
    });
  };

+  const getLineageData = () => {
+    getLineageByFQN(pipelineFQN, EntityType.PIPELINE)
+      .then((res: AxiosResponse) => {
+        setEntityLineage(res.data);
+      })
+      .catch((err: AxiosError) => {
+        showToast({
+          variant: 'error',
+          body: err.message ?? 'Error while fetching lineage data',
+        });
+      })
+      .finally(() => {
+        setIsLineageLoading(false);
+      });
+  };
+
  const fetchPipelineDetail = (pipelineFQN: string) => {
    setLoading(true);
    getPipelineByFqn(pipelineFQN, ['owner', 'followers', 'tags', 'tasks'])
      .then((res: AxiosResponse) => {
        const {
          id,
+          deleted,
          description,
          followers,
          fullyQualifiedName,
@ -176,6 +194,7 @@ const PipelineDetailsPage = () => {
        setTier(getTierTags(tags));
        setTags(getTagsWithoutTier(tags));
        setServiceType(serviceType);
+        setDeleted(deleted);
        setSlashedPipelineName([
          {
            name: service.name,
@ -201,6 +220,13 @@ const PipelineDetailsPage = () => {
          serviceType: serviceType,
          timestamp: 0,
        });
+
+        if (!deleted) {
+          getLineageData();
+        } else {
+          setIsLineageLoading(false);
+        }
+
        setPipelineUrl(pipelineUrl);
        setTasks(tasks);
      })
@ -343,14 +369,6 @@ const PipelineDetailsPage = () => {

  useEffect(() => {
    fetchPipelineDetail(pipelineFQN);
-    setActiveTab(getCurrentPipelineTab(tab));
-    getLineageByFQN(pipelineFQN, EntityType.PIPELINE)
-      .then((res: AxiosResponse) => {
-        setEntityLineage(res.data);
-      })
-      .finally(() => {
-        setIsLineageLoading(false);
-      });
  }, [pipelineFQN]);

  useEffect(() => {
@ -365,6 +383,7 @@ const PipelineDetailsPage = () => {
        <PipelineDetails
          activeTab={activeTab}
          addLineageHandler={addLineageHandler}
+          deleted={deleted}
          description={description}
          descriptionUpdateHandler={descriptionUpdateHandler}
          entityLineage={entityLineage}
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TopicDetails/TopicDetailsPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TopicDetails/TopicDetailsPage.component.tsx
@ -74,6 +74,7 @@ const TopicDetailsPage: FunctionComponent = () => {
  const [replicationFactor, setReplicationFactor] = useState<number>(0);
  const [retentionSize, setRetentionSize] = useState<number>(0);
  const [name, setName] = useState<string>('');
+  const [deleted, setDeleted] = useState<boolean>(false);

  const [schemaText, setSchemaText] = useState<string>('{}');
  const [slashedTopicName, setSlashedTopicName] = useState<
@ -121,6 +122,7 @@ const TopicDetailsPage: FunctionComponent = () => {
      .then((res: AxiosResponse) => {
        const {
          id,
+          deleted,
          description,
          followers,
          fullyQualifiedName,
@ -154,6 +156,7 @@ const TopicDetailsPage: FunctionComponent = () => {
        setMaximumMessageSize(maximumMessageSize);
        setReplicationFactor(replicationFactor);
        setRetentionSize(retentionSize);
+        setDeleted(deleted);
        setSlashedTopicName([
          {
            name: service.name,
@ -261,6 +264,7 @@ const TopicDetailsPage: FunctionComponent = () => {
        <TopicDetails
          activeTab={activeTab}
          cleanupPolicies={cleanupPolicies}
+          deleted={deleted}
          description={description}
          descriptionUpdateHandler={descriptionUpdateHandler}
          entityName={name}
--- a/openmetadata-ui/src/main/resources/ui/src/pages/explore/ExplorePage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/explore/ExplorePage.component.tsx
@ -57,6 +57,7 @@ const ExplorePage: FunctionComponent = () => {
  const [pipelineCount, setPipelineCount] = useState<number>(0);
  const [dbtModelCount, setDbtModelCount] = useState<number>(0);
  const [searchResult, setSearchResult] = useState<ExploreSearchData>();
+  const [showDeleted, setShowDeleted] = useState(false);
  const [initialSortField] = useState<string>(
    searchQuery
      ? tabsInfo[getCurrentTab(tab) - 1].sortField
@ -107,7 +108,8 @@ const ExplorePage: FunctionComponent = () => {
        initialFilter,
        emptyValue,
        emptyValue,
-        entity
+        entity,
+        showDeleted
      )
    );

@ -166,7 +168,8 @@ const ExplorePage: FunctionComponent = () => {
        d.filters,
        d.sortField,
        d.sortOrder,
-        d.searchIndex
+        d.searchIndex,
+        showDeleted
      );
    });

@ -198,7 +201,7 @@ const ExplorePage: FunctionComponent = () => {

  useEffect(() => {
    fetchCounts();
-  }, [searchText]);
+  }, [searchText, showDeleted]);

  useEffect(() => {
    AppState.explorePageTab = tab;
@ -260,6 +263,7 @@ const ExplorePage: FunctionComponent = () => {
            searchQuery={searchQuery}
            searchResult={searchResult}
            searchText={searchText}
+            showDeleted={showDeleted}
            sortValue={initialSortField}
            tab={tab}
            tabCounts={{
@ -274,6 +278,7 @@ const ExplorePage: FunctionComponent = () => {
            updatePipelineCount={handlePipelineCount}
            updateTableCount={handleTableCount}
            updateTopicCount={handleTopicCount}
+            onShowDeleted={(checked) => setShowDeleted(checked)}
          />
        </PageContainerV1>
      )}
--- a/openmetadata-ui/src/main/resources/ui/src/pages/tour-page/TourPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/tour-page/TourPage.component.tsx
@ -146,6 +146,7 @@ const TourPage = () => {
            searchQuery=""
            searchResult={exploreSearchResult as unknown as ExploreSearchData}
            searchText=""
+            showDeleted={false}
            sortValue=""
            tab=""
            tabCounts={explorePageCounts}
@ -154,6 +155,9 @@ const TourPage = () => {
            updatePipelineCount={handleCountChange}
            updateTableCount={handleCountChange}
            updateTopicCount={handleCountChange}
+            onShowDeleted={() => {
+              return;
+            }}
          />
        );

--- a/openmetadata-ui/src/main/resources/ui/src/utils/SearchUtils.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/SearchUtils.ts
@ -18,7 +18,8 @@ export const getSearchAPIQuery = (
  filters: string,
  sortField: string,
  sortOrder: string,
-  searchIndex: string
+  searchIndex: string,
+  onlyDeleted = false
 ): string => {
  const start = (from - 1) * size;
  const query = queryString
@ -29,7 +30,9 @@ export const getSearchAPIQuery = (

  return `q=${query}${
    filters ? ` AND ${filters}` : ''
-  }&from=${start}&size=${size}${sortField ? `&sort_field=${sortField}` : ''}${
-    sortOrder ? `&sort_order=${sortOrder}` : ''
-  }${searchIndex ? `&index=${searchIndex}` : ''}`;
+  }&from=${start}&size=${size}${onlyDeleted ? '&deleted=true' : ''}${
+    sortField ? `&sort_field=${sortField}` : ''
+  }${sortOrder ? `&sort_order=${sortOrder}` : ''}${
+    searchIndex ? `&index=${searchIndex}` : ''
+  }`;
 };