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

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

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

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

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

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,25 +417,27 @@ const DashboardDetails = ({
                                       </span>
                                     )}
                                   </div>
-                                  <NonAdminAction
+                                  {!deleted && (
-                                    html={getHtmlForNonAdminAction(
+                                    <NonAdminAction
-                                      Boolean(owner)
+                                      html={getHtmlForNonAdminAction(
-                                    )}
+                                        Boolean(owner)
-                                    isOwner={hasEditAccess()}
+                                      )}
-                                    position="top">
+                                      isOwner={hasEditAccess()}
-                                    <button
+                                      position="top">
-                                      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"
+                                      <button
-                                      onClick={() =>
+                                        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"
-                                        handleUpdateChart(chart, index)
+                                        onClick={() =>
-                                      }>
+                                          handleUpdateChart(chart, index)
-                                      <SVGIcons
+                                        }>
-                                        alt="edit"
+                                        <SVGIcons
-                                        icon="icon-edit"
+                                          alt="edit"
-                                        title="Edit"
+                                          icon="icon-edit"
-                                        width="10px"
+                                          title="Edit"
-                                      />
+                                          width="10px"
-                                    </button>
+                                        />
-                                  </NonAdminAction>
+                                      </button>
+                                    </NonAdminAction>
+                                  )}
                                 </div>
                               </div>
                             </td>
@@ -442,44 +448,61 @@ const DashboardDetails = ({
                                   handleEditChartTag(chart, index);
                                 }
                               }}>
-                              <NonAdminAction
+                              {deleted ? (
-                                html={getHtmlForNonAdminAction(Boolean(owner))}
+                                <div className="tw-flex tw-flex-wrap">
-                                isOwner={hasEditAccess()}
+                                  {chart.tags?.map(
-                                position="left"
+                                    (tag: TagLabel, i: number) => (
-                                trigger="click">
-                                <TagsContainer
-                                  editable={editChartTags?.index === index}
-                                  selectedTags={chart.tags as EntityTags[]}
-                                  tagList={tagList}
-                                  type="label"
-                                  onCancel={() => {
-                                    handleChartTagSelection();
-                                  }}
-                                  onSelectionChange={(tags) => {
-                                    handleChartTagSelection(tags);
-                                  }}>
-                                  {chart.tags?.length ? (
-                                    <button
-                                      className="tw-opacity-0 tw-ml-1 group-hover:tw-opacity-100 focus:tw-outline-none"
-                                      data-testid="edit-tags">
-                                      <SVGIcons
-                                        alt="edit"
-                                        icon="icon-edit"
-                                        title="Edit"
-                                        width="10px"
-                                      />
-                                    </button>
-                                  ) : (
-                                    <span className="tw-opacity-60 group-hover:tw-opacity-100 tw-text-grey-muted group-hover:tw-text-primary">
                                       <Tags
-                                        startWith="+ "
+                                        key={i}
-                                        tag="Add tag"
+                                        startWith="#"
-                                        type="outlined"
+                                        tag={tag}
+                                        type="label"
                                       />
-                                    </span>
+                                    )
                                   )}
-                                </TagsContainer>
+                                </div>
-                              </NonAdminAction>
+                              ) : (
+                                <NonAdminAction
+                                  html={getHtmlForNonAdminAction(
+                                    Boolean(owner)
+                                  )}
+                                  isOwner={hasEditAccess()}
+                                  position="left"
+                                  trigger="click">
+                                  <TagsContainer
+                                    editable={editChartTags?.index === index}
+                                    selectedTags={chart.tags as EntityTags[]}
+                                    tagList={tagList}
+                                    type="label"
+                                    onCancel={() => {
+                                      handleChartTagSelection();
+                                    }}
+                                    onSelectionChange={(tags) => {
+                                      handleChartTagSelection(tags);
+                                    }}>
+                                    {chart.tags?.length ? (
+                                      <button
+                                        className="tw-opacity-0 tw-ml-1 group-hover:tw-opacity-100 focus:tw-outline-none"
+                                        data-testid="edit-tags">
+                                        <SVGIcons
+                                          alt="edit"
+                                          icon="icon-edit"
+                                          title="Edit"
+                                          width="10px"
+                                        />
+                                      </button>
+                                    ) : (
+                                      <span className="tw-opacity-60 group-hover:tw-opacity-100 tw-text-grey-muted group-hover:tw-text-primary">
+                                        <Tags
+                                          startWith="+ "
+                                          tag="Add tag"
+                                          type="outlined"
+                                        />
+                                      </span>
+                                    )}
+                                  </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}

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;

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}

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,41 +586,43 @@ 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 }}>
-                  <ControlButton
+                  {!deleted && (
-                    className={classNames(
+                    <ControlButton
-                      'tw-h-9 tw-w-9 tw-rounded-full tw-px-1 tw-shadow-lg tw-cursor-pointer',
+                      className={classNames(
-                      {
+                        'tw-h-9 tw-w-9 tw-rounded-full tw-px-1 tw-shadow-lg tw-cursor-pointer',
-                        'tw-bg-primary': isEditMode,
+                        {
-                        'tw-bg-primary-hover-lite': !isEditMode,
+                          'tw-bg-primary': isEditMode,
-                      }
+                          'tw-bg-primary-hover-lite': !isEditMode,
-                    )}
-                    onClick={() => {
-                      setEditMode((pre) => !pre);
-                      setSelectedNode({} as SelectedNode);
-                      setIsDrawerOpen(false);
-                      setNewAddedNode({} as FlowElement);
-                    }}>
-                    {loading ? (
-                      <Loader size="small" type="white" />
-                    ) : status === 'success' ? (
-                      <i
-                        aria-hidden="true"
-                        className="fa fa-check tw-text-white"
-                      />
-                    ) : (
-                      <SVGIcons
-                        alt="icon-edit-lineag"
-                        className="tw--mt-1"
-                        data-testid="edit-lineage"
-                        icon={
-                          !isEditMode
-                            ? 'icon-edit-lineage-color'
-                            : 'icon-edit-lineage'
                         }
-                        width="14"
+                      )}
-                      />
+                      onClick={() => {
-                    )}
+                        setEditMode((pre) => !pre && !deleted);
-                  </ControlButton>
+                        setSelectedNode({} as SelectedNode);
+                        setIsDrawerOpen(false);
+                        setNewAddedNode({} as FlowElement);
+                      }}>
+                      {loading ? (
+                        <Loader size="small" type="white" />
+                      ) : status === 'success' ? (
+                        <i
+                          aria-hidden="true"
+                          className="fa fa-check tw-text-white"
+                        />
+                      ) : (
+                        <SVGIcons
+                          alt="icon-edit-lineag"
+                          className="tw--mt-1"
+                          data-testid="edit-lineage"
+                          icon={
+                            !isEditMode
+                              ? 'icon-edit-lineage-color'
+                              : 'icon-edit-lineage'
+                          }
+                          width="14"
+                        />
+                      )}
+                    </ControlButton>
+                  )}
                 </CustomControls>
                 {isEditMode ? (
                   <Background

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;

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

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,

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

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,16 +369,27 @@ const PipelineDetails = ({
                                     </span>
                                   )}
                                 </div>
-                                <button
+                                {!deleted && (
-                                  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"
+                                  <NonAdminAction
-                                  onClick={() => handleUpdateTask(task, index)}>
+                                    html={getHtmlForNonAdminAction(
-                                  <SVGIcons
+                                      Boolean(owner)
-                                    alt="edit"
+                                    )}
-                                    icon="icon-edit"
+                                    isOwner={hasEditAccess()}
-                                    title="Edit"
+                                    position="top">
-                                    width="10px"
+                                    <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"
-                                </button>
+                                      onClick={() =>
+                                        handleUpdateTask(task, index)
+                                      }>
+                                      <SVGIcons
+                                        alt="edit"
+                                        icon="icon-edit"
+                                        title="Edit"
+                                        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}

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;

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}

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;

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}

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

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

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

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,69 +220,72 @@ const DashboardDetailsPage = () => {
       'tags',
       'usageSummary',
       'charts',
-    ]).then((res: AxiosResponse) => {
+    ])
-      const {
+      .then((res: AxiosResponse) => {
-        id,
+        const {
-        description,
+          id,
-        followers,
+          deleted,
-        fullyQualifiedName,
+          description,
-        service,
+          followers,
-        tags,
+          fullyQualifiedName,
-        owner,
+          service,
-        displayName,
+          tags,
-        charts,
+          owner,
-        dashboardUrl,
+          displayName,
-        serviceType,
+          charts,
-        version,
+          dashboardUrl,
-      } = res.data;
+          serviceType,
-      setDisplayName(displayName);
+          version,
-      setDashboardDetails(res.data);
+        } = res.data;
-      setCurrentVersion(version);
+        setDisplayName(displayName);
-      setDashboardId(id);
+        setDashboardDetails(res.data);
-      setDescription(description ?? '');
+        setCurrentVersion(version);
-      setFollowers(followers);
+        setDashboardId(id);
-      setOwner(getOwnerFromId(owner?.id));
+        setDescription(description ?? '');
-      setTier(getTierTags(tags));
+        setFollowers(followers);
-      setTags(getTagsWithoutTier(tags));
+        setOwner(getOwnerFromId(owner?.id));
-      setServiceType(serviceType);
+        setTier(getTierTags(tags));
-      setSlashedDashboardName([
+        setTags(getTagsWithoutTier(tags));
-        {
+        setServiceType(serviceType);
-          name: service.name,
+        setDeleted(deleted);
-          url: service.name
+        setSlashedDashboardName([
-            ? getServiceDetailsPath(
+          {
-                service.name,
+            name: service.name,
-                serviceType,
+            url: service.name
-                ServiceCategory.DASHBOARD_SERVICES
+              ? getServiceDetailsPath(
-              )
+                  service.name,
-            : '',
+                  serviceType,
-          imgSrc: serviceType ? serviceTypeLogo(serviceType) : undefined,
+                  ServiceCategory.DASHBOARD_SERVICES
-        },
+                )
-        {
+              : '',
-          name: displayName,
+            imgSrc: serviceType ? serviceTypeLogo(serviceType) : undefined,
-          url: '',
+          },
-          activeTitle: true,
+          {
-        },
+            name: displayName,
-      ]);
+            url: '',
+            activeTitle: true,
+          },
+        ]);
 
-      addToRecentViewed({
+        addToRecentViewed({
-        entityType: EntityType.DASHBOARD,
+          entityType: EntityType.DASHBOARD,
-        fqn: fullyQualifiedName,
+          fqn: fullyQualifiedName,
-        serviceType: serviceType,
+          serviceType: serviceType,
-        timestamp: 0,
+          timestamp: 0,
-      });
-
-      getLineageByFQN(dashboardFQN, EntityType.DASHBOARD)
-        .then((res: AxiosResponse) => {
-          setEntityLineage(res.data);
-        })
-        .finally(() => {
-          setIsLineageLoading(false);
         });
 
-      setDashboardUrl(dashboardUrl);
+        if (!deleted) {
-      fetchCharts(charts).then((charts) => setCharts(charts));
+          getLineageData();
-      setLoading(false);
+        } else {
-    });
+          setIsLineageLoading(false);
+        }
+
+        setDashboardUrl(dashboardUrl);
+        fetchCharts(charts).then((charts) => setCharts(charts));
+      })
+      .finally(() => {
+        setLoading(false);
+      });
   };
 
   const descriptionUpdateHandler = (updatedDashboard: Dashboard) => {
@@ -432,6 +452,7 @@ const DashboardDetailsPage = () => {
           dashboardDetails={dashboardDetails}
           dashboardTags={tags}
           dashboardUrl={dashboardUrl}
+          deleted={deleted}
           description={description}
           descriptionUpdateHandler={descriptionUpdateHandler}
           entityLineage={entityLineage}

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}

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}

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

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

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}` : ''}${
+  }&from=${start}&size=${size}${onlyDeleted ? '&deleted=true' : ''}${
-    sortOrder ? `&sort_order=${sortOrder}` : ''
+    sortField ? `&sort_field=${sortField}` : ''
-  }${searchIndex ? `&index=${searchIndex}` : ''}`;
+  }${sortOrder ? `&sort_order=${sortOrder}` : ''}${
+    searchIndex ? `&index=${searchIndex}` : ''
+  }`;
 };