Fix: Added UI support for deleted entity versions (#2424)

* Added UI version support for deleted entities

* Added deleted entity UI changes for versions page

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

@@ -44,6 +44,7 @@ const DashboardVersion: FC<DashboardVersionProp> = ({
   tier,
   slashedDashboardName,
   versionList,
+  deleted = false,
   backHandler,
   versionHandler,
 }: DashboardVersionProp) => {
@@ -219,6 +220,7 @@ const DashboardVersion: FC<DashboardVersionProp> = ({
           <div className={classNames('version-data')}>
             <EntityPageInfo
               isVersionSelected
+              deleted={deleted}
               entityName={currentVersionData.name ?? ''}
               extraInfo={getExtraInfo()}
               followersList={[]}

openmetadata-ui/src/main/resources/ui/src/components/DashboardVersion/DashboardVersion.interface.ts

@@ -26,6 +26,7 @@ export interface DashboardVersionProp {
   slashedDashboardName: TitleBreadcrumbProps['titleLinks'];
   topicFQN: string;
   versionList: EntityHistory;
+  deleted?: boolean;
   backHandler: () => void;
   versionHandler: (v: string) => void;
 }

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

@@ -44,6 +44,7 @@ const PipelineVersion: FC<PipelineVersionProp> = ({
   tier,
   slashedPipelineName,
   versionList,
+  deleted = false,
   backHandler,
   versionHandler,
 }: PipelineVersionProp) => {
@@ -219,6 +220,7 @@ const PipelineVersion: FC<PipelineVersionProp> = ({
           <div className={classNames('version-data')}>
             <EntityPageInfo
               isVersionSelected
+              deleted={deleted}
               entityName={currentVersionData.name ?? ''}
               extraInfo={getExtraInfo()}
               followersList={[]}

openmetadata-ui/src/main/resources/ui/src/components/PipelineVersion/PipelineVersion.interface.ts

@@ -26,6 +26,7 @@ export interface PipelineVersionProp {
   slashedPipelineName: TitleBreadcrumbProps['titleLinks'];
   topicFQN: string;
   versionList: EntityHistory;
+  deleted?: boolean;
   backHandler: () => void;
   versionHandler: (v: string) => void;
 }

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

@@ -42,6 +42,7 @@ const TopicVersion: FC<TopicVersionProp> = ({
   tier,
   slashedTopicName,
   versionList,
+  deleted = false,
   backHandler,
   versionHandler,
 }: TopicVersionProp) => {
@@ -264,6 +265,7 @@ const TopicVersion: FC<TopicVersionProp> = ({
           <div className={classNames('version-data')}>
             <EntityPageInfo
               isVersionSelected
+              deleted={deleted}
               entityName={currentVersionData.name ?? ''}
               extraInfo={getExtraInfo()}
               followersList={[]}

openmetadata-ui/src/main/resources/ui/src/components/TopicVersion/TopicVersion.interface.ts

@@ -26,6 +26,7 @@ export interface TopicVersionProp {
   slashedTopicName: TitleBreadcrumbProps['titleLinks'];
   topicFQN: string;
   versionList: EntityHistory;
+  deleted?: boolean;
   backHandler: () => void;
   versionHandler: (v: string) => void;
 }

openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/EntityPageInfo.tsx

@@ -142,9 +142,7 @@ const EntityPageInfo = ({
 
   const getVersionButton = (version: string) => {
     return (
-      <div
+      <div className="tw-flex tw-h-6 tw-ml-2 tw-mt-2" onClick={versionHandler}>
-        className="tw-flex tw-h-6 tw-ml-2 tw-mt-2"
-        onClick={() => !deleted && versionHandler?.()}>
         <span
           className={classNames(
             'tw-flex tw-border tw-border-primary tw-rounded',
@@ -157,10 +155,7 @@ const EntityPageInfo = ({
               'tw-text-xs tw-border-r tw-font-medium tw-py-1 tw-px-2 tw-rounded-l focus:tw-outline-none',
               !isUndefined(isVersionSelected)
                 ? 'tw-border-white'
-                : 'tw-border-primary',
+                : 'tw-border-primary'
-              {
-                'tw-cursor-not-allowed': deleted,
-              }
             )}
             data-testid="version-button">
             <SVGIcons
@@ -171,12 +166,7 @@ const EntityPageInfo = ({
           </button>
 
           <span
-            className={classNames(
+            className="tw-text-xs tw-border-l-0 tw-font-medium tw-py-1 tw-px-2 tw-rounded-r tw-cursor-pointer"
-              'tw-text-xs tw-border-l-0 tw-font-medium tw-py-1 tw-px-2 tw-rounded-r tw-cursor-pointer',
-              {
-                'tw-cursor-not-allowed': deleted,
-              }
-            )}
             data-testid="getversions">
             {parseFloat(version).toFixed(1)}
           </span>

openmetadata-ui/src/main/resources/ui/src/pages/EntityVersionPage/EntityVersionPage.component.tsx

@@ -598,6 +598,7 @@ const EntityVersionPage: FunctionComponent = () => {
           <TopicVersion
             backHandler={backHandler}
             currentVersionData={currentVersionData}
+            deleted={currentVersionData.deleted}
             isVersionLoading={isVersionLoading}
             owner={owner}
             slashedTopicName={slashedEntityName}
@@ -615,6 +616,7 @@ const EntityVersionPage: FunctionComponent = () => {
           <DashboardVersion
             backHandler={backHandler}
             currentVersionData={currentVersionData}
+            deleted={currentVersionData.deleted}
             isVersionLoading={isVersionLoading}
             owner={owner}
             slashedDashboardName={slashedEntityName}
@@ -632,6 +634,7 @@ const EntityVersionPage: FunctionComponent = () => {
           <PipelineVersion
             backHandler={backHandler}
             currentVersionData={currentVersionData}
+            deleted={currentVersionData.deleted}
             isVersionLoading={isVersionLoading}
             owner={owner}
             slashedPipelineName={slashedEntityName}

openmetadata-ui/src/main/resources/ui/src/utils/EntityVersionUtils.tsx

@@ -527,28 +527,48 @@ export const getSummary = (
 ) => {
   const fieldsAdded = [...(changeDescription?.fieldsAdded || [])];
   const fieldsDeleted = [...(changeDescription?.fieldsDeleted || [])];
-  const fieldsUpdated = [...(changeDescription?.fieldsUpdated || [])];
+  const fieldsUpdated = [
+    ...(changeDescription?.fieldsUpdated?.filter(
+      (field) => field.name !== 'deleted'
+    ) || []),
+  ];
+  const isDeleteUpdated = [
+    ...(changeDescription?.fieldsUpdated?.filter(
+      (field) => field.name === 'deleted'
+    ) || []),
+  ];
 
   return (
     <Fragment>
+      {isDeleteUpdated?.length > 0 ? (
+        <p className="tw-mb-2">
+          {isDeleteUpdated
+            .map((field) => {
+              return field.newValue
+                ? 'Entity has been deleted'
+                : 'Entity has been restored';
+            })
+            .join(', ')}
+        </p>
+      ) : null}
       {fieldsAdded?.length > 0 ? (
         <p className="tw-mb-2">
           {`${isPrefix ? '+ Added' : ''} ${fieldsAdded
-            ?.map(summaryFormatter)
+            .map(summaryFormatter)
             .join(', ')} ${!isPrefix ? `has been added` : ''}`}{' '}
         </p>
       ) : null}
       {fieldsUpdated?.length ? (
         <p className="tw-mb-2">
           {`${isPrefix ? 'Edited' : ''} ${fieldsUpdated
-            ?.map(summaryFormatter)
+            .map(summaryFormatter)
             .join(', ')} ${!isPrefix ? `has been updated` : ''}`}{' '}
         </p>
       ) : null}
       {fieldsDeleted?.length ? (
         <p className="tw-mb-2">
           {`${isPrefix ? '- Removed' : ''} ${fieldsDeleted
-            ?.map(summaryFormatter)
+            .map(summaryFormatter)
             .join(', ')} ${!isPrefix ? `has been Deleted` : ''}`}{' '}
         </p>
       ) : null}