[YW][2.1.8] Fix dropdown options for universe-level backup and allow …

…edit of table name in blank RestoreBackup modal.

Summary:
Add specific check for universe-level backup and remove transactional backup value if
present. Change RestoreBackup modal to allow for editable table name in the event the user wants to
rename the target for a single table backup.

Test Plan:
Select universe-level backup and confirm that the dropdown options are correct.

Incorrect dropdown option in original:
{F13825}

Incorrect showing of transactional backup toggle (which is not supported in 2.1.8):
{F13826}

Fixed dropdown:
{F13827}

Fixed hiding of transactional backup toggle:
{F13828}

Try restoring single and multi-table backups from 'Restore Backup' button and table action.

Fixed restore modal allowing editable table name field:
{F13829}

Restore modal single table:
{F13835}

Restore modal multi-table:
{F13836}

Reviewers: arnav, rahuldesirazu, sshevchenko

Reviewed By: sshevchenko

Subscribers: ui

Differential Revision: https://phabricator.dev.yugabyte.com/D8980

managed/ui/src/components/tables/CreateBackup/CreateBackup.js

@@ -52,7 +52,7 @@ export default class CreateBackup extends Component {
       createUniverseBackup,
       universeTables
     } = this.props;
-
+    
     if (isDefinedNotNull(values.storageConfigUUID)) {
       const payload = {
         "storageConfigUUID": values.storageConfigUUID,
@@ -61,7 +61,12 @@ export default class CreateBackup extends Component {
         "schedulingFrequency": isEmptyString(values.schedulingFrequency) ? null : values.schedulingFrequency,
         "cronExpression": isNonEmptyString(values.cronExpression) ? values.cronExpression : null,
       };
-      if (isDefinedNotNull(values.backupTableUUID) && values.backupTableUUID.length) {
+      if (isDefinedNotNull(values.tableKeyspace) && values.tableKeyspace.value === "allkeyspaces") {
+        // Backup all tables in all keyspaces
+        // AC: v2.1.8 No transactional backup for universe
+        payload.transactionalBackup = false; 
+        createUniverseBackup(universeUUID, payload);
+      } else if (isDefinedNotNull(values.backupTableUUID) && values.backupTableUUID.length) {
         values.backupTableUUID = Array.isArray(values.backupTableUUID) ? 
           values.backupTableUUID.map(x => x.value) : [values.backupTableUUID.value];
         if (values.backupTableUUID[0] === "alltables") {
@@ -176,23 +181,25 @@ export default class CreateBackup extends Component {
             const isKeyspaceSelected = tableKeyspace && tableKeyspace.value;
             const universeBackupSelected = isKeyspaceSelected && tableKeyspace.value === 'allkeyspaces';
             const s3StorageSelected = storageConfigUUID && storageConfigUUID.label === 'S3 Storage';
-
-            const showTransactionalToggle = isKeyspaceSelected && 
+            const showTransactionalToggle = isKeyspaceSelected && !universeBackupSelected &&
               (!!isTableSelected && (backupTableUUID.length > 1 || backupTableUUID[0].value === 'alltables'));
 
             const displayedTables = [
               {
                 label: <b>All Tables in Keyspace</b>,
                 value: "alltables",
-              },
-              !universeBackupSelected && {
+              }
+            ];
+
+            if (!universeBackupSelected) {
+              displayedTables.push({
                 label: "Tables",
                 value: 'tables',
                 options: isKeyspaceSelected ?
                   tableOptions.filter(option => option.keyspace === tableKeyspace.value) :
                   tableOptions
-              }
-            ];
+              });
+            }
             keyspaceOptions = [{
               label: <b>All Keyspaces</b>,
               value: "allkeyspaces",

managed/ui/src/components/tables/RestoreBackup/RestoreBackup.js

@@ -28,13 +28,15 @@ export default class RestoreBackup extends Component {
       const payload = {
         storageConfigUUID: values.storageConfigUUID,
         storageLocation:  values.storageLocation,
-        actionType: 'RESTORE',
-        // tableName: values.restoreToTableName,        
+        actionType: 'RESTORE',   
       };
-      // TODO: Allow renaming of individual tables
-      if (values.keyspace !== initialValues.keyspace) {
+      if (values.restoreToTableName !== initialValues.restoreToTableName) {
+        payload.keyspace = values.restoreToKeyspace;
+        payload.tableName = values.restoreToTableName;
+      } else if (values.restoreToKeyspace !== initialValues.restoreToKeyspace) {
         payload.keyspace = values.restoreToKeyspace;
       }
+
       onHide();
       restoreTableBackup(restoreToUniverseUUID, payload);
       browserHistory.push('/universes/' + restoreToUniverseUUID + "/backups");
@@ -45,7 +47,7 @@ export default class RestoreBackup extends Component {
   }
 
   render() {
-    const { visible, onHide, universeList, storageConfigs, currentUniverse } = this.props;
+    const { visible, onHide, universeList, storageConfigs, currentUniverse, backupInfo } = this.props;
 
     // If the backup information is not provided, most likely we are trying to load the backup
     // from pre-existing location (specified by the user) into the current universe in context.
@@ -84,6 +86,12 @@ export default class RestoreBackup extends Component {
       ...this.props.initialValues,
       storageConfigUUID: hasBackupInfo ? storageOptions.find((element) => { return element.value === this.props.initialValues.storageConfigUUID;}) : ""
     };
+    // Disable table field if multi-table backup
+    // Second line checks whether `tableNameList` is empty array
+    const isMultiTableBackup = hasBackupInfo && (
+      (backupInfo.tableNameList && backupInfo.tableNameList.length > 1) ||
+      (backupInfo.keyspace && (!backupInfo.tableNameList || !backupInfo.tableNameList.length) && !backupInfo.tableUUID)
+    );
 
     return (
       <div className="universe-apps-modal" onClick={(e) => e.stopPropagation()}>
@@ -123,7 +131,7 @@ export default class RestoreBackup extends Component {
                 label={"Keyspace"} />
           <Field name="restoreToTableName"
                 component={YBFormInput}
-                disabled={true}
+                disabled={isMultiTableBackup}
                 label={"Table"}/>
         </YBModalForm>
       </div>