[PLAT-15079] Treat dropped on target tables as unconfigured but prese…

…lected

Summary:
**Context**
We have added a change to set DroppedFromTarget status for tables which are dropped from
the target universe only here: 1655e69
On the YBA UI, we need to be including these tables in our bootstrap requirement check
because they will require a bootstrap to be added back to replication due to missing table
on target.

**Change**
On the YBA UI, we will consider tables which are dropped on the target as unconfigured,
but preselected.
This means we will preselect the table when users go to the edit table modal, but also
treat the table as unconfigured and send it along for the need bootstrap check.
This will allow the backend to return the detailed need bootstrap response for these
tables which will be presented on the bootstrap summary page.

This diff also hides the 'no full copy planned' category box if there are no groups of tables which meet this category definition.

Test Plan:
Create an xCluster config.
- Drop a table only on the target universe.
- Add an empty table to both the source and target universe.
- Add the new empty table to replication.
- Verify that the bootstrap summary page indicates we require a full copy (aka
bootstrap) for the table which was dropped only on the target.
{F284195}
{F284243}

Reviewers: vbansal, hzare, cwang, rmadhavan, kkannan, lsangappa

Reviewed By: hzare

Subscribers: yugaware

Differential Revision: https://phorge.dev.yugabyte.com/D37949

managed/ui/src/components/xcluster/constants.ts

@@ -65,7 +65,9 @@ export const SOURCE_MISSING_XCLUSTER_TABLE_STATUSES: readonly XClusterTableStatu
 
 export const UNCONFIGURED_XCLUSTER_TABLE_STATUSES: readonly XClusterTableStatus[] = [
   XClusterTableStatus.EXTRA_TABLE_ON_SOURCE,
-  XClusterTableStatus.EXTRA_TABLE_ON_TARGET
+  XClusterTableStatus.EXTRA_TABLE_ON_TARGET,
+  XClusterTableStatus.DROPPED,
+  XClusterTableStatus.DROPPED_FROM_TARGET
 ];
 
 export const DROPPED_XCLUSTER_TABLE_STATUSES: readonly XClusterTableStatus[] = [

managed/ui/src/components/xcluster/disasterRecovery/editTables/EditTablesModal.tsx

@@ -539,6 +539,9 @@ export const classifyTablesAndNamespaces = (
         tableUuidsDroppedOnSource.add(tableUuid);
         return;
       case XClusterTableStatus.DROPPED_FROM_TARGET:
+        // We treat tables which are dropped on the target as unconfigured but preselected.
+        // This means there is no action needed from the user. We will be checking the bootstrapping requirement
+        // and just adding the table to the config (unless the user deselects the table of course).
         if (sourceTableInfo) {
           selectedTableUuids.add(getTableUuid(sourceTableInfo));
           selectedNamespaceUuid.add(namespaceToNamespaceUuid[sourceTableInfo.keySpace]);

managed/ui/src/components/xcluster/sharedComponents/bootstrapSummary/BootstrapSummary.tsx

@@ -148,6 +148,10 @@ export const BootstrapSummary = (props: ConfigureBootstrapStepProps) => {
   const isPossibleDataInconsistencyPresent =
     (bootstrapTableUuids.length > 0 && skipBootstrap) ||
     numTablesRequiringBootstrapInBidirectionalDb > 0;
+  const noBootstrapPlannedTableCount = noBootstrapPlannedCategories.reduce(
+    (tableCount, category) => tableCount + category.tableCount,
+    0
+  );
 
   // Defining user facing product terms here.
   const sourceUniverseTerm = t(`source.${props.isDrInterface ? 'dr' : 'xClusterReplication'}`, {
@@ -213,7 +217,7 @@ export const BootstrapSummary = (props: ConfigureBootstrapStepProps) => {
         </>
       )}
       <Box marginTop={3} display="flex" gridGap={theme.spacing(3)}>
-        <div>
+        {noBootstrapPlannedTableCount > 0 && (
           <div className={classes.bootstrapCategoryGroup}>
             <Typography variant="body1">{t('categoryGroup.noBootstrapPlanned')}</Typography>
             <div className={classes.bootstrapCategoryCardContainer}>
@@ -230,7 +234,7 @@ export const BootstrapSummary = (props: ConfigureBootstrapStepProps) => {
               ))}
             </div>
           </div>
-        </div>
+        )}
         {bootstrapTableUuids.length > 0 && !skipBootstrap && (
           <div className={classes.bootstrapCategoryGroup}>
             <Typography variant="body1">{t('categoryGroup.bootstrapPlanned')}</Typography>