Indicate that pxl script editing has been disabled within CodeEditor

Signed-off-by: Dom Del Nano <ddelnano@gmail.com>

Author: ddelnano

src/ui/src/components/code-editor/code-editor.tsx

@@ -24,7 +24,6 @@ import type { MonacoEditorProps } from 'react-monaco-editor';
 
 import { COMMON_THEME } from 'app/components/mui-theme';
 import { Spinner } from 'app/components/spinner/spinner';
-import { SCRIPT_MODIFICATION_DISABLED } from 'app/containers/constants';
 import { buildClass } from 'app/utils/build-class';
 
 interface CodeEditorProps {
@@ -86,7 +85,7 @@ export class CodeEditor extends React.PureComponent<CodeEditorProps, CodeEditorS
         scrollBeyondLastColumn: 3, // Prevents hiding text behind the minimap or the scrollbar. Expands the scroll area.
         scrollBeyondLastLine: false,
         fontFamily: COMMON_THEME.typography.monospace.fontFamily,
-        readOnly: this.props.isReadOnly === true || SCRIPT_MODIFICATION_DISABLED,
+        readOnly: this.props.isReadOnly === true,
       },
     };
     this.onChange = this.onChange.bind(this);

src/ui/src/containers/editor/editor.tsx

@@ -31,6 +31,7 @@ import {
 } from 'app/components';
 import { usePluginList } from 'app/containers/admin/plugins/plugin-gql';
 import { SCRATCH_SCRIPT } from 'app/containers/App/scripts-context';
+import { SCRIPT_MODIFICATION_DISABLED } from 'app/containers/constants';
 import { getKeyMap } from 'app/containers/live/shortcuts';
 import { EditorContext } from 'app/context/editor-context';
 import { LayoutContext } from 'app/context/layout-context';
@@ -77,6 +78,8 @@ const useStyles = makeStyles((theme: Theme) => createStyles({
   },
 }), { name: 'Editor' });
 
+const editorReadOnlyReason = 'Your cluster admin has disabled script modification';
+
 const shortcutKeys = Object.values(getKeyMap()).map((keyBinding) => keyBinding.sequence);
 
 const VisEditor = React.memo<{ visible: boolean }>(({ visible }) => {
@@ -110,6 +113,8 @@ const VisEditor = React.memo<{ visible: boolean }>(({ visible }) => {
       shortcutKeys={shortcutKeys}
       language='json'
       theme={EDITOR_THEME_MAP[theme.palette.mode]}
+      readOnlyReason={SCRIPT_MODIFICATION_DISABLED ? editorReadOnlyReason : undefined}
+      isReadOnly={SCRIPT_MODIFICATION_DISABLED}
     />
   );
 });
@@ -147,6 +152,8 @@ const PxLEditor = React.memo<{ visible: boolean }>(({ visible }) => {
       shortcutKeys={shortcutKeys}
       language='python'
       theme={EDITOR_THEME_MAP[theme.palette.mode]}
+      isReadOnly={SCRIPT_MODIFICATION_DISABLED}
+      readOnlyReason={SCRIPT_MODIFICATION_DISABLED ? editorReadOnlyReason : undefined}
     />
   );
 });

src/ui/src/pages/configure-data-export/data-export-detail.tsx

@@ -42,7 +42,8 @@ import { useHistory, useLocation } from 'react-router';
 
 import { CodeEditor, EDITOR_THEME_MAP, StatusCell, StatusGroup, useSnackbar } from 'app/components';
 import { usePluginConfig } from 'app/containers/admin/plugins/plugin-gql';
-import { GQLClusterStatus, GQLEditableRetentionScript } from 'app/types/schema';
+import { SCRIPT_MODIFICATION_DISABLED } from 'app/containers/constants';
+import { GQLClusterStatus, GQLDetailedRetentionScript, GQLEditableRetentionScript } from 'app/types/schema';
 import { AutoSizerContext, withAutoSizerContext } from 'app/utils/autosizer';
 import { allowRetentionScriptName } from 'configurable/data-export';
 
@@ -121,9 +122,21 @@ interface RetentionScriptEditorProps {
   initialValue: string;
   onChange: (value: string) => void;
   isReadOnly: boolean;
+  readOnlyReason: string;
 }
+
+const getReadOnlyReason = (script: GQLDetailedRetentionScript | null): string | undefined => {
+  if (script?.isPreset) {
+    return 'PxL for preset scripts cannot be edited';
+  }
+  if (SCRIPT_MODIFICATION_DISABLED) {
+    return 'Editing retention scripts is disabled.';
+  }
+  return undefined;
+};
+
 const RetentionScriptEditorInner = React.memo<RetentionScriptEditorProps>(({
-  initialValue, onChange, isReadOnly = false,
+  initialValue, onChange, isReadOnly = false, readOnlyReason,
 }) => {
   const { width, height } = React.useContext(AutoSizerContext);
   const theme = useTheme();
@@ -152,7 +165,7 @@ const RetentionScriptEditorInner = React.memo<RetentionScriptEditorProps>(({
         language='python'
         theme={EDITOR_THEME_MAP[theme.palette.mode]}
         isReadOnly={isReadOnly}
-        readOnlyReason='PxL for preset scripts cannot be edited'
+        readOnlyReason={readOnlyReason}
       />
     </div>
   );
@@ -497,7 +510,8 @@ export const EditDataExportScript = React.memo<{ scriptId: string, isCreate: boo
           <RetentionScriptEditor
             initialValue={pendingValues.contents}
             onChange={(v) => setPendingField('contents', v)}
-            isReadOnly={script?.isPreset}
+            isReadOnly={script?.isPreset || SCRIPT_MODIFICATION_DISABLED}
+            readOnlyReason={getReadOnlyReason(script)}
           />
         </div>
       </Paper>