7/n Read-only mode: Prompt Menu (Left side triple dots) (#961)

7/n Read-only mode: Prompt Menu (Left side triple dots)



- Add ReadOnly prop to the Prompt Menu (triple dots on the left side of
the component)

## Testplan

1. Pass readOnly=True prop in `AIConfigEditor`

| readOnly={false}  | readOnly={true} |
| ------------- | ------------- |
| <img width="1172" alt="Screenshot 2024-01-18 at 1 24 10 PM"
src="https://github.com/lastmile-ai/aiconfig/assets/141073967/86842c3d-b864-45ef-bce4-77435c5d0518">
| <img width="1127" alt="Screenshot 2024-01-18 at 1 25 33 PM"
src="https://github.com/lastmile-ai/aiconfig/assets/141073967/38c9ef53-dfe8-4eb8-b7f2-5f87adf2a708">
|

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

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

@@ -10,8 +10,9 @@ import {
 } from "@mantine/core";
 import { IconTrash, IconPlus } from "@tabler/icons-react";
 import { debounce, uniqueId } from "lodash";
-import { useState, useCallback, memo, useMemo } from "react";
+import { useState, useCallback, memo, useMemo, useContext } from "react";
 import { JSONValue, JSONObject } from "aiconfig";
+import AIConfigContext from "../contexts/AIConfigContext";
 
 type Parameter = { parameterName: string; parameterValue: JSONValue };
 
@@ -36,7 +37,7 @@ const ParameterInput = memo(function ParameterInput(props: {
 }) {
  const { initialItemValue, removeParameter, onUpdateParameter } = props;
  // TODO: saqadri - update this once we have a readonly mode
- const { isReadonly } = { isReadonly: false };
+ const { readOnly } = useContext(AIConfigContext);
 
  const [parameterName, setParameterName] = useState(
  initialItemValue?.parameterName ?? ""
@@ -79,7 +80,7 @@ const ParameterInput = memo(function ParameterInput(props: {
  <Stack p="xs" spacing="xs" style={{ flexGrow: 1, borderBottom: border }}>
  <TextInput
  placeholder="Enter parameter name"
- disabled={isReadonly}
+ disabled={readOnly}
  error={
  parameterName && !isValidParameterName(parameterName)
  ? "Name must contain only letters, numbers, and underscores"
@@ -100,7 +101,7 @@ const ParameterInput = memo(function ParameterInput(props: {
  />
  <Textarea
  placeholder="Enter parameter value"
- disabled={isReadonly}
+ disabled={readOnly}
  radius="md"
  value={parameterValueString}
  autosize
@@ -111,12 +112,12 @@ const ParameterInput = memo(function ParameterInput(props: {
  debouncedCellParameterUpdate(parameterName, event.target.value);
  }}
  />
- <ActionIcon
+ { !readOnly && <ActionIcon
  onClick={() => removeParameter(parameterName)}
- disabled={isReadonly}
  >
- <IconTrash size={16} color={isReadonly ? "grey" : "red"} />
+ <IconTrash size={16} color={"red"} />
  </ActionIcon>
+ }
  </Stack>
  </Group>
  );
@@ -149,8 +150,7 @@ export default memo(function ParametersRenderer(props: {
  maxHeight?: string | number;
 }) {
  const { initialValue, onUpdateParameters } = props;
- // TODO: saqadri - update this when we have a readonly mode
- const { isReadonly } = { isReadonly: false }; //useContext(WorkbookContext);
+ const { readOnly } = useContext(AIConfigContext);
 
  const [parameters, setParameters] = useState<ParametersArray>(
  initialValue && Object.keys(initialValue).length > 0
@@ -244,7 +244,7 @@ export default memo(function ParametersRenderer(props: {
  );
  })}
  </Stack>
- {isReadonly ? null : (
+ {readOnly ? null : (
  <Tooltip label="Add parameter">
  <ActionIcon onClick={addParameter} className="addParameterButton">
  <IconPlus size={16} />

python/src/aiconfig/editor/client/src/components/prompt/PromptsContainer.tsx

@@ -60,10 +60,10 @@ export default memo(function PromptsContainer(props: Props) {
  return (
  <Stack key={prompt._ui.id}>
  <Flex mt="md">
- <PromptMenuButton
+ {!readOnly && <PromptMenuButton
  promptId={prompt._ui.id}
  onDeletePrompt={() => props.onDeletePrompt(prompt._ui.id)}
- />
+ />}
  <PromptContainer
  prompt={prompt}
  getModels={props.getModels}