Update wrap button to indicate state and add button for the map (#64)

* Code editor updated * Updates --------- Co-authored-by: Mikhail Volkov <[email protected]>
VolkovLabs · Sep 13, 2024 · 28e7261 · 28e7261
1 parent ccdde92
commit 28e7261
Show file tree

Hide file tree

Showing 7 changed files with 117 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
-# NPM packages
+# Business packages
 
-Packages to use across projects.
+NPM packages for the Business Suite for Grafana.
 
 ## Install all packages
 
@@ -10,10 +10,27 @@ Run the command in the root folder to install all packages
 npm install
 ```
 
-## Add npm package
+## Install a specific package
 
 Install npm or local package for the workspace
 
 ```
 npm i [package] -w [local-package]
 ```
+
+## Business Suite for Grafana
+
+The Business Suite is a collection of open source plugins created and actively maintained by Volkov Labs.
+
+The collection aims to solve the most frequent business tasks by providing an intuitive interface with detailed written documentation, examples, and video tutorials.
+
+[![Business Suite for Grafana](https://raw.githubusercontent.com/VolkovLabs/.github/main/business.png)](https://volkovlabs.io/plugins/)
+
+## Feedback
+
+We're looking forward to hearing from you. You can use different ways to get in touch with us.
+
+- Ask a question, request a new feature, or report an issue at [GitHub issues](https://github.com/volkovlabs/business-packages/issues).
+- Subscribe to our [YouTube Channel](https://www.youtube.com/@volkovlabs) and leave your comments.
+- Sponsor our open-source plugins for Grafana at [GitHub Sponsor](https://github.com/sponsors/VolkovLabs).
+- Support our project by starring the repository.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Change Log
 
+## 3.1.0 (2024-09-13)
+
+### Features / Enhancements
+
+- Updated wrap button to indicate state (#64)
+- Added button for the mini map (#64)
+
 ## 3.0.0 (2024-09-11)
 
 ### Features / Enhancements

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -88,5 +88,5 @@
     "typecheck": "tsc --emitDeclarationOnly false --noEmit"
   },
   "types": "dist/index.d.ts",
-  "version": "3.0.0"
+  "version": "3.1.0"
 }
diff --git a/packages/components/src/components/AutosizeCodeEditor/AutosizeCodeEditor.test.tsx b/packages/components/src/components/AutosizeCodeEditor/AutosizeCodeEditor.test.tsx
@@ -246,6 +246,49 @@ describe('AutosizeCodeEditor', () => {
     expect(onEditorDidMount).toHaveBeenCalledTimes(4);
   });
 
+  it('Should render mini map  button and show/hide map', async () => {
+    const onChange = jest.fn();
+    const onEditorDidMount = jest.fn();
+
+    render(getComponent({ onEditorDidMount, onChange }));
+
+    /**
+     * Check paste button
+     */
+    expect(selectors.miniMapButton()).toBeInTheDocument();
+
+    /**
+     * Check tooltip via aria-label
+     */
+    expect(selectors.miniMapButton()).toHaveAttribute('aria-label', 'Show mini map');
+
+    expect(onEditorDidMount).toHaveBeenCalledTimes(2);
+
+    act(() => fireEvent.click(selectors.miniMapButton()));
+
+    /**
+     * Call onEditorDidMount after set state
+     */
+    expect(onEditorDidMount).toHaveBeenCalledTimes(3);
+
+    /**
+     * Check tooltip via aria-label
+     */
+    expect(selectors.miniMapButton()).toHaveAttribute('aria-label', 'Hide mini map');
+
+    act(() => fireEvent.click(selectors.miniMapButton()));
+
+    /**
+     * Check tooltip via aria-label
+     */
+    expect(selectors.miniMapButton()).toHaveAttribute('aria-label', 'Show mini map');
+
+    /**
+     * Call onEditorDidMount after set state
+     */
+    expect(onEditorDidMount).toHaveBeenCalledTimes(4);
+  });
+
   it('Should open/close modal on toolbar button', async () => {
     const onChange = jest.fn();
     const onEditorDidMount = jest.fn();

diff --git a/packages/components/src/components/AutosizeCodeEditor/AutosizeCodeEditor.tsx b/packages/components/src/components/AutosizeCodeEditor/AutosizeCodeEditor.tsx
@@ -56,6 +56,7 @@ export const AutosizeCodeEditor: React.FC<Props> = ({
   modalButtonTooltip,
   onEditorDidMount,
   monacoOptions,
+  showMiniMap,
   ...restProps
 }) => {
   /**
@@ -67,9 +68,11 @@ export const AutosizeCodeEditor: React.FC<Props> = ({
    * State
    */
   const [isOpen, setIsOpen] = useState(false);
+  const [isShowMiniMap, setIsShowMiniMap] = useState(showMiniMap);
+  const [currentMonacoOptions, setCurrentMonacoOptions] = useState(monacoOptions);
   const [monacoEditor, setMonacoEditor] = useState<monacoType.editor.IStandaloneCodeEditor | null>(null);
   const [monacoEditorModal, setMonacoEditorModal] = useState<monacoType.editor.IStandaloneCodeEditor | null>(null);
-  const [currentMonacoOptions, setCurrentMonacoOptions] = useState(monacoOptions);
+
   /**
    * Height
    */
@@ -125,22 +128,25 @@ export const AutosizeCodeEditor: React.FC<Props> = ({
   return (
     <>
       <Toolbar
+        editorValue={value}
         setIsOpen={setIsOpen}
         monacoEditor={monacoEditor}
-        editorValue={value}
+        isShowMiniMap={isShowMiniMap}
+        setIsShowMiniMap={setIsShowMiniMap}
         modalButtonTooltip={modalButtonTooltip}
         currentMonacoOptions={currentMonacoOptions}
         setCurrentMonacoOptions={setCurrentMonacoOptions}
       />
       <CodeEditor
         value={value}
+        showMiniMap={isShowMiniMap}
+        height={staticHeight ?? height}
+        monacoOptions={currentMonacoOptions}
+        onEditorDidMount={onEditorDidMountMain}
         onChange={(value) => {
           onChange?.(value);
           setHeight(getHeightByValue(value, minHeight, maxHeight));
         }}
-        height={staticHeight ?? height}
-        onEditorDidMount={onEditorDidMountMain}
-        monacoOptions={currentMonacoOptions}
         {...restProps}
       />
 
@@ -156,23 +162,25 @@ export const AutosizeCodeEditor: React.FC<Props> = ({
         <div className={styles.content} {...TEST_IDS.codeEditor.modal.apply()}>
           <Toolbar
             isModal
+            editorValue={value}
             setIsOpen={setIsOpen}
+            isShowMiniMap={isShowMiniMap}
             monacoEditor={monacoEditorModal}
-            editorValue={value}
+            setIsShowMiniMap={setIsShowMiniMap}
             modalButtonTooltip={modalButtonTooltip}
             currentMonacoOptions={currentMonacoOptions}
             setCurrentMonacoOptions={setCurrentMonacoOptions}
           />
           <CodeEditor
-            showMiniMap
             value={value}
+            showMiniMap={isShowMiniMap}
+            containerStyles={styles.modalEditor}
+            monacoOptions={currentMonacoOptions}
+            onEditorDidMount={modalEditorDidMount}
             onChange={(value) => {
               onChange?.(value);
               setHeight(getHeightByValue(value, minHeight, maxHeight));
             }}
-            containerStyles={styles.modalEditor}
-            onEditorDidMount={modalEditorDidMount}
-            monacoOptions={currentMonacoOptions}
             {...restProps}
           />
         </div>

diff --git a/packages/components/src/components/AutosizeCodeEditor/Toolbar.tsx b/packages/components/src/components/AutosizeCodeEditor/Toolbar.tsx
@@ -64,6 +64,20 @@ type Props = {
    * @type {React.Dispatch<React.SetStateAction<CodeEditorMonacoOptions | undefined>>}
    */
   setCurrentMonacoOptions: React.Dispatch<React.SetStateAction<CodeEditorMonacoOptions | undefined>>;
+
+  /**
+   * Show mini map
+   *
+   * @type {boolean}
+   */
+  isShowMiniMap?: boolean;
+
+  /**
+   * Set show mini map
+   *
+   * @type {React.Dispatch<React.SetStateAction<boolean | undefined>>}
+   */
+  setIsShowMiniMap: React.Dispatch<React.SetStateAction<boolean | undefined>>;
 };
 
 /**
@@ -77,6 +91,8 @@ export const Toolbar: React.FC<Props> = ({
   isModal = false,
   setCurrentMonacoOptions,
   currentMonacoOptions,
+  isShowMiniMap,
+  setIsShowMiniMap,
 }) => {
   /**
    * Styles and Theme
@@ -179,6 +195,7 @@ export const Toolbar: React.FC<Props> = ({
         tooltip="Wrap code on new lines"
         icon="wrap-text"
         iconSize="lg"
+        variant={currentMonacoOptions?.wordWrap === 'on' ? 'active' : 'default'}
         onClick={() => {
           const wrapCode = currentMonacoOptions?.wordWrap === 'on' ? 'off' : 'on';
           setCurrentMonacoOptions({
@@ -188,6 +205,16 @@ 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()}
+      />
     </PageToolbar>
   );
 };
diff --git a/packages/components/src/constants/tests.ts b/packages/components/src/constants/tests.ts
@@ -26,6 +26,7 @@ export const TEST_IDS = {
     copyButton: createSelector(() => `data-testid code-editor copy-button`),
     copyPasteText: createSelector(() => `data-testid code-editor copy-paste-text`),
     modal: createSelector(() => `data-testid code-editor modal-window`),
+    miniMapButton: createSelector(() => `data-testid code-editor mini-map-button`),
     modalButton: createSelector((name: unknown) => `data-testid code-editor modal-button-${name}`),
     pasteButton: createSelector(() => `data-testid code-editor paste-button`),
     wrapButton: createSelector(() => `data-testid code-editor wrap-button`),