From a4c37a386bf7568e345bb74912196bce99fa72bb Mon Sep 17 00:00:00 2001
From: Yoofi Quansah <ybquansah@gmail.com>
Date: Mon, 7 Aug 2023 09:49:09 -0700
Subject: [PATCH] feat: Add readonly attributes to edit forms

---
 ui/package-lock.json                          | 15 ++++++++++
 ui/package.json                               |  1 +
 ui/src/components/forms/Combobox.tsx          |  7 ++++-
 ui/src/components/forms/SegmentsPicker.tsx    | 22 ++++++++++++--
 ui/src/components/forms/Select.tsx            | 18 +++++++++--
 .../rollouts/forms/EditRolloutForm.tsx        | 17 ++++++++++-
 .../rollouts/forms/QuickEditRolloutForm.tsx   | 26 ++++++++++++++--
 .../rules/forms/QuickEditRuleForm.tsx         | 30 +++++++++++++++----
 8 files changed, 122 insertions(+), 14 deletions(-)

diff --git a/ui/package-lock.json b/ui/package-lock.json
index 52911411d4..715c52d98f 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -34,6 +34,7 @@
         "react-redux": "^8.1.1",
         "react-router-dom": "^6.14.1",
         "swr": "^2.2.0",
+        "tailwind-merge": "^1.14.0",
         "uuid": "^9.0.0",
         "yup": "^0.32.11"
       },
@@ -11960,6 +11961,15 @@
         "url": "https://opencollective.com/unts"
       }
     },
+    "node_modules/tailwind-merge": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.14.0.tgz",
+      "integrity": "sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz",
@@ -21272,6 +21282,11 @@
         "tslib": "^2.5.0"
       }
     },
+    "tailwind-merge": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.14.0.tgz",
+      "integrity": "sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ=="
+    },
     "tailwindcss": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz",
diff --git a/ui/package.json b/ui/package.json
index fe0879490a..1abff5a842 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -38,6 +38,7 @@
     "react-redux": "^8.1.1",
     "react-router-dom": "^6.14.1",
     "swr": "^2.2.0",
+    "tailwind-merge": "^1.14.0",
     "uuid": "^9.0.0",
     "yup": "^0.32.11"
   },
diff --git a/ui/src/components/forms/Combobox.tsx b/ui/src/components/forms/Combobox.tsx
index 6685896998..daff047069 100644
--- a/ui/src/components/forms/Combobox.tsx
+++ b/ui/src/components/forms/Combobox.tsx
@@ -2,6 +2,7 @@ import { Combobox as C } from '@headlessui/react';
 import { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/24/outline';
 import { useField } from 'formik';
 import { useState } from 'react';
+import { twMerge } from 'tailwind-merge';
 import { IFilterable } from '~/types/Selectable';
 import { classNames } from '~/utils/helpers';
 
@@ -14,6 +15,7 @@ type ComboboxProps<T extends IFilterable> = {
   setSelected?: (v: T | null) => void;
   disabled?: boolean;
   className?: string;
+  inputClassNames?: string;
 };
 
 export default function Combobox<T extends IFilterable>(
@@ -22,6 +24,7 @@ export default function Combobox<T extends IFilterable>(
   const {
     id,
     className,
+    inputClassNames,
     values,
     selected,
     setSelected,
@@ -51,7 +54,9 @@ export default function Combobox<T extends IFilterable>(
       <div className="relative flex w-full flex-row">
         <C.Input
           id={id}
-          className="text-gray-900 bg-gray-50 border-gray-300 w-full rounded-md border py-2 pl-3 pr-10 shadow-sm focus:border-violet-500 focus:outline-none focus:ring-1 focus:ring-violet-500 sm:text-sm"
+          className={twMerge(
+            `text-gray-900 bg-gray-50 border-gray-300 w-full rounded-md border py-2 pl-3 pr-10 shadow-sm focus:border-violet-500 focus:outline-none focus:ring-1 focus:ring-violet-500 sm:text-sm ${inputClassNames}`
+          )}
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
             setQuery(e.target.value);
           }}
diff --git a/ui/src/components/forms/SegmentsPicker.tsx b/ui/src/components/forms/SegmentsPicker.tsx
index 6dec4472b8..e844c5871e 100644
--- a/ui/src/components/forms/SegmentsPicker.tsx
+++ b/ui/src/components/forms/SegmentsPicker.tsx
@@ -1,10 +1,12 @@
 import { MinusSmallIcon, PlusSmallIcon } from '@heroicons/react/24/outline';
 import { useRef, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
 import Combobox from '~/components/forms/Combobox';
 import { FilterableSegment, ISegment } from '~/types/Segment';
 import { truncateKey } from '~/utils/helpers';
 
 type SegmentPickerProps = {
+  readonly?: boolean;
   editMode?: boolean;
   segments: ISegment[];
   selectedSegments: FilterableSegment[];
@@ -14,6 +16,7 @@ type SegmentPickerProps = {
 };
 
 export default function SegmentsPicker({
+  readonly = false,
   editMode = false,
   segments,
   selectedSegments: parentSegments,
@@ -25,6 +28,8 @@ export default function SegmentsPicker({
     new Set<string>(parentSegments.map((s) => s.key))
   );
 
+  const [editing, setEditing] = useState<boolean>(editMode);
+
   const handleSegmentRemove = (index: number) => {
     const filterableSegment = parentSegments[index];
 
@@ -37,8 +42,6 @@ export default function SegmentsPicker({
     }
   };
 
-  const [editing, setEditing] = useState<boolean>(editMode);
-
   const handleSegmentSelected = (
     index: number,
     segment: FilterableSegment | null
@@ -76,18 +79,29 @@ export default function SegmentsPicker({
                   filterValue: truncateKey(s.key),
                   displayValue: s.name
                 }))}
+              disabled={readonly}
               selected={selectedSegment}
               setSelected={(filterableSegment) => {
                 handleSegmentSelected(index, filterableSegment);
               }}
+              inputClassNames={
+                readonly
+                  ? 'cursor-not-allowed bg-gray-100 text-gray-500'
+                  : undefined
+              }
             />
           </div>
           {editing && parentSegments.length - 1 === index ? (
             <div>
               <button
                 type="button"
-                className="text-gray-400 mt-2 hover:text-gray-500"
+                className={twMerge(`
+                  text-gray-400 mt-2 hover:text-gray-500 ${
+                    readonly ? 'hover:text-gray-400' : undefined
+                  }`)}
                 onClick={() => setEditing(false)}
+                title={readonly ? 'Not allowed in Read-Only mode' : undefined}
+                disabled={readonly}
               >
                 <PlusSmallIcon className="h-6 w-6" aria-hidden="true" />
               </button>
@@ -98,6 +112,8 @@ export default function SegmentsPicker({
                 type="button"
                 className="text-gray-400 mt-2 hover:text-gray-500"
                 onClick={() => handleSegmentRemove(index)}
+                title={readonly ? 'Not allowed in Read-Only mode' : undefined}
+                disabled={readonly}
               >
                 <MinusSmallIcon className="h-6 w-6" aria-hidden="true" />
               </button>
diff --git a/ui/src/components/forms/Select.tsx b/ui/src/components/forms/Select.tsx
index e8720e4288..5447060fda 100644
--- a/ui/src/components/forms/Select.tsx
+++ b/ui/src/components/forms/Select.tsx
@@ -1,4 +1,5 @@
 import { useField } from 'formik';
+import { twMerge } from 'tailwind-merge';
 
 type SelectProps = {
   id: string;
@@ -8,10 +9,20 @@ type SelectProps = {
   className?: string;
   value?: string;
   onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+  disabled?: boolean;
 };
 
 export default function Select(props: SelectProps) {
-  const { id, name, options, children, className, value, onChange } = props;
+  const {
+    id,
+    name,
+    options,
+    children,
+    className,
+    value,
+    onChange,
+    disabled = false
+  } = props;
 
   const [field] = useField({
     name,
@@ -23,9 +34,12 @@ export default function Select(props: SelectProps) {
       {...field}
       id={id}
       name={name}
-      className={`text-gray-900 bg-gray-50 border-gray-300 block rounded-md py-2 pl-3 pr-10 text-base focus:border-violet-300 focus:outline-none focus:ring-violet-300 sm:text-sm ${className}`}
+      className={twMerge(
+        `text-gray-900 bg-gray-50 border-gray-300 block rounded-md py-2 pl-3 pr-10 text-base focus:border-violet-300 focus:outline-none focus:ring-violet-300 sm:text-sm ${className}`
+      )}
       value={value}
       onChange={onChange || field.onChange}
+      disabled={disabled}
     >
       {options &&
         options.map((option) => (
diff --git a/ui/src/components/rollouts/forms/EditRolloutForm.tsx b/ui/src/components/rollouts/forms/EditRolloutForm.tsx
index 63d8cc038b..5a8f1026ff 100644
--- a/ui/src/components/rollouts/forms/EditRolloutForm.tsx
+++ b/ui/src/components/rollouts/forms/EditRolloutForm.tsx
@@ -2,6 +2,8 @@ import { Dialog } from '@headlessui/react';
 import { XMarkIcon } from '@heroicons/react/24/outline';
 import { FieldArray, Form, Formik } from 'formik';
 import { useSelector } from 'react-redux';
+import { twMerge } from 'tailwind-merge';
+import { selectReadonly } from '~/app/meta/metaSlice';
 import { selectCurrentNamespace } from '~/app/namespaces/namespacesSlice';
 import Button from '~/components/forms/buttons/Button';
 import Input from '~/components/forms/Input';
@@ -62,6 +64,8 @@ export default function EditRolloutForm(props: EditRolloutFormProps) {
       ? rollout.segment.segmentOperator
       : SegmentOperatorType.OR;
 
+  const readOnly = useSelector(selectReadonly);
+
   const handleSegmentSubmit = (values: RolloutFormValues) => {
     let rolloutSegment = rollout;
     rolloutSegment.threshold = undefined;
@@ -282,6 +286,7 @@ export default function EditRolloutForm(props: EditRolloutFormProps) {
                         name="segmentKeys"
                         render={(arrayHelpers) => (
                           <SegmentsPicker
+                            readonly={readOnly}
                             editMode
                             segments={segments}
                             segmentAdd={(segment: FilterableSegment) =>
@@ -307,7 +312,11 @@ export default function EditRolloutForm(props: EditRolloutFormProps) {
                               id={segmentOperator.id}
                               name="operator"
                               type="radio"
-                              className="text-violet-400 border-gray-300 h-4 w-4 focus:ring-violet-400"
+                              className={twMerge(
+                                `text-violet-400 border-gray-300 h-4 w-4 focus:ring-violet-400 ${
+                                  readOnly ? 'cursor-not-allowed' : undefined
+                                }`
+                              )}
                               onChange={() => {
                                 formik.setFieldValue(
                                   'operator',
@@ -318,6 +327,12 @@ export default function EditRolloutForm(props: EditRolloutFormProps) {
                                 segmentOperator.id === formik.values.operator
                               }
                               value={segmentOperator.id}
+                              disabled={readOnly}
+                              title={
+                                readOnly
+                                  ? 'Not allowed in Read-Only mode'
+                                  : undefined
+                              }
                             />
                           </div>
                           <div>
diff --git a/ui/src/components/rollouts/forms/QuickEditRolloutForm.tsx b/ui/src/components/rollouts/forms/QuickEditRolloutForm.tsx
index 1ee81a8dad..0a767308a6 100644
--- a/ui/src/components/rollouts/forms/QuickEditRolloutForm.tsx
+++ b/ui/src/components/rollouts/forms/QuickEditRolloutForm.tsx
@@ -1,5 +1,7 @@
 import { FieldArray, Form, Formik } from 'formik';
 import { useSelector } from 'react-redux';
+import { twMerge } from 'tailwind-merge';
+import { selectReadonly } from '~/app/meta/metaSlice';
 import { selectCurrentNamespace } from '~/app/namespaces/namespacesSlice';
 import TextButton from '~/components/forms/buttons/TextButton';
 import Input from '~/components/forms/Input';
@@ -45,6 +47,8 @@ export default function QuickEditRolloutForm(props: QuickEditRolloutFormProps) {
       ? rollout.segment.segmentOperator
       : SegmentOperatorType.OR;
 
+  const readOnly = useSelector(selectReadonly);
+
   const handleSegmentSubmit = (values: RolloutFormValues) => {
     let rolloutSegment = rollout;
     rolloutSegment.threshold = undefined;
@@ -188,6 +192,7 @@ export default function QuickEditRolloutForm(props: QuickEditRolloutFormProps) {
                         name="segmentKeys"
                         render={(arrayHelpers) => (
                           <SegmentsPicker
+                            readonly={readOnly}
                             editMode
                             segments={segments}
                             segmentAdd={(segment: FilterableSegment) =>
@@ -213,7 +218,11 @@ export default function QuickEditRolloutForm(props: QuickEditRolloutFormProps) {
                               id={segmentOperator.id}
                               name="operator"
                               type="radio"
-                              className="text-violet-400 border-gray-300 h-4 w-4 focus:ring-violet-400"
+                              className={twMerge(
+                                `text-violet-400 border-gray-300 h-4 w-4 focus:ring-violet-400 ${
+                                  readOnly ? 'cursor-not-allowed' : undefined
+                                }`
+                              )}
                               onChange={() => {
                                 formik.setFieldValue(
                                   'operator',
@@ -224,6 +233,12 @@ export default function QuickEditRolloutForm(props: QuickEditRolloutFormProps) {
                                 segmentOperator.id === formik.values.operator
                               }
                               value={segmentOperator.id}
+                              disabled={readOnly}
+                              title={
+                                readOnly
+                                  ? 'Not allowed in Read-Only mode'
+                                  : undefined
+                              }
                             />
                           </div>
                           <div>
@@ -258,7 +273,14 @@ export default function QuickEditRolloutForm(props: QuickEditRolloutFormProps) {
                     { label: 'True', value: 'true' },
                     { label: 'False', value: 'false' }
                   ]}
-                  className="w-full cursor-pointer appearance-none self-center rounded-lg py-1 align-middle"
+                  className={twMerge(
+                    `w-full cursor-pointer appearance-none self-center rounded-lg py-1 align-middle ${
+                      readOnly
+                        ? 'text-gray-500 bg-gray-100 cursor-not-allowed'
+                        : undefined
+                    }`
+                  )}
+                  disabled={readOnly}
                 />
               </div>
             </div>
diff --git a/ui/src/components/rules/forms/QuickEditRuleForm.tsx b/ui/src/components/rules/forms/QuickEditRuleForm.tsx
index 2cd137e68b..884cb9d705 100644
--- a/ui/src/components/rules/forms/QuickEditRuleForm.tsx
+++ b/ui/src/components/rules/forms/QuickEditRuleForm.tsx
@@ -1,6 +1,8 @@
 import { Field, FieldArray, Form, Formik } from 'formik';
 import { useState } from 'react';
 import { useSelector } from 'react-redux';
+import { twMerge } from 'tailwind-merge';
+import { selectReadonly } from '~/app/meta/metaSlice';
 import { selectCurrentNamespace } from '~/app/namespaces/namespacesSlice';
 import TextButton from '~/components/forms/buttons/TextButton';
 import Combobox from '~/components/forms/Combobox';
@@ -19,7 +21,7 @@ import {
   SegmentOperatorType
 } from '~/types/Segment';
 import { FilterableVariant } from '~/types/Variant';
-import { truncateKey } from '~/utils/helpers';
+import { classNames, truncateKey } from '~/utils/helpers';
 import { distTypes } from './RuleForm';
 
 type QuickEditRuleFormProps = {
@@ -78,7 +80,7 @@ export default function QuickEditRuleForm(props: QuickEditRuleFormProps) {
       return null;
     });
 
-  const [operator, setOperator] = useState<SegmentOperatorType>(rule.operator);
+  const readOnly = useSelector(selectReadonly);
 
   const handleSubmit = async (values: RuleFormValues) => {
     const originalRuleSegments = rule.segments.map((s) => s.key);
@@ -206,6 +208,7 @@ export default function QuickEditRuleForm(props: QuickEditRuleFormProps) {
                         name="segmentKeys"
                         render={(arrayHelpers) => (
                           <SegmentsPicker
+                            readonly={readOnly}
                             editMode
                             segments={segments}
                             segmentAdd={(segment: FilterableSegment) =>
@@ -231,7 +234,11 @@ export default function QuickEditRuleForm(props: QuickEditRuleFormProps) {
                               id={segmentOperator.id}
                               name="operator"
                               type="radio"
-                              className="text-violet-400 border-gray-300 h-4 w-4 focus:ring-violet-400"
+                              className={twMerge(
+                                `text-violet-400 border-gray-300 h-4 w-4 focus:ring-violet-400 ${
+                                  readOnly ? 'cursor-not-allowed' : undefined
+                                }`
+                              )}
                               onChange={() => {
                                 formik.setFieldValue(
                                   'operator',
@@ -242,6 +249,12 @@ export default function QuickEditRuleForm(props: QuickEditRuleFormProps) {
                                 segmentOperator.id === formik.values.operator
                               }
                               value={segmentOperator.id}
+                              disabled={readOnly}
+                              title={
+                                readOnly
+                                  ? 'Not allowed in Read-Only mode'
+                                  : undefined
+                              }
                             />
                           </div>
                           <div>
@@ -324,7 +337,7 @@ export default function QuickEditRuleForm(props: QuickEditRuleFormProps) {
                           }))}
                           selected={selectedVariant}
                           setSelected={setSelectedVariant}
-                          disabled
+                          disabled={readOnly}
                         />
                       </div>
                     </div>
@@ -364,7 +377,13 @@ export default function QuickEditRuleForm(props: QuickEditRuleFormProps) {
                                       <Field
                                         key={index}
                                         type="number"
-                                        className="border-gray-300 block w-full rounded-md pl-7 pr-12 shadow-sm focus:border-violet-300 focus:ring-violet-300 sm:text-sm"
+                                        className={classNames(
+                                          `${
+                                            readOnly
+                                              ? 'text-gray-500 bg-gray-100 cursor-not-allowed'
+                                              : undefined
+                                          } border-gray-300 block w-full rounded-md pl-7 pr-12 shadow-sm focus:border-violet-300 focus:ring-violet-300 sm:text-sm`
+                                        )}
                                         value={dist.distribution.rollout}
                                         name={`rollouts.[${index}].distribution.rollout`}
                                         // eslint-disable-next-line react/no-unknown-property
@@ -372,6 +391,7 @@ export default function QuickEditRuleForm(props: QuickEditRuleFormProps) {
                                         step=".01"
                                         min="0"
                                         max="100"
+                                        disabled={readOnly}
                                       />
                                       <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                                         <span className="text-gray-500 sm:text-sm">