@@ -185,7 +163,7 @@ export const SettingsModal: React.FunctionComponent = () => {
),
},
{
- name: 'Governance',
+ name: 'governance',
tab:
Governance,
content: (
<>
@@ -196,7 +174,7 @@ export const SettingsModal: React.FunctionComponent = () => {
),
},
{
- name: 'Templates',
+ name: 'templates',
tab:
Templates,
content: (
@@ -221,27 +199,16 @@ export const SettingsModal: React.FunctionComponent = () => {
),
},
];
+
return (
-
-
- }
onSubmit={onSubmit}
onCancel={onCancel}
>
-
+
);
-};
+});
diff --git a/src/components/Modals/Settings/SettingsTabs.tsx b/src/components/Modals/Settings/SettingsTabs.tsx
index ce8d6c467..c53bda074 100644
--- a/src/components/Modals/Settings/SettingsTabs.tsx
+++ b/src/components/Modals/Settings/SettingsTabs.tsx
@@ -1,24 +1,26 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
-import state from '../../../state';
+import type { ReactNode, FunctionComponent } from 'react';
export interface SettingTab {
name: string;
- tab: React.ReactNode;
- content: React.ReactNode;
+ tab: ReactNode;
+ content: ReactNode;
}
interface SettingTabsProps {
+ active: string;
tabs: Array;
}
-export const SettingsTabs: React.FunctionComponent = ({
+export const SettingsTabs: FunctionComponent = ({
+ active,
tabs = [],
}) => {
- const settingsState = state.useSettingsState();
- const stateActiveTab = settingsState.activeTab.get();
- const [activeTab, setActiveTab] = useState(tabs.some(tab => tab.name === stateActiveTab) ? stateActiveTab : tabs[0]?.name);
-
+ const [activeTab, setActiveTab] = useState(
+ tabs.some(tab => tab.name === active) ? active : tabs[0]?.name
+ );
+
if (tabs.length === 0) {
return null;
}
diff --git a/src/components/Modals/index.tsx b/src/components/Modals/index.tsx
index d588b329b..97154ba7f 100644
--- a/src/components/Modals/index.tsx
+++ b/src/components/Modals/index.tsx
@@ -1,3 +1,6 @@
+export * from './Generator/GeneratorModal';
+export * from './Settings/SettingsModal';
+
export * from './ConfirmModal';
export * from './ConvertModal';
export * from './ConvertToLatestModal';
@@ -5,4 +8,3 @@ export * from './ImportBase64Modal';
export * from './ImportURLModal';
export * from './NewFileModal';
export * from './RedirectedModal';
-export * from './Generator/GeneratorModal';
\ No newline at end of file
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index d8dc463ec..2bb551fcf 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -1,7 +1,8 @@
-import { VscListSelection, VscCode, VscOpenPreview, VscGraph, VscNewFile } from 'react-icons/vsc';
+import { VscListSelection, VscCode, VscOpenPreview, VscGraph, VscNewFile, VscSettingsGear } from 'react-icons/vsc';
+import { show as showModal } from '@ebay/nice-modal-react';
import { Tooltip } from './common';
-import { SettingsModal } from './Modals/Settings/SettingsModal';
+import { SettingsModal, NewFileModal } from './Modals';
import { usePanelsState, panelsState } from '../state/index.state';
@@ -41,7 +42,7 @@ interface NavItem {
name: string;
title: string;
isActive: boolean;
- updateState?: () => void;
+ onClick: () => void;
icon: ReactNode;
tooltip: ReactNode;
}
@@ -50,7 +51,6 @@ interface SidebarProps {}
export const Sidebar: FunctionComponent = () => {
const { show, secondaryPanelType } = usePanelsState();
-
if (show.activityBar === false) {
return null;
}
@@ -61,7 +61,7 @@ export const Sidebar: FunctionComponent = () => {
name: 'primarySidebar',
title: 'Navigation',
isActive: show.primarySidebar,
- updateState: () => updateState('primarySidebar'),
+ onClick: () => updateState('primarySidebar'),
icon: ,
tooltip: 'Navigation',
},
@@ -70,7 +70,7 @@ export const Sidebar: FunctionComponent = () => {
name: 'primaryPanel',
title: 'Editor',
isActive: show.primaryPanel,
- updateState: () => updateState('primaryPanel'),
+ onClick: () => updateState('primaryPanel'),
icon: ,
tooltip: 'Editor',
},
@@ -79,7 +79,7 @@ export const Sidebar: FunctionComponent = () => {
name: 'template',
title: 'Template',
isActive: show.secondaryPanel && secondaryPanelType === 'template',
- updateState: () => updateState('secondaryPanel', 'template'),
+ onClick: () => updateState('secondaryPanel', 'template'),
icon: ,
tooltip: 'HTML preview',
},
@@ -88,7 +88,7 @@ export const Sidebar: FunctionComponent = () => {
name: 'visualiser',
title: 'Visualiser',
isActive: show.secondaryPanel && secondaryPanelType === 'visualiser',
- updateState: () => updateState('secondaryPanel', 'visualiser'),
+ onClick: () => updateState('secondaryPanel', 'visualiser'),
icon: ,
tooltip: 'Blocks visualiser',
},
@@ -97,7 +97,7 @@ export const Sidebar: FunctionComponent = () => {
name: 'newFile',
title: 'New file',
isActive: false,
- updateState: () => panelsState.setState({ newFileOpened: true }),
+ onClick: () => showModal(NewFileModal),
icon: ,
tooltip: 'New file',
},
@@ -110,7 +110,7 @@ export const Sidebar: FunctionComponent = () => {
-
+
+
+
);
diff --git a/src/components/Template/HTMLWrapper.tsx b/src/components/Template/HTMLWrapper.tsx
index 461c60ff4..bd7b8484d 100644
--- a/src/components/Template/HTMLWrapper.tsx
+++ b/src/components/Template/HTMLWrapper.tsx
@@ -3,6 +3,7 @@ import { AsyncApiComponentWP } from '@asyncapi/react-component';
import { useServices } from '../../services';
import state from '../../state';
+import { useSettingsState } from '../../state/index.state';
import type { OldAsyncAPIDocument as AsyncAPIDocument } from '@asyncapi/parser/cjs';
@@ -16,11 +17,10 @@ export const HTMLWrapper: React.FunctionComponent