fix(ui): fix multivar readonly

frontend/app/components/FFlags/FlagView/FlagView.tsx

@@ -5,8 +5,7 @@ import { Toggler, Loader, Button, NoContent, ItemMenu } from 'UI';
 import Breadcrumb from 'Shared/Breadcrumb';
 import { useHistory } from 'react-router';
 import { withSiteId, fflag, fflags } from 'App/routes';
-// import RolloutCondition from './Conditions';
-// import { Payload } from './Helpers';
+import Multivariant from "Components/FFlags/NewFFlag/Multivariant";
 import { toast } from 'react-toastify';
 import RolloutCondition from "Components/FFlags/NewFFlag/Conditions";
 
@@ -93,6 +92,9 @@ function FlagView({ siteId, fflagId }: { siteId: string; fflagId: string }) {
               : 'This flag is not persistent across authentication events.'}
           </div>
         </div>
+        {!current.isSingleOption ? (
+          <Multivariant readonly />
+        ) : null}
       {current.conditions.length > 0 ? (
         <div className="mt-6 p-4 rounded bg-gray-lightest">
           <label className={'font-semibold'}>Rollout Conditions</label>

frontend/app/components/FFlags/NewFFlag/Multivariant.tsx

@@ -34,7 +34,7 @@ const alphabet = [
   'Z',
 ];
 
-function Multivariant() {
+function Multivariant({ readonly }: { readonly?: boolean }) {
   const { featureFlagsStore } = useStore();
 
   const avg = React.useMemo(() => {
@@ -57,12 +57,14 @@ function Multivariant() {
         </div>
         <div style={{ flex: 4 }} className={'flex items-center'}>
           <Rollout />
-          <div
-            className={'ml-auto text-main font-normal cursor-pointer mr-10 hover:underline'}
-            onClick={featureFlagsStore.currentFflag!.redistributeVariants}
-          >
-            Distribute Equally
-          </div>
+          {readonly ? null : (
+            <div
+              className={'ml-auto text-main font-normal cursor-pointer mr-10 hover:underline'}
+              onClick={featureFlagsStore.currentFflag!.redistributeVariants}
+            >
+              Distribute Equally
+            </div>
+          )}
         </div>
       </div>
       <div>
@@ -75,78 +77,102 @@ function Multivariant() {
                 </div>
               </div>
               <div style={{ flex: 4 }}>
-                <Input
-                  placeholder={`buy-btn-variant-${ind + 1}`}
-                  value={variant.value}
-                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                    if (e.target.value?.length > 25) return;
-                    variant.setKey(e.target.value)
-                  }}
-                />
+                {readonly ? (
+                  <code className={'p-1 text-red rounded bg-gray-lightest'}>
+                    {variant.value}
+                  </code>
+                ) : (
+                  <Input
+                    placeholder={`buy-btn-variant-${ind + 1}`}
+                    value={variant.value}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                      if (e.target.value?.length > 25) return;
+                      variant.setKey(e.target.value);
+                    }}
+                  />
+                )}
               </div>
               <div style={{ flex: 4 }}>
-                <Input
-                  placeholder={'Enter here...'}
-                  value={variant.description}
-                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                    variant.setDescription(e.target.value)
-                  }
-                />
+                {readonly ? (
+                  <div>{variant.description}</div>
+                ) : (
+                  <Input
+                    placeholder={'Enter here...'}
+                    value={variant.description}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                      variant.setDescription(e.target.value)
+                    }
+                  />
+                )}
               </div>
               <div style={{ flex: 4 }}>
-                <Input
-                  placeholder={"E.g. red button, {'buttonColor': 'red'}"}
-                  value={variant.payload}
-                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                    variant.setPayload(e.target.value)
-                  }
-                />
+                {readonly ? (
+                  <code className={'p-1 text-red rounded bg-gray-lightest'}>
+                    {variant.payload}
+                  </code>
+                ) : (
+                  <Input
+                    placeholder={"E.g. red button, {'buttonColor': 'red'}"}
+                    value={variant.payload}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                      variant.setPayload(e.target.value)
+                    }
+                  />
+                )}
               </div>
               <div style={{ flex: 4 }} className={'flex items-center gap-2'}>
-                <Input
-                  className={'!flex-1'}
-                  type={'tel'}
-                  wrapperClassName={'flex-1'}
-                  placeholder={avg}
-                  value={variant.rolloutPercentage}
-                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                    if (e.target.value === '') variant.setRollout(0);
-                    variant.setRollout(parseInt(e.target.value.replace(/\D/g, ''), 10));
-                  }}
-                />
-                <div
-                  className={cn(
-                    'p-2 cursor-pointer rounded',
-                    featureFlagsStore.currentFflag!.variants.length === 1
-                      ? 'cursor-not-allowed'
-                      : 'hover:bg-teal-light'
-                  )}
-                  onClick={() =>
-                    featureFlagsStore.currentFflag!.variants.length === 1
-                      ? null
-                      : featureFlagsStore.currentFflag!.removeVariant(variant.index)
-                  }
-                >
-                  <Icon
-                    name={'trash'}
-                    color={featureFlagsStore.currentFflag!.variants.length === 1 ? '' : 'main'}
-                  />
-                </div>
+                {readonly ? (
+                  <div>{variant.rolloutPercentage}</div>
+                ) : (
+                  <>
+                    <Input
+                      className={'!flex-1'}
+                      type={'tel'}
+                      wrapperClassName={'flex-1'}
+                      placeholder={avg}
+                      value={variant.rolloutPercentage}
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                        if (e.target.value === '') variant.setRollout(0);
+                        variant.setRollout(parseInt(e.target.value.replace(/\D/g, ''), 10));
+                      }}
+                    />
+                    <div
+                      className={cn(
+                        'p-2 cursor-pointer rounded',
+                        featureFlagsStore.currentFflag!.variants.length === 1
+                          ? 'cursor-not-allowed'
+                          : 'hover:bg-teal-light'
+                      )}
+                      onClick={() =>
+                        featureFlagsStore.currentFflag!.variants.length === 1
+                          ? null
+                          : featureFlagsStore.currentFflag!.removeVariant(variant.index)
+                      }
+                    >
+                      <Icon
+                        name={'trash'}
+                        color={featureFlagsStore.currentFflag!.variants.length === 1 ? '' : 'main'}
+                      />
+                    </div>
+                  </>
+                )}
               </div>
             </div>
           );
         })}
       </div>
-      <div className={'mt-2 flex justify-between w-full'}>
-        {featureFlagsStore.currentFflag!.variants.length < 10 ? (
-          <Button variant={'text-primary'} onClick={featureFlagsStore.currentFflag!.addVariant}>
-            + Add Variant
-          </Button>
-        ) : null}
-        {featureFlagsStore.currentFflag!.isRedDistribution ? (
-          <div className={'text-red mr-10'}>Total distribution is less than 100%.</div>
-        ) : null}
-      </div>
+      {readonly ? null : (
+        <div className={'mt-2 flex justify-between w-full'}>
+          {featureFlagsStore.currentFflag!.variants.length < 10 ? (
+            <Button variant={'text-primary'} onClick={featureFlagsStore.currentFflag!.addVariant}>
+              + Add Variant
+            </Button>
+          ) : null}
+          {featureFlagsStore.currentFflag!.isRedDistribution ? (
+            <div className={'text-red mr-10'}>Total distribution is less than 100%.</div>
+          ) : null}
+        </div>
+      )}
     </div>
   );
 }