feat: add v3 support in the setting

asyncapi · Jul 31, 2023 · f11ccf1 · f11ccf1
1 parent d280065
commit f11ccf1
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 11 deletions.
diff --git a/apps/studio/src/components/Content.tsx b/apps/studio/src/components/Content.tsx
@@ -5,18 +5,20 @@ import { Template } from './Template';
 import { VisualiserTemplate } from './Visualiser';
 
 import { debounce } from '../helpers';
-import { usePanelsState, useDocumentsState } from '../state';
+import { usePanelsState, useDocumentsState, useSettingsState } from '../state';
 
-import { useEffect, type FunctionComponent } from 'react';
+import type { FunctionComponent } from 'react';
 
 interface ContentProps {}
 
 export const Content: FunctionComponent<ContentProps> = () => { // eslint-disable-line sonarjs/cognitive-complexity
   const { show, secondaryPanelType } = usePanelsState();
   const document = useDocumentsState(state => state.documents['asyncapi']?.document) || null;
-  const navigationEnabled = document?.version() === '3.0.0' ? false : show.primarySidebar;
+  const v3Enabled = useSettingsState(state => state.editor.v3support) || false;
+  const isV3 = document?.version() === '3.0.0' && v3Enabled;
+  const navigationEnabled = isV3 ? false : show.primarySidebar;
   const editorEnabled = show.primaryPanel;
-  const viewEnabled = document?.version() === '3.0.0' ? false : show.secondaryPanel;
+  const viewEnabled = isV3 ? false : show.secondaryPanel;
   const viewType = secondaryPanelType;
 
   const splitPosLeft = 'splitPos:left';

diff --git a/apps/studio/src/components/Modals/Settings/SettingsModal.tsx b/apps/studio/src/components/Modals/Settings/SettingsModal.tsx
@@ -62,12 +62,14 @@ export const SettingsModal = create<SettingsModalProps>(({ activeTab = 'editor'
   const [governanceHints, setGovernanceHints] = useState(settings.governance.show.hints);
   const [autoRendering, setAutoRendering] = useState(settings.templates.autoRendering);
   const [confirmDisabled, setConfirmDisabled] = useState(true);
+  const [v3support, setV3support] = useState(settings.editor.v3support);
 
   const createNewState = (): SettingsState => {
     return {
       editor: {
         autoSaving,
         savingDelay,
+        v3support
       },
       governance: {
         show: {
@@ -86,7 +88,7 @@ export const SettingsModal = create<SettingsModalProps>(({ activeTab = 'editor'
     const newState = createNewState();
     const isThisSameObjects = settingsSvc.isEqual(newState);
     setConfirmDisabled(isThisSameObjects);
-  }, [autoSaving, savingDelay, autoRendering, governanceWarnings, governanceInformations, governanceHints]);
+  }, [autoSaving, savingDelay, autoRendering, governanceWarnings, governanceInformations, governanceHints, v3support]);
 
   const onCancel = useCallback(() => {
     modal.hide();
@@ -129,7 +131,21 @@ export const SettingsModal = create<SettingsModalProps>(({ activeTab = 'editor'
               Save automatically after each change in the document or manually.
             </div>
           </div>
-          <div className={`flex flex-col mt-4 text-sm pl-8 ${autoSaving ? 'opacity-1' : 'opacity-25'}`}>
+          <div className="flex flex-col mt-4 text-sm">
+            <div className="flex flex-row content-center justify-between">
+              <label
+                htmlFor="settings-auto-saving"
+                className="flex justify-right items-center w-1/2 content-center font-medium text-gray-700"
+              >
+                Enable v3 support
+              </label>
+              <Switch
+                toggle={v3support}
+                onChange={(v) => setV3support(v)}
+              />
+            </div>
+          </div>
+          <div className="flex flex-col mt-4 text-sm">
             <div className="flex flex-row content-center justify-between">
               <label
                 htmlFor="settings-template-delay"

diff --git a/apps/studio/src/components/Sidebar.tsx b/apps/studio/src/components/Sidebar.tsx
@@ -4,7 +4,7 @@ import { show as showModal } from '@ebay/nice-modal-react';
 import { Tooltip } from './common';
 import { SettingsModal, NewFileModal } from './Modals';
 
-import { usePanelsState, panelsState, useDocumentsState } from '../state';
+import { usePanelsState, panelsState, useDocumentsState, useSettingsState } from '../state';
 
 import type { FunctionComponent, ReactNode } from 'react';
 import type { PanelsState } from '../state/panels.state';
@@ -52,7 +52,9 @@ interface SidebarProps {}
 
 export const Sidebar: FunctionComponent<SidebarProps> = () => {
   const { show, secondaryPanelType } = usePanelsState();
-  const document = useDocumentsState(state => state.documents['asyncapi']?.document);
+  const document = useDocumentsState(state => state.documents['asyncapi']?.document) || null;
+  const v3Enabled = useSettingsState(state => state.editor.v3support) || false;
+  const isV3 = document?.version() === '3.0.0' && v3Enabled;
 
   if (show.activityBar === false) {
     return null;
@@ -67,7 +69,7 @@ export const Sidebar: FunctionComponent<SidebarProps> = () => {
       onClick: () => updateState('primarySidebar'),
       icon: <VscListSelection className="w-5 h-5" />,
       tooltip: 'Navigation',
-      enabled: !(document?.version() === '3.0.0')
+      enabled: !isV3
     },
     // editor
     {
@@ -87,7 +89,7 @@ export const Sidebar: FunctionComponent<SidebarProps> = () => {
       onClick: () => updateState('secondaryPanel', 'template'),
       icon: <VscOpenPreview className="w-5 h-5" />,
       tooltip: 'HTML preview',
-      enabled: !(document?.version() === '3.0.0')
+      enabled: !isV3
     },
     // visuliser
     {
@@ -97,7 +99,7 @@ export const Sidebar: FunctionComponent<SidebarProps> = () => {
       onClick: () => updateState('secondaryPanel', 'visualiser'),
       icon: <VscGraph className="w-5 h-5" />,
       tooltip: 'Blocks visualiser',
-      enabled: !(document?.version() === '3.0.0')
+      enabled: !isV3
     },
     // newFile
     {

diff --git a/apps/studio/src/services/parser.service.ts b/apps/studio/src/services/parser.service.ts
@@ -169,4 +169,10 @@ export class ParserService extends AbstractService {
       }),
     );
   }
+
+  isV3(): boolean {
+    const { editor: { v3support } } = settingsState.getState();
+    console.log(v3support)
+    return false;
+  }
 }
diff --git a/apps/studio/src/state/settings.state.ts b/apps/studio/src/state/settings.state.ts
@@ -5,6 +5,7 @@ export type SettingsState = {
   editor: {
     autoSaving: boolean;
     savingDelay: number;
+    v3support: boolean;
   };
   governance: {
     show: {
@@ -24,6 +25,7 @@ export const settingsState = create(
       editor: {
         autoSaving: true,
         savingDelay: 625,
+        v3support: false,
       },
       governance: {
         show: {