Update Code Editor

packages/components/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 3.3.0 (2024-10-02)
+
+### Features / Enhancements
+
+- Update Code Editor toolbar (#67)
+
 ## 3.2.0 (2024-09-20)
 
 ### Features / Enhancements

packages/components/package.json

@@ -88,5 +88,5 @@
     "typecheck": "tsc --emitDeclarationOnly false --noEmit"
   },
   "types": "dist/index.d.ts",
-  "version": "3.2.0"
+  "version": "3.3.0"
 }

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

@@ -246,11 +246,15 @@ describe('AutosizeCodeEditor', () => {
     expect(onEditorDidMount).toHaveBeenCalledTimes(4);
   });
 
-  it('Should render mini map  button and show/hide map', async () => {
+  it('Should render mini map button and show/hide map if value more or equal 100 characters', async () => {
     const onChange = jest.fn();
     const onEditorDidMount = jest.fn();
 
-    render(getComponent({ onEditorDidMount, onChange }));
+    const valueIn1000Rows = Array.from(new Array(1000))
+      .map((value, index) => index)
+      .join('\n');
+
+    render(getComponent({ value: valueIn1000Rows, onEditorDidMount, onChange }));
 
     /**
      * Check paste button
@@ -289,6 +293,23 @@ describe('AutosizeCodeEditor', () => {
     expect(onEditorDidMount).toHaveBeenCalledTimes(4);
   });
 
+  it('Should not render mini map button if value less than 100 characters', async () => {
+    const onChange = jest.fn();
+    const onEditorDidMount = jest.fn();
+
+    /**
+     * 99 characters
+     */
+    const value = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore';
+
+    render(getComponent({ value: value, onEditorDidMount, onChange }));
+
+    /**
+     * Check paste button
+     */
+    expect(selectors.miniMapButton(true)).not.toBeInTheDocument();
+  });
+
   it('Should open/close modal on toolbar button', async () => {
     const onChange = jest.fn();
     const onEditorDidMount = jest.fn();

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

@@ -15,8 +15,6 @@ import { Toolbar } from './Toolbar';
 type Props = React.ComponentProps<typeof CodeEditor> & {
   minHeight?: number;
   maxHeight?: number;
-  modalTitle: string;
-  modalButtonTooltip: string;
 };
 
 /**
@@ -52,8 +50,6 @@ export const AutosizeCodeEditor: React.FC<Props> = ({
   minHeight,
   maxHeight,
   height: staticHeight,
-  modalTitle,
-  modalButtonTooltip,
   onEditorDidMount,
   monacoOptions,
   showMiniMap,
@@ -133,7 +129,6 @@ export const AutosizeCodeEditor: React.FC<Props> = ({
         monacoEditor={monacoEditor}
         isShowMiniMap={isShowMiniMap}
         setIsShowMiniMap={setIsShowMiniMap}
-        modalButtonTooltip={modalButtonTooltip}
         currentMonacoOptions={currentMonacoOptions}
         setCurrentMonacoOptions={setCurrentMonacoOptions}
       />
@@ -151,7 +146,7 @@ export const AutosizeCodeEditor: React.FC<Props> = ({
       />
 
       <Modal
-        title={modalTitle}
+        title="Code editor"
         isOpen={isOpen}
         onDismiss={() => setIsOpen(false)}
         className={styles.modal}
@@ -167,7 +162,6 @@ export const AutosizeCodeEditor: React.FC<Props> = ({
             isShowMiniMap={isShowMiniMap}
             monacoEditor={monacoEditorModal}
             setIsShowMiniMap={setIsShowMiniMap}
-            modalButtonTooltip={modalButtonTooltip}
             currentMonacoOptions={currentMonacoOptions}
             setCurrentMonacoOptions={setCurrentMonacoOptions}
           />

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

@@ -30,13 +30,6 @@ type Props = {
    */
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
 
-  /**
-   * Modal Button tooltip
-   *
-   * @type {string}
-   */
-  modalButtonTooltip: string;
-
   /**
    * Value
    *
@@ -86,7 +79,6 @@ type Props = {
 export const Toolbar: React.FC<Props> = ({
   monacoEditor,
   setIsOpen,
-  modalButtonTooltip,
   editorValue,
   isModal = false,
   setCurrentMonacoOptions,
@@ -123,7 +115,7 @@ export const Toolbar: React.FC<Props> = ({
       leftItems={[
         <ToolbarButton
           key="code-editor-button-modal"
-          tooltip={modalButtonTooltip}
+          tooltip={isModal ? 'Collapse code editor' : 'Expand code editor'}
           icon={isModal ? 'compress-arrows' : 'expand-arrows-alt'}
           iconSize="lg"
           onClick={() => setIsOpen(isModal ? false : true)}
@@ -205,16 +197,18 @@ export const Toolbar: React.FC<Props> = ({
         }}
         {...TEST_IDS.codeEditor.wrapButton.apply()}
       />
-      <ToolbarButton
-        tooltip={isShowMiniMap ? 'Hide mini map' : 'Show mini map'}
-        icon="gf-movepane-right"
-        iconSize="lg"
-        variant={isShowMiniMap ? 'active' : 'default'}
-        onClick={() => {
-          setIsShowMiniMap((prev) => !prev);
-        }}
-        {...TEST_IDS.codeEditor.miniMapButton.apply()}
-      />
+      {editorValue && editorValue.length > 100 && (
+        <ToolbarButton
+          tooltip={isShowMiniMap ? 'Hide mini map' : 'Show mini map'}
+          icon="gf-movepane-right"
+          iconSize="lg"
+          variant={isShowMiniMap ? 'active' : 'default'}
+          onClick={() => {
+            setIsShowMiniMap((prev) => !prev);
+          }}
+          {...TEST_IDS.codeEditor.miniMapButton.apply()}
+        />
+      )}
     </PageToolbar>
   );
 };