From d5c01fcd7d2a1fbbbdbab9ac1bc3a1a284b705b1 Mon Sep 17 00:00:00 2001
From: Cesar N <ces.nietor@gmail.com>
Date: Mon, 14 Dec 2020 17:31:37 -0600
Subject: [PATCH] Integrate retention option during bucket creation on UI
 (#509)

---
 .../Console/Buckets/ListBuckets/AddBucket.tsx | 154 ++++++++++++++++--
 .../src/screens/Console/Buckets/actions.ts    |  57 ++++++-
 .../src/screens/Console/Buckets/reducers.ts   |  37 +++++
 .../src/screens/Console/Buckets/types.tsx     |   7 +
 4 files changed, 243 insertions(+), 12 deletions(-)

diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket.tsx
index 7882b7ead..1da70633f 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket.tsx
@@ -23,6 +23,7 @@ import api from "../../../../common/api";
 import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
 import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapper";
+import RadioGroupSelector from "../../Common/FormComponents/RadioGroupSelector/RadioGroupSelector";
 import { factorForDropdown, getBytes } from "../../../../common/utils";
 import { AppState } from "../../../../store";
 import { connect } from "react-redux";
@@ -33,6 +34,10 @@ import {
   addBucketQuotaType,
   addBucketQuotaUnit,
   addBucketVersioned,
+  addBucketRetention,
+  addBucketRetentionMode,
+  addBucketRetentionUnit,
+  addBucketRetentionValidity,
 } from "../actions";
 import { useDebounce } from "use-debounce";
 import { MakeBucketRequest } from "../types";
@@ -71,12 +76,20 @@ interface IAddBucketProps {
   addBucketQuotaType: typeof addBucketQuotaType;
   addBucketQuotaSize: typeof addBucketQuotaSize;
   addBucketQuotaUnit: typeof addBucketQuotaUnit;
+  addBucketRetention: typeof addBucketRetention;
+  addBucketRetentionMode: typeof addBucketRetentionMode;
+  addBucketRetentionUnit: typeof addBucketRetentionUnit;
+  addBucketRetentionValidity: typeof addBucketRetentionValidity;
   bucketName: string;
   versioned: boolean;
   enableQuota: boolean;
   quotaType: string;
   quotaSize: string;
   quotaUnit: string;
+  enableRetention: boolean;
+  retentionMode: string;
+  retentionUnit: string;
+  retentionValidity: number;
 }
 
 const AddBucket = ({
@@ -89,14 +102,21 @@ const AddBucket = ({
   addBucketQuotaType,
   addBucketQuotaSize,
   addBucketQuotaUnit,
+  addBucketRetention,
+  addBucketRetentionMode,
+  addBucketRetentionUnit,
+  addBucketRetentionValidity,
   bucketName,
   versioned,
   enableQuota,
   quotaType,
   quotaSize,
   quotaUnit,
+  enableRetention,
+  retentionMode,
+  retentionUnit,
+  retentionValidity,
 }: IAddBucketProps) => {
-  const [bName, setBName] = useState<string>(bucketName);
   const [addLoading, setAddLoading] = useState<boolean>(false);
   const [addError, setAddError] = useState<string>("");
   const [sendEnabled, setSendEnabled] = useState<boolean>(false);
@@ -122,6 +142,14 @@ const AddBucket = ({
       };
     }
 
+    if (enableRetention) {
+      request.retention = {
+        mode: retentionMode,
+        unit: retentionUnit,
+        validity: retentionValidity,
+      };
+    }
+
     api
       .invoke("POST", "/api/v1/buckets", request)
       .then((res) => {
@@ -133,27 +161,33 @@ const AddBucket = ({
         setAddLoading(false);
         setAddError(err);
       });
+
+    resetForm();
   };
 
-  const [value] = useDebounce(bName, 1000);
+  const [value] = useDebounce(bucketName, 1000);
 
   useEffect(() => {
     addBucketName(value);
   }, [value, addBucketName]);
 
   const resetForm = () => {
-    setBName("");
+    addBucketName("");
     addBucketVersioned(false);
     addBucketQuota(false);
     addBucketQuotaType("hard");
     addBucketQuotaSize("1");
     addBucketQuotaUnit("TiB");
+    addBucketRetention(false);
+    addBucketRetentionMode("compliance");
+    addBucketRetentionUnit("days");
+    addBucketRetentionValidity(1);
   };
 
   useEffect(() => {
     let valid = false;
 
-    if (bName.trim() !== "") {
+    if (bucketName.trim() !== "") {
       valid = true;
     }
 
@@ -163,8 +197,35 @@ const AddBucket = ({
       }
     }
 
+    if (!versioned || !enableRetention) {
+      addBucketRetention(false);
+      addBucketRetentionMode("compliance");
+      addBucketRetentionUnit("days");
+      addBucketRetentionValidity(1);
+    }
+
+    if (
+      enableRetention &&
+      (Number.isNaN(retentionValidity) || retentionValidity < 1)
+    ) {
+      valid = false;
+    }
+
     setSendEnabled(valid);
-  }, [bName, versioned, quotaType, quotaSize, quotaUnit, enableQuota]);
+  }, [
+    bucketName,
+    versioned,
+    quotaType,
+    quotaSize,
+    quotaUnit,
+    enableQuota,
+    enableRetention,
+    addBucketRetention,
+    addBucketRetentionMode,
+    addBucketRetentionUnit,
+    addBucketRetentionValidity,
+    retentionValidity,
+  ]);
 
   return (
     <ModalWrapper
@@ -196,10 +257,10 @@ const AddBucket = ({
                 id="bucket-name"
                 name="bucket-name"
                 onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-                  setBName(event.target.value);
+                  addBucketName(event.target.value);
                 }}
                 label="Bucket Name"
-                value={bName}
+                value={bucketName}
               />
             </Grid>
             <Grid item xs={12}>
@@ -231,15 +292,15 @@ const AddBucket = ({
             {enableQuota && (
               <React.Fragment>
                 <Grid item xs={12}>
-                  <SelectWrapper
-                    value={quotaType}
-                    label="Quota Type"
+                  <RadioGroupSelector
+                    currentSelection={quotaType}
                     id="quota_type"
                     name="quota_type"
+                    label="Quota Type"
                     onChange={(e: React.ChangeEvent<{ value: unknown }>) => {
                       addBucketQuotaType(e.target.value as string);
                     }}
-                    options={[
+                    selectorOptions={[
                       { value: "hard", label: "Hard" },
                       { value: "fifo", label: "FIFO" },
                     ]}
@@ -279,6 +340,69 @@ const AddBucket = ({
                 </Grid>
               </React.Fragment>
             )}
+            {versioned && (
+              <Grid item xs={12}>
+                <FormSwitchWrapper
+                  value="bucket_retention"
+                  id="bucket_retention"
+                  name="bucket_retention"
+                  checked={enableRetention}
+                  onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                    addBucketRetention(event.target.checked);
+                  }}
+                  label={"Enable Bucket Retention"}
+                  indicatorLabels={["On", "Off"]}
+                />
+              </Grid>
+            )}
+            {enableRetention && (
+              <React.Fragment>
+                <Grid item xs={12}>
+                  <RadioGroupSelector
+                    currentSelection={retentionMode}
+                    id="retention_mode"
+                    name="retention_mode"
+                    label="Retention Mode"
+                    onChange={(e: React.ChangeEvent<{ value: unknown }>) => {
+                      addBucketRetentionMode(e.target.value as string);
+                    }}
+                    selectorOptions={[
+                      { value: "compliance", label: "Compliance" },
+                      { value: "governance", label: "Governance" },
+                    ]}
+                  />
+                </Grid>
+                <Grid item xs={12}>
+                  <RadioGroupSelector
+                    currentSelection={retentionUnit}
+                    id="retention_unit"
+                    name="retention_unit"
+                    label="Retention Unit"
+                    onChange={(e: React.ChangeEvent<{ value: unknown }>) => {
+                      addBucketRetentionUnit(e.target.value as string);
+                    }}
+                    selectorOptions={[
+                      { value: "days", label: "Days" },
+                      { value: "years", label: "Years" },
+                    ]}
+                  />
+                </Grid>
+                <Grid item xs={12}>
+                  <InputBoxWrapper
+                    type="number"
+                    id="retention_validity"
+                    name="retention_validity"
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                      addBucketRetentionValidity(e.target.valueAsNumber);
+                    }}
+                    label="Retention Validity"
+                    value={String(retentionValidity)}
+                    required
+                    min="1"
+                  />
+                </Grid>
+              </React.Fragment>
+            )}
           </Grid>
           <Grid item xs={12} className={classes.buttonContainer}>
             <button
@@ -317,6 +441,10 @@ const mapState = (state: AppState) => ({
   quotaType: state.buckets.addBucketQuotaType,
   quotaSize: state.buckets.addBucketQuotaSize,
   quotaUnit: state.buckets.addBucketQuotaUnit,
+  enableRetention: state.buckets.addBucketRetentionEnabled,
+  retentionMode: state.buckets.addBucketRetentionMode,
+  retentionUnit: state.buckets.addBucketRetentionUnit,
+  retentionValidity: state.buckets.addBucketRetentionValidity,
 });
 
 const connector = connect(mapState, {
@@ -326,6 +454,10 @@ const connector = connect(mapState, {
   addBucketQuotaType: addBucketQuotaType,
   addBucketQuotaSize: addBucketQuotaSize,
   addBucketQuotaUnit: addBucketQuotaUnit,
+  addBucketRetention: addBucketRetention,
+  addBucketRetentionMode: addBucketRetentionMode,
+  addBucketRetentionUnit: addBucketRetentionUnit,
+  addBucketRetentionValidity: addBucketRetentionValidity,
 });
 
 export default connector(withStyles(styles)(AddBucket));
diff --git a/portal-ui/src/screens/Console/Buckets/actions.ts b/portal-ui/src/screens/Console/Buckets/actions.ts
index 3cb750282..f6fb46c31 100644
--- a/portal-ui/src/screens/Console/Buckets/actions.ts
+++ b/portal-ui/src/screens/Console/Buckets/actions.ts
@@ -22,6 +22,10 @@ export const ADD_BUCKET_QUOTA_TYPE = "ADD_BUCKET_QUOTA_TYPE";
 export const ADD_BUCKET_QUOTA_SIZE = "ADD_BUCKET_QUOTA_SIZE";
 export const ADD_BUCKET_QUOTA_UNIT = "ADD_BUCKET_QUOTA_UNIT";
 export const ADD_BUCKET_RESET = "ADD_BUCKET_RESET";
+export const ADD_BUCKET_RETENTION = "ADD_BUCKET_RETENTION";
+export const ADD_BUCKET_RETENTION_MODE = "ADD_BUCKET_RETENTION_MODE";
+export const ADD_BUCKET_RETENTION_UNIT = "ADD_BUCKET_RETENTION_UNIT";
+export const ADD_BUCKET_RETENTION_VALIDITY = "ADD_BUCKET_RETENTION_VALIDITY";
 
 interface AddBucketOpenAction {
   type: typeof ADD_BUCKET_OPEN;
@@ -61,6 +65,25 @@ interface AddBucketResetAction {
   type: typeof ADD_BUCKET_RESET;
 }
 
+interface AddBucketRetentionAction {
+  type: typeof ADD_BUCKET_RETENTION;
+  retention: boolean;
+}
+
+interface AddBucketRetentionModeAction {
+  type: typeof ADD_BUCKET_RETENTION_MODE;
+  retentionMode: string;
+}
+
+interface AddBucketRetentionUnitAction {
+  type: typeof ADD_BUCKET_RETENTION_UNIT;
+  retentionUnit: string;
+}
+interface AddBucketRetentionValidityAction {
+  type: typeof ADD_BUCKET_RETENTION_VALIDITY;
+  retentionValidity: number;
+}
+
 export type BucketActionTypes =
   | AddBucketOpenAction
   | AddBucketNameAction
@@ -69,7 +92,11 @@ export type BucketActionTypes =
   | AddBucketQuotaTypeAction
   | AddBucketQuotaSizeAction
   | AddBucketQuotaUnitAction
-  | AddBucketResetAction;
+  | AddBucketResetAction
+  | AddBucketRetentionAction
+  | AddBucketRetentionModeAction
+  | AddBucketRetentionUnitAction
+  | AddBucketRetentionValidityAction;
 
 export function addBucketOpen(open: boolean) {
   return {
@@ -124,3 +151,31 @@ export function addBucketReset() {
     type: ADD_BUCKET_RESET,
   };
 }
+
+export function addBucketRetention(retention: boolean) {
+  return {
+    type: ADD_BUCKET_RETENTION,
+    retention: retention,
+  };
+}
+
+export function addBucketRetentionMode(mode: string) {
+  return {
+    type: ADD_BUCKET_RETENTION_MODE,
+    retentionMode: mode,
+  };
+}
+
+export function addBucketRetentionUnit(unit: string) {
+  return {
+    type: ADD_BUCKET_RETENTION_UNIT,
+    retentionUnit: unit,
+  };
+}
+
+export function addBucketRetentionValidity(validity: number) {
+  return {
+    type: ADD_BUCKET_RETENTION_VALIDITY,
+    retentionValidity: validity,
+  };
+}
diff --git a/portal-ui/src/screens/Console/Buckets/reducers.ts b/portal-ui/src/screens/Console/Buckets/reducers.ts
index 7aa65f3e3..26f67a98a 100644
--- a/portal-ui/src/screens/Console/Buckets/reducers.ts
+++ b/portal-ui/src/screens/Console/Buckets/reducers.ts
@@ -23,6 +23,10 @@ import {
   ADD_BUCKET_QUOTA_UNIT,
   ADD_BUCKET_RESET,
   ADD_BUCKET_VERSIONED,
+  ADD_BUCKET_RETENTION,
+  ADD_BUCKET_RETENTION_MODE,
+  ADD_BUCKET_RETENTION_UNIT,
+  ADD_BUCKET_RETENTION_VALIDITY,
   BucketActionTypes,
 } from "./actions";
 
@@ -34,6 +38,10 @@ export interface BucketsState {
   addBucketQuotaType: string;
   addBucketQuotaSize: string;
   addBucketQuotaUnit: string;
+  addBucketRetentionEnabled: boolean;
+  addBucketRetentionMode: string;
+  addBucketRetentionUnit: string;
+  addBucketRetentionValidity: number;
 }
 
 const initialState: BucketsState = {
@@ -44,6 +52,10 @@ const initialState: BucketsState = {
   addBucketQuotaType: "hard",
   addBucketQuotaSize: "1",
   addBucketQuotaUnit: "TiB",
+  addBucketRetentionEnabled: false,
+  addBucketRetentionMode: "compliance",
+  addBucketRetentionUnit: "days",
+  addBucketRetentionValidity: 1,
 };
 
 export function bucketsReducer(
@@ -86,6 +98,27 @@ export function bucketsReducer(
         ...state,
         addBucketQuotaUnit: action.quotaUnit,
       };
+    case ADD_BUCKET_RETENTION:
+      return {
+        ...state,
+        addBucketRetentionEnabled: action.retention,
+      };
+    case ADD_BUCKET_RETENTION_MODE:
+      return {
+        ...state,
+        addBucketRetentionMode: action.retentionMode,
+      };
+    case ADD_BUCKET_RETENTION_UNIT:
+      return {
+        ...state,
+        addBucketRetentionUnit: action.retentionUnit,
+      };
+    case ADD_BUCKET_RETENTION_VALIDITY:
+      return {
+        ...state,
+        addBucketRetentionValidity: action.retentionValidity,
+      };
+
     case ADD_BUCKET_RESET:
       return {
         ...state,
@@ -95,6 +128,10 @@ export function bucketsReducer(
         addBucketQuotaType: "hard",
         addBucketQuotaSize: "1",
         addBucketQuotaUnit: "TiB",
+        addBucketRetentionEnabled: false,
+        addBucketRetentionMode: "compliance",
+        addBucketRetentionUnit: "days",
+        addBucketRetentionValidity: 1,
       };
     default:
       return state;
diff --git a/portal-ui/src/screens/Console/Buckets/types.tsx b/portal-ui/src/screens/Console/Buckets/types.tsx
index f00fcedfb..ec359bb26 100644
--- a/portal-ui/src/screens/Console/Buckets/types.tsx
+++ b/portal-ui/src/screens/Console/Buckets/types.tsx
@@ -79,10 +79,17 @@ export interface QuotaRequest {
   amount: number;
 }
 
+export interface RetentionRequest {
+  mode: string;
+  unit: string;
+  validity: number;
+}
+
 export interface MakeBucketRequest {
   name: string;
   versioning: boolean;
   quota?: QuotaRequest;
+  retention?: RetentionRequest;
 }
 
 export interface ChangePasswordRequest {