feat: add Dockerfile, Cypress, code generation

apps/studio-next/cypress/e2e/studio-ui.spec.cy.ts

@@ -1,14 +1,64 @@
+const isV2 = false;
+const isV3 = true;
+
 describe('Studio UI spec', () => {
   beforeEach(() => {
     cy.visit('/');
   });
 
-  it('Button "Settings" should be visible in the UI', () => {
-    cy.get('[data-testid="button-settings"]').should('be.visible');
+  it('Button "Navigation" should be visible in the UI', () => {
+    cy.get('[data-test="button-navigation"]').should('be.visible');
+  });
+
+  it('Button "Navigation" should display tooltip "Navigation" on hover', () => {
+    cy.get('[data-test="button-navigation"]').trigger('mouseenter');
+    cy.contains('Navigation').should('be.visible');
+  });
+
+  it('Button "Editor" should be visible in the UI', () => {
+    cy.get('[data-test="button-editor"]').should('be.visible');
+  });
+
+  it('Button "Editor" should display tooltip "Editor" on hover', () => {
+    cy.get('[data-test="button-editor"]').trigger('mouseenter');
+    cy.contains('Editor').should('be.visible');
+  });
+
+  it('Button "HTML preview" should be visible in the UI', () => {
+    cy.get('[data-test="button-html-preview"]').should('be.visible');
+  });
+
+  it('Button "HTML preview" should display tooltip "HTML preview" on hover', () => {
+    cy.get('[data-test="button-html-preview"]').trigger('mouseenter');
+    cy.contains('HTML preview').should('be.visible');
+  });
+
+  if (isV2) {
+    it('Button "Blocks visualiser" should be visible in the UI', () => {
+      cy.get('[data-test="button-visualiser"]').should('be.visible');
+    });
+
+    it('Button "Blocks visualiser" should display tooltip "Blocks visualiser" on hover', () => {
+      cy.get('[data-test="button-visualiser"]').trigger('mouseenter');
+      cy.contains('Blocks visualiser').should('be.visible');
+    });
+  }
+
+  it('Button "New file" should be visible in the UI', () => {
+    cy.get('[data-test="button-new-file"]').should('be.visible');
+  });
+
+  it('Button "New file" should display tooltip "New file" on hover', () => {
+    cy.get('[data-test="button-new-file"]').trigger('mouseenter');
+    cy.contains('New file').should('be.visible');
+  });
+
+  it('Button "Studio settings" should be visible in the UI', () => {
+    cy.get('[data-test="button-settings"]').should('be.visible');
   });
 
-  it('Button "Settings" should display tooltip "Studio settings" on hover', () => {
-    cy.get('[data-testid="button-settings"]').trigger('mouseenter');
+  it('Button "Studio settings" should display tooltip "Studio settings" on hover', () => {
+    cy.get('[data-test="button-studio-settings"]').trigger('mouseenter');
     cy.contains('Studio settings').should('be.visible');
   });
 });

apps/studio-next/src/components/Sidebar.tsx

@@ -46,14 +46,15 @@ interface NavItem {
   icon: ReactNode;
   tooltip: ReactNode;
   enabled: boolean;
+  dataTest: string;
 }
 
 interface SidebarProps {}
 
 export const Sidebar: FunctionComponent<SidebarProps> = () => {
   const { show, secondaryPanelType } = usePanelsState();
   const document = useDocumentsState(state => state.documents['asyncapi']?.document) || null;
-  const isV3 = document?.version() === '3.0.0';
+  const isV3 = document?.version().startsWith('3.');
 
   if (show.activityBar === false) {
     return null;
@@ -68,7 +69,8 @@ export const Sidebar: FunctionComponent<SidebarProps> = () => {
       onClick: () => updateState('primarySidebar'),
       icon: <VscListSelection className="w-5 h-5" />,
       tooltip: 'Navigation',
-      enabled: true
+      enabled: true,
+      dataTest: 'button-navigation',
     },
     // editor
     {
@@ -78,27 +80,30 @@ export const Sidebar: FunctionComponent<SidebarProps> = () => {
       onClick: () => updateState('primaryPanel'),
       icon: <VscCode className="w-5 h-5" />,
       tooltip: 'Editor',
-      enabled: true
+      enabled: true,
+      dataTest: 'button-editor',
     },
     // template
     {
       name: 'template',
-      title: 'Template',
+      title: 'HTML preview',
       isActive: show.secondaryPanel && secondaryPanelType === 'template',
       onClick: () => updateState('secondaryPanel', 'template'),
       icon: <VscOpenPreview className="w-5 h-5" />,
       tooltip: 'HTML preview',
-      enabled: true
+      enabled: true,
+      dataTest: 'button-html-preview',
     },
     // visuliser
     {
       name: 'visualiser',
-      title: 'Visualiser',
+      title: 'Blocks visualiser',
       isActive: show.secondaryPanel && secondaryPanelType === 'visualiser',
       onClick: () => updateState('secondaryPanel', 'visualiser'),
       icon: <VscGraph className="w-5 h-5" />,
       tooltip: 'Blocks visualiser',
-      enabled: !isV3
+      enabled: !isV3,
+      dataTest: 'button-visualiser',
     },
     // newFile
     {
@@ -108,7 +113,8 @@ export const Sidebar: FunctionComponent<SidebarProps> = () => {
       onClick: () => showModal(ConfirmNewFileModal),
       icon: <VscNewFile className="w-5 h-5" />,
       tooltip: 'New file',
-      enabled: true
+      enabled: true,
+      dataTest: 'button-new-file',
     },
   ];
 
@@ -124,6 +130,7 @@ export const Sidebar: FunctionComponent<SidebarProps> = () => {
               onClick={() => item.onClick()}
               className={'flex text-sm focus:outline-none border-box p-2'}
               type="button"
+              data-test={item.dataTest}
             >
               <div className={item.isActive ? 'bg-gray-600 p-2 rounded text-white' : 'p-2 text-gray-500 hover:text-white'}>
                 {item.icon}
@@ -139,7 +146,7 @@ export const Sidebar: FunctionComponent<SidebarProps> = () => {
             className='flex text-gray-500 hover:text-white focus:outline-none border-box p-4'
             type="button"  
             onClick={() => showModal(SettingsModal)}
-            data-testid="button-settings"
+            data-test="button-studio-settings"
           >
             <VscSettingsGear className="w-5 h-5" />
           </button>