Move !readOnly check to entire header grouping at top for all buttons (…

…#1032)

Move !readOnly check to entire header grouping at top for all buttons


Doing this makes it easier to manage rather than gating each one
individually

## Test Plan
No functional changes

ReadOnly mode

<img width="1512" alt="Screenshot 2024-01-25 at 16 03 30"
src="https://github.com/lastmile-ai/aiconfig/assets/151060367/3493b525-e943-46fe-805d-3424af206bae">


Regular mode (with share button shown)

<img width="1512" alt="Screenshot 2024-01-25 at 16 04 06"
src="https://github.com/lastmile-ai/aiconfig/assets/151060367/fc7a86c2-8efb-4190-afe9-870a15e93f46">

---
Stack created with [Sapling](https://sapling-scm.com). Best reviewed
with
[ReviewStack](https://reviewstack.dev/lastmile-ai/aiconfig/pull/1032).
* #1037
* #1035
* __->__ #1032
* #1031

python/src/aiconfig/editor/client/src/components/AIConfigEditor.tsx

@@ -939,53 +939,58 @@ export default function AIConfigEditor({
           )}
           <Container maw="80rem">
             <Flex justify="flex-end" mt="md" mb="xs">
-              <Group>
-                {/* TODO: Remove false gating below once Share button is ready */}
-                {false && !readOnly && (
-                  <Tooltip label={"Create a link to share your AIConfig!"}>
+              {!readOnly && (
+                <Group>
+                  {/* TODO: Remove false gating below once Share button is ready */}
+                  {false && (
+                    <Tooltip label={"Create a link to share your AIConfig!"}>
+                      <Button
+                        loading={undefined}
+                        onClick={() => {}}
+                        size="xs"
+                        variant="filled"
+                      >
+                        Share
+                      </Button>
+                    </Tooltip>
+                  )}
+
+                  {onClearOutputs && (
                     <Button
                       loading={undefined}
-                      onClick={() => {}}
-                      size="xs"
-                      variant="filled"
-                    >
-                      Share
-                    </Button>
-                  </Tooltip>
-                )}
-
-                {!readOnly && (
-                  <Button
-                    loading={undefined}
-                    onClick={onClearOutputs}
-                    size="xs"
-                    variant="gradient"
-                  >
-                    Clear Outputs
-                  </Button>
-                )}
-                {!readOnly && saveCallback && (
-                  <Tooltip
-                    label={
-                      isDirty ? "Save changes to config" : "No unsaved changes"
-                    }
-                  >
-                    <Button
-                      leftIcon={<IconDeviceFloppy />}
-                      loading={isSaving}
-                      onClick={() => {
-                        onSave();
-                        logEventHandler?.("SAVE_BUTTON_CLICKED");
-                      }}
-                      disabled={!isDirty}
+                      onClick={onClearOutputs}
                       size="xs"
                       variant="gradient"
                     >
-                      Save
+                      Clear Outputs
                     </Button>
-                  </Tooltip>
-                )}
-              </Group>
+                  )}
+
+                  {saveCallback && (
+                    <Tooltip
+                      label={
+                        isDirty
+                          ? "Save changes to config"
+                          : "No unsaved changes"
+                      }
+                    >
+                      <Button
+                        leftIcon={<IconDeviceFloppy />}
+                        loading={isSaving}
+                        onClick={() => {
+                          onSave();
+                          logEventHandler?.("SAVE_BUTTON_CLICKED");
+                        }}
+                        disabled={!isDirty}
+                        size="xs"
+                        variant="gradient"
+                      >
+                        Save
+                      </Button>
+                    </Tooltip>
+                  )}
+                </Group>
+              )}
             </Flex>
             <ConfigNameDescription
               name={aiconfigState.name}