From fa394daaad1b187e04008678227eec3270c1cc04 Mon Sep 17 00:00:00 2001
From: nfour <novus.nfour@gmail.com>
Date: Fri, 8 Sep 2023 10:09:08 +1000
Subject: [PATCH] Fix readonly mode for buttons

---
 libs/jsonform/src/FormConfigEditor.tsx        | 92 ++++++++++---------
 .../src/editor/ScenarioConfigEditor.tsx       |  5 +-
 2 files changed, 48 insertions(+), 49 deletions(-)

diff --git a/libs/jsonform/src/FormConfigEditor.tsx b/libs/jsonform/src/FormConfigEditor.tsx
index bc36a76..db61ff0 100644
--- a/libs/jsonform/src/FormConfigEditor.tsx
+++ b/libs/jsonform/src/FormConfigEditor.tsx
@@ -251,51 +251,53 @@ export const FormConfigEditor = observer<{
             </Alert>
           )}
         </Grid>
-        <Grid
-          container
-          css={css`
-            flex-grow: 1;
-            justify-content: space-between;
-            padding: 1em 1.5em;
-            box-shadow: 0 -2px 3px 0 #0002, 0 1px 1px 0 #0001;
-            position: relative;
-          `}
-        >
-          <div>
-            <ConfirmDropdown
-              trigger={{
-                button: {
-                  variant: 'outlined',
-                  disabled: !!readOnly,
-                },
-                icon: <DiscardIcon fontSize="small" />,
-                label: <>{text?.discardButton || 'Discard'}</>,
-              }}
-              confirm={{
-                icon: <DiscardIcon />,
-                label: <>{text?.discardButton || 'Discard'}</>,
-                onClick() {
-                  operations?.onDiscard?.();
-                },
-              }}
-            />
-            <Button
-              color="primary"
-              variant="outlined"
-              endIcon={<SaveIcon fontSize="small" />}
-              onClick={() => {
-                state.validateEntireForm();
-
-                if (state.hasValidationErrors) return;
-
-                operations?.onSave?.(state.data);
-              }}
-              disabled={!!readOnly || state.hasValidationErrors}
-            >
-              {text?.saveButton || 'Save'}
-            </Button>
-          </div>
-        </Grid>
+        {!readOnly && (
+          <Grid
+            container
+            css={css`
+              flex-grow: 1;
+              justify-content: space-between;
+              padding: 1em 1.5em;
+              box-shadow: 0 -2px 3px 0 #0002, 0 1px 1px 0 #0001;
+              position: relative;
+            `}
+          >
+            <div>
+              <ConfirmDropdown
+                trigger={{
+                  button: {
+                    variant: 'outlined',
+                    disabled: !!readOnly,
+                  },
+                  icon: <DiscardIcon fontSize="small" />,
+                  label: <>{text?.discardButton || 'Discard'}</>,
+                }}
+                confirm={{
+                  icon: <DiscardIcon />,
+                  label: <>{text?.discardButton || 'Discard'}</>,
+                  onClick() {
+                    operations?.onDiscard?.();
+                  },
+                }}
+              />
+              <Button
+                color="primary"
+                variant="outlined"
+                endIcon={<SaveIcon fontSize="small" />}
+                onClick={() => {
+                  state.validateEntireForm();
+
+                  if (state.hasValidationErrors) return;
+
+                  operations?.onSave?.(state.data);
+                }}
+                disabled={!!readOnly || state.hasValidationErrors}
+              >
+                {text?.saveButton || 'Save'}
+              </Button>
+            </div>
+          </Grid>
+        )}
       </Grid>
     );
   },
diff --git a/libs/scenarios/src/editor/ScenarioConfigEditor.tsx b/libs/scenarios/src/editor/ScenarioConfigEditor.tsx
index 7c41fa4..386ca82 100644
--- a/libs/scenarios/src/editor/ScenarioConfigEditor.tsx
+++ b/libs/scenarios/src/editor/ScenarioConfigEditor.tsx
@@ -80,6 +80,7 @@ export const ScenarioConfigEditor = observer<{
 
             updateScenario({ ...activeScenario, data });
           },
+
           ...(editor.operations ?? {}),
         }}
       />
@@ -91,7 +92,6 @@ export const ScenarioConfigEditor = observer<{
             box-shadow: 0 2px 3px 0 #0002, 0 -1px 1px 0 #0001;
             position: relative;
           `}
-          disabled={!!editor.readOnly}
         >
           <ConfirmDropdown
             css={css`
@@ -100,9 +100,6 @@ export const ScenarioConfigEditor = observer<{
             trigger={{
               icon: <DeleteIcon />,
               label: <>Delete</>,
-              button: {
-                disabled: !!editor.readOnly,
-              },
             }}
             confirm={{
               icon: <DeleteIcon />,