Web console: make retention dialog clearer (#14793)

* make retention dialog clearer * tweak * another tweak * Update web-console/src/dialogs/retention-dialog/retention-dialog.tsx Co-authored-by: Suneet Saldanha <[email protected]> * update snapshot for copy --------- Co-authored-by: Suneet Saldanha <[email protected]>
apache · Aug 11, 2023 · b0c78ff · b0c78ff
1 parent a0234c4
commit b0c78ff
Show file tree

Hide file tree

Showing 5 changed files with 363 additions and 68 deletions.
diff --git a/web-console/src/components/json-input/json-input.tsx b/web-console/src/components/json-input/json-input.tsx
@@ -66,7 +66,7 @@ interface InternalValue {
 
 interface JsonInputProps {
   value: any;
-  onChange: (value: any) => void;
+  onChange?: (value: any) => void;
   setError?: (error: Error | undefined) => void;
   placeholder?: string;
   focus?: boolean;
@@ -123,14 +123,15 @@ export const JsonInput = React.memo(function JsonInput(props: JsonInputProps) {
 
           setError?.(error);
           if (!error) {
-            onChange(value);
+            onChange?.(value);
           }
 
           if (showErrorIfNeeded) {
             setShowErrorIfNeeded(false);
           }
         }}
         onBlur={() => setShowErrorIfNeeded(true)}
+        readOnly={!onChange}
         focus={focus}
         fontSize={12}
         width={width || '100%'}

diff --git a/web-console/src/components/rule-editor/rule-editor.tsx b/web-console/src/components/rule-editor/rule-editor.tsx
@@ -42,22 +42,23 @@ const PERIOD_SUGGESTIONS: string[] = ['P1D', 'P7D', 'P1M', 'P1Y', 'P1000Y'];
 export interface RuleEditorProps {
   rule: Rule;
   tiers: string[];
-  onChange(newRule: Rule): void;
-  onDelete(): void;
-  moveUp: (() => void) | undefined;
-  moveDown: (() => void) | undefined;
+  onChange?: (newRule: Rule) => void;
+  onDelete?: () => void;
+  moveUp?: () => void;
+  moveDown?: () => void;
 }
 
 export const RuleEditor = React.memo(function RuleEditor(props: RuleEditorProps) {
   const { rule, onChange, tiers, onDelete, moveUp, moveDown } = props;
   const [isOpen, setIsOpen] = useState(true);
+  const disabled = !onChange;
 
   function removeTier(key: string) {
     const newTierReplicants = { ...rule.tieredReplicants };
     delete newTierReplicants[key];
 
     const newRule = { ...rule, tieredReplicants: newTierReplicants };
-    onChange(newRule);
+    onChange?.(newRule);
   }
 
   function addTier() {
@@ -72,7 +73,7 @@ export const RuleEditor = React.memo(function RuleEditor(props: RuleEditorProps)
       }
     }
 
-    onChange(RuleUtil.addTieredReplicant(rule, newTierName, 1));
+    onChange?.(RuleUtil.addTieredReplicant(rule, newTierName, 1));
   }
 
   function renderTiers() {
@@ -90,14 +91,15 @@ export const RuleEditor = React.memo(function RuleEditor(props: RuleEditorProps)
       <FormGroup>
         {tieredReplicantsList.map(([tier, replication]) => (
           <ControlGroup key={tier}>
-            <Button minimal style={{ pointerEvents: 'none' }}>
+            <Button minimal disabled={disabled} style={{ pointerEvents: 'none' }}>
               Tier:
             </Button>
             <HTMLSelect
               fill
               value={tier}
+              disabled={disabled}
               onChange={(e: any) =>
-                onChange(RuleUtil.renameTieredReplicants(rule, tier, e.target.value))
+                onChange?.(RuleUtil.renameTieredReplicants(rule, tier, e.target.value))
               }
             >
               <option key={tier} value={tier}>
@@ -111,27 +113,28 @@ export const RuleEditor = React.memo(function RuleEditor(props: RuleEditorProps)
                   </option>
                 ))}
             </HTMLSelect>
-            <Button minimal style={{ pointerEvents: 'none' }}>
+            <Button minimal disabled={disabled} style={{ pointerEvents: 'none' }}>
               Replicants:
             </Button>
             <NumericInput
               value={replication}
+              disabled={disabled}
               onValueChange={(v: number) => {
                 if (isNaN(v)) return;
-                onChange(RuleUtil.addTieredReplicant(rule, tier, v));
+                onChange?.(RuleUtil.addTieredReplicant(rule, tier, v));
               }}
               min={0}
               max={256}
             />
-            <Button onClick={() => removeTier(tier)} icon={IconNames.TRASH} />
+            {onChange && <Button onClick={() => removeTier(tier)} icon={IconNames.TRASH} />}
           </ControlGroup>
         ))}
       </FormGroup>
     );
   }
 
   function renderTierAdder() {
-    const { rule, tiers } = props;
+    if (!onChange) return;
     const disabled = Object.keys(rule.tieredReplicants || {}).length >= Object.keys(tiers).length;
 
     return (
@@ -163,7 +166,7 @@ export const RuleEditor = React.memo(function RuleEditor(props: RuleEditorProps)
         <div className="spacer" />
         {moveUp && <Button minimal icon={IconNames.ARROW_UP} onClick={moveUp} />}
         {moveDown && <Button minimal icon={IconNames.ARROW_DOWN} onClick={moveDown} />}
-        <Button minimal icon={IconNames.TRASH} onClick={onDelete} />
+        {onDelete && <Button minimal icon={IconNames.TRASH} onClick={onDelete} />}
       </div>
 
       <Collapse isOpen={isOpen}>
@@ -172,7 +175,8 @@ export const RuleEditor = React.memo(function RuleEditor(props: RuleEditorProps)
             <ControlGroup>
               <HTMLSelect
                 value={rule.type}
-                onChange={(e: any) => onChange(RuleUtil.changeRuleType(rule, e.target.value))}
+                disabled={disabled}
+                onChange={(e: any) => onChange?.(RuleUtil.changeRuleType(rule, e.target.value))}
               >
                 {RuleUtil.TYPES.map(type => (
                   <option key={type} value={type}>
@@ -184,9 +188,10 @@ export const RuleEditor = React.memo(function RuleEditor(props: RuleEditorProps)
                 <SuggestibleInput
                   value={rule.period || ''}
                   sanitizer={durationSanitizer}
+                  disabled={disabled}
                   onValueChange={period => {
                     if (typeof period === 'undefined') return;
-                    onChange(RuleUtil.changePeriod(rule, period));
+                    onChange?.(RuleUtil.changePeriod(rule, period));
                   }}
                   placeholder={PERIOD_SUGGESTIONS[0]}
                   suggestions={PERIOD_SUGGESTIONS}
@@ -197,15 +202,17 @@ export const RuleEditor = React.memo(function RuleEditor(props: RuleEditorProps)
                   className="include-future"
                   checked={rule.includeFuture || false}
                   label="Include future"
+                  disabled={disabled}
                   onChange={() => {
-                    onChange(RuleUtil.changeIncludeFuture(rule, !rule.includeFuture));
+                    onChange?.(RuleUtil.changeIncludeFuture(rule, !rule.includeFuture));
                   }}
                 />
               )}
               {RuleUtil.hasInterval(rule) && (
                 <InputGroup
                   value={rule.interval || ''}
-                  onChange={(e: any) => onChange(RuleUtil.changeInterval(rule, e.target.value))}
+                  readOnly={!onChange}
+                  onChange={(e: any) => onChange?.(RuleUtil.changeInterval(rule, e.target.value))}
                   placeholder="2010-01-01/2020-01-01"
                 />
               )}