From 0336253426ba934dc5f5801e71f3b5f8b8f87665 Mon Sep 17 00:00:00 2001 From: Mohammed Mehdi <96487647+catosaurusrex2003@users.noreply.github.com> Date: Thu, 10 Oct 2024 13:45:16 +0530 Subject: [PATCH] fix: visibility of Blocks visualiser when error (#1145) * fixed visibility of Blocks visualiser * added changeset * sonarcloud issues fixed --- .changeset/cold-garlics-attack.md | 5 + apps/studio/src/components/Sidebar.tsx | 25 +- pnpm-lock.yaml | 24857 +++++++++++------------ 3 files changed, 11451 insertions(+), 13436 deletions(-) create mode 100644 .changeset/cold-garlics-attack.md diff --git a/.changeset/cold-garlics-attack.md b/.changeset/cold-garlics-attack.md new file mode 100644 index 000000000..46ce573ed --- /dev/null +++ b/.changeset/cold-garlics-attack.md @@ -0,0 +1,5 @@ +--- +"@asyncapi/studio": patch +--- + +fixed the rendering of block visualiser when document has errors diff --git a/apps/studio/src/components/Sidebar.tsx b/apps/studio/src/components/Sidebar.tsx index ef83bbfdb..f1095a2ce 100644 --- a/apps/studio/src/components/Sidebar.tsx +++ b/apps/studio/src/components/Sidebar.tsx @@ -6,7 +6,7 @@ import { SettingsModal, ConfirmNewFileModal } from './Modals'; import { usePanelsState, panelsState, useDocumentsState } from '@/state'; -import type { FunctionComponent, ReactNode } from 'react'; +import { useEffect, useState, type FunctionComponent, type ReactNode } from 'react'; import type { PanelsState } from '@/state/panels.state'; import { driverObj } from '@/helpers/driver'; @@ -54,12 +54,12 @@ interface SidebarProps {} export const Sidebar: FunctionComponent = () => { const { show, secondaryPanelType } = usePanelsState(); - const document = useDocumentsState(state => state.documents['asyncapi']?.document) || null; - const isV3 = document?.version().startsWith('3.'); - - if (show.activityBar === false) { - return null; - } + const [document, hasErrors] = useDocumentsState((state) => [ + state.documents['asyncapi']?.document, + state.documents['asyncapi']?.diagnostics?.errors.length > 0, + ]) || [null, false]; + + const [isV3, setIsV3] = useState(document?.version().startsWith('3.')); let navigation: NavItem[] = [ // navigation @@ -125,6 +125,17 @@ export const Sidebar: FunctionComponent = () => { const getCurrentTourStep = localStorage.getItem('currentTourStep'); driverObj.drive(parseInt(getCurrentTourStep ?? '0', 10)); }; + + useEffect(() => { + // if the document has no errors then only update the setIsV3 variable + if (!hasErrors) { + setIsV3(document?.version().startsWith('3.')); + } + }, [document]); + + if (show.activityBar === false) { + return null; + } return (