Update Autosize Code Editor toolbar

packages/components/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Change Log
 
+## 4.1.0 (2025-01-17)
+
+### Features / Enhancements
+
+- Updated AutosizeCodeEditor (#78)
+
+## 4.0.0 (2024-01-10)
+
+### Features / Enhancements
+
+- Added useSavedState hook (#77)
+- Added useLocalStorage hook (#77)
+
+## 3.9.0 (2024-01-09)
+
+### Features / Enhancements
+
+- Added Alert with details component (#76)
+
 ## 3.8.0 (2024-12-12)
 
 ### Features / Enhancements
@@ -10,32 +29,32 @@
 
 ### Features / Enhancements
 
-- Add DatasourceEditor and DatasourcePayloadEditor (#73)
+- Added DatasourceEditor and DatasourcePayloadEditor (#73)
 
 ## 3.6.0 (2024-11-29)
 
 ### Features / Enhancements
 
-- Update AutosizeCodeEditor (#70)
-- Update onBlur behavior for code editor (#71)
+- Updated AutosizeCodeEditor (#70)
+- Updated onBlur behavior for code editor (#71)
 
 ## 3.5.0 (2024-10-23)
 
 ### Features / Enhancements
 
-- Add useDatasourceRequest hooks (#69)
+- Added useDatasourceRequest hooks (#69)
 
 ## 3.4.1 (2024-10-22)
 
 ### Features / Enhancements
 
-- Add useDashboardVariables and useDashboardRefresh hooks (#68)
+- Added useDashboardVariables and useDashboardRefresh hooks (#68)
 
 ## 3.3.0 (2024-10-02)
 
 ### Features / Enhancements
 
-- Update Code Editor toolbar (#67)
+- Updated Code Editor toolbar (#67)
 
 ## 3.2.0 (2024-09-20)
 
@@ -60,7 +79,7 @@
 
 ### Features / Enhancements
 
-- Update @testing-library/react to 16 (#60)
+- Updated @testing-library/react to 16 (#60)
 
 ## 2.9.0 (2024-09-02)
 

packages/components/LICENSE

@@ -186,7 +186,7 @@
       same "printed page" as the copyright notice for easier
       identification within third-party archives.
 
-   Copyright 2023-2024 Volkov Labs
+   Copyright 2023-2025 Volkov Labs
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.

packages/components/package.json

@@ -89,5 +89,5 @@
     "typecheck": "tsc --emitDeclarationOnly false --noEmit"
   },
   "types": "dist/index.d.ts",
-  "version": "4.0.0"
+  "version": "4.1.0"
 }

packages/components/src/components/AutosizeCodeEditor/AutosizeCodeEditor.test.tsx

@@ -512,5 +512,25 @@ describe('AutosizeCodeEditor', () => {
        */
       expect(selectors.copyPasteText()).toHaveTextContent('');
     });
+
+    it('Should disable paste button for read-only mode', async () => {
+      const onChange = jest.fn();
+      const onEditorDidMount = jest.fn();
+
+      render(getComponent({ onChange, onEditorDidMount, value: 'test code', readOnly: true }));
+
+      expect(selectors.pasteButton()).toBeInTheDocument();
+
+      /**
+       * Click on paste button
+       */
+      await act(() => fireEvent.click(selectors.pasteButton()));
+
+      /**
+       * Should display pasted text
+       */
+      expect(selectors.pasteButton()).toBeInTheDocument();
+      expect(selectors.pasteButton()).toBeDisabled();
+    });
   });
 });

packages/components/src/components/AutosizeCodeEditor/AutosizeCodeEditor.tsx

@@ -183,6 +183,7 @@ export const AutosizeCodeEditor: React.FC<Props> = ({
         setIsShowMiniMap={setIsShowMiniMap}
         currentMonacoOptions={currentMonacoOptions}
         setCurrentMonacoOptions={setCurrentMonacoOptions}
+        readOnly={restProps.readOnly}
       />
       <CodeEditor
         value={isEscaping ? value.replaceAll('\\n', '\n') : value}
@@ -214,6 +215,7 @@ export const AutosizeCodeEditor: React.FC<Props> = ({
             setIsShowMiniMap={setIsShowMiniMap}
             currentMonacoOptions={currentMonacoOptions}
             setCurrentMonacoOptions={setCurrentMonacoOptions}
+            readOnly={restProps.readOnly}
           />
           <CodeEditor
             value={isEscaping ? value.replaceAll('\\n', '\n') : value}

packages/components/src/components/AutosizeCodeEditor/Toolbar.tsx

@@ -71,6 +71,13 @@ type Props = {
    * @type {React.Dispatch<React.SetStateAction<boolean | undefined>>}
    */
   setIsShowMiniMap: React.Dispatch<React.SetStateAction<boolean | undefined>>;
+
+  /**
+   * Is read only mode
+   *
+   * @type {boolean}
+   */
+  readOnly?: boolean;
 };
 
 /**
@@ -85,6 +92,7 @@ export const Toolbar: React.FC<Props> = ({
   currentMonacoOptions,
   isShowMiniMap,
   setIsShowMiniMap,
+  readOnly,
 }) => {
   /**
    * Styles and Theme
@@ -137,8 +145,9 @@ export const Toolbar: React.FC<Props> = ({
           {...TEST_IDS.codeEditor.copyButton.apply()}
         />
         <ToolbarButton
+          disabled={readOnly}
           className={styles.copyPasteIcon}
-          tooltip="Paste code"
+          tooltip={readOnly ? `Cannot edit in read-only mode` : `Paste code`}
           icon="file-alt"
           iconSize="lg"
           onClick={async () => {