Merge remote-tracking branch 'upstream/master' into form-component

.github/workflows/lint-pr-adr.yml

@@ -78,11 +78,11 @@ jobs:
       - if: (fromJSON(steps.lint_title_adr.outputs.result).status == 'ok')
         name: Get all changed files
         id: changed_files_all
-        uses: tj-actions/changed-files@v37
+        uses: tj-actions/changed-files@v41
       - if: (fromJSON(steps.lint_title_adr.outputs.result).status == 'ok')
         name: Get files that should be changed
         id: changed_files_only
-        uses: tj-actions/changed-files@v37
+        uses: tj-actions/changed-files@v41
         with:
           files: |
             ${{ fromJSON(steps.lint_title_adr.outputs.result).expectedFileMatch }}

.github/workflows/release.yml

@@ -35,11 +35,12 @@ jobs:
       - name: Create Release Pull Request or Release
         uses: changesets/action@v1
         with:
-          publish: npm run publish
+          publish: npm run publish-packages
           version: npm run version-packages
           commit: "version packages"
           title: "chore: version packages"
         env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
           GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
           GIT_AUTHOR_NAME: asyncapi-bot
           GIT_AUTHOR_EMAIL: [email protected]

CODEOWNERS

@@ -6,7 +6,7 @@
 
 # The default owners are automatically added as reviewers when you open a pull request unless different owners are specified in the file.
 
-* @fmvilas @boyney123 @mcturco @magicmatatjahu @KhudaDad414 @Amzani @asyncapi-bot-eve
+* @magicmatatjahu @KhudaDad414 @Amzani @asyncapi-bot-eve
 
-apps/design-system/ @fmvilas @mcturco @KhudaDad414 @Amzani @princerajpoot20
-packages/ui/ @fmvilas @mcturco @KhudaDad414 @Amzani @princerajpoot20
+apps/design-system/ @KhudaDad414 @Amzani @princerajpoot20
+packages/ui/ @KhudaDad414 @Amzani @princerajpoot20

apps/studio/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @asyncapi/studio
 
+## 0.20.0
+
+### Minor Changes
+
+- 5129432: start publishing studio.
+
 ## 0.19.1
 
 ### Patch Changes

apps/studio/package.json

@@ -1,7 +1,6 @@
 {
   "name": "@asyncapi/studio",
-  "version": "0.19.1",
-  "private": true,
+  "version": "0.20.0",
   "description": "One place that allows you to develop an AsyncAPI document, validate it, convert it to the latest version, preview the documentation and visualize the events flow.",
   "license": "Apache-2.0",
   "bugs": {
@@ -23,13 +22,13 @@
     "./LICENSE"
   ],
   "dependencies": {
-    "@asyncapi/avro-schema-parser": "^3.0.9",
-    "@asyncapi/converter": "^1.4.7",
-    "@asyncapi/openapi-schema-parser": "^3.0.4",
-    "@asyncapi/parser": "^3.0.2",
-    "@asyncapi/protobuf-schema-parser": "^3.0.6",
+    "@asyncapi/avro-schema-parser": "^3.0.15",
+    "@asyncapi/converter": "^1.4.12",
+    "@asyncapi/openapi-schema-parser": "^3.0.15",
+    "@asyncapi/parser": "^3.0.7",
+    "@asyncapi/protobuf-schema-parser": "^3.2.4",
     "@asyncapi/react-component": "^1.2.2",
-    "@asyncapi/specs": "^6.2.0",
+    "@asyncapi/specs": "^6.5.0",
     "@ebay/nice-modal-react": "^1.2.10",
     "@headlessui/react": "^1.7.4",
     "@hookstate/core": "^4.0.0-rc21",
@@ -76,8 +75,8 @@
   },
   "devDependencies": {
     "@asyncapi/dotnet-nats-template": "^0.12.1",
-    "@asyncapi/go-watermill-template": "^0.2.52",
-    "@asyncapi/html-template": "^2.0.0",
+    "@asyncapi/go-watermill-template": "^0.2.67",
+    "@asyncapi/html-template": "^2.1.7",
     "@asyncapi/java-spring-cloud-stream-template": "^0.13.4",
     "@asyncapi/java-spring-template": "^1.5.1",
     "@asyncapi/java-template": "^0.2.1",

apps/studio/src/components/Modals/ConfirmModal.tsx

@@ -7,11 +7,13 @@ import type { ReactNode, FunctionComponent, PropsWithChildren } from 'react';
 interface ConfirmModalProps {
   title: ReactNode;
   description?: ReactNode;
+  warning?: ReactNode;
+  link?: string;
   confirmText?: ReactNode;
   cancelText?: ReactNode;
   confirmDisabled?: boolean;
   cancelDisabled?: boolean;
-  containerClassName? : string;
+  containerClassName?: string;
   closeAfterSumbit?: boolean;
   onSubmit?: () => void;
   onCancel?: () => void;
@@ -20,6 +22,8 @@ interface ConfirmModalProps {
 export const ConfirmModal: FunctionComponent<PropsWithChildren<ConfirmModalProps>> = ({
   title,
   description,
+  warning,
+  link,
   confirmText = 'Save',
   cancelText = 'Cancel',
   confirmDisabled = true,
@@ -103,16 +107,23 @@ export const ConfirmModal: FunctionComponent<PropsWithChildren<ConfirmModalProps
                     {description && (
                       <p className="text-gray-500 text-xs">{description}</p>
                     )}
+                    {warning && (
+                      <a
+                        href={link}
+                        className='text-red-500 text-xs underline'
+                        target="_blank"
+                        rel="noreferrer"
+                      >
+                        {warning}
+                      </a>
+                    )}
                     <div className="my-8 space-y-4">{children}</div>
                   </div>
                 </div>
                 <div className={`mt-5 sm:mt-6 sm:grid sm:gap-3 sm:grid-flow-row-dense ${onSubmit ? 'sm:grid-cols-2' : ''}`}>
                   {onSubmit && (
                     <button
-                      type="button"
-                      className={`w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-pink-600 text-base font-medium text-white hover:bg-pink-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 sm:col-start-2 sm:text-sm ${
-                        confirmDisabled ? 'opacity-10' : 'opacity-100'
-                      }`}
+                      type="button" className={`w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-pink-600 text-base font-medium text-white hover:bg-pink-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 sm:col-start-2 sm:text-sm ${confirmDisabled ? 'opacity-10' : 'opacity-100'}`}
                       disabled={confirmDisabled}
                       onClick={handleOnSubmit}
                     >

apps/studio/src/components/Modals/ConfirmNewFileModal.tsx

@@ -0,0 +1,31 @@
+import { create } from '@ebay/nice-modal-react';
+import { NewFileModal } from './NewFileModal';
+import { ConfirmModal } from './ConfirmModal';
+import { show as showModal } from '@ebay/nice-modal-react';
+
+export const ConfirmNewFileModal = create(() => {
+  const onConfirm = () => {
+    showModal(NewFileModal)
+  };
+
+  return (
+    <ConfirmModal
+      containerClassName="sm:max-w-6xl"
+      title="Confirm New File"
+      confirmText="Create New File"
+      confirmDisabled={false}
+      onSubmit={onConfirm}
+    >
+      <div className="flex content-center justify-center flex-col">
+        <div className="w-full  overflow-auto">
+          <div>
+                        Would you like to create a new file?
+            <p>
+              <b className='text-pink-500'>All the existing changes will be lost and overwritten.</b>
+            </p>
+          </div>
+        </div>
+      </div>
+    </ConfirmModal>
+  );
+});

apps/studio/src/components/Modals/Generator/GeneratorModal.tsx

@@ -8,17 +8,48 @@ import { TemplateParameters, TemplateParametersHandle } from './TemplateParamete
 import { useServices } from '../../../services';
 import { ServerAPIProblem } from '../../../services/server-api.service';
 
-import { filesState } from '../../../state';
+import { filesState, useDocumentsState } from '../../../state';
 
 import templates from './template-parameters.json';
 
+const unsupportedGenerators = [
+  '@asyncapi/dotnet-nats-template',
+  '@asyncapi/ts-nats-template',
+  '@asyncapi/python-paho-template',
+  '@asyncapi/nodejs-ws-template',
+  '@asyncapi/java-spring-cloud-stream-template',
+  '@asyncapi/go-watermill-template',
+  '@asyncapi/java-spring-template',
+  '@asyncapi/nodejs-template',
+  '@asyncapi/java-template',
+  '@asyncapi/php-template'
+];
+
+const renderOptions = (actualVersion: string) => {
+  return Object.keys(templates).map(templateItem => {
+    const isSupported = actualVersion === '3.0.0' && !unsupportedGenerators.includes(templateItem);
+    const disableOption = actualVersion === '3.0.0' ? !isSupported : false;
+    return (
+      <option
+        key={templateItem}
+        value={templateItem}
+        disabled={disableOption}
+      >
+        {(templates as Record<string, any>)[String(templateItem)]?.title}
+      </option>
+    );
+  });
+};
+
 export const GeneratorModal = create(() => {
   const modal = useModal();
   const [template, setTemplate] = useState('');
   const { serverAPISvc } = useServices();
   const [problem, setProblem] = useState<ServerAPIProblem & { validationErrors: any[] } | null>(null);
   const [confirmDisabled, setConfirmDisabled] = useState(true);
   const templateParamsRef = useRef<TemplateParametersHandle>(null);
+  const document = useDocumentsState(state => state.documents['asyncapi']?.document);
+  const actualVersion = document?.version() || '';
 
   useEffect(() => {
     const required = template ? (templates as Record<string, any>)[String(template)].schema.required : [];
@@ -76,6 +107,8 @@ export const GeneratorModal = create(() => {
   return (
     <ConfirmModal
       title="Generate code/docs based on your AsyncAPI Document"
+      warning={actualVersion === '3.0.0' && 'Not all generators currently offer support for AsyncAPI V3.'}
+      link='https://github.com/asyncapi/studio/issues/980'
       confirmText="Generate"
       confirmDisabled={confirmDisabled}
       onSubmit={onSubmit}
@@ -99,20 +132,16 @@ export const GeneratorModal = create(() => {
             value={template}
           >
             <option value="">Please Select</option>
-            {Object.keys(templates).map(templateItem => (
-              <option key={templateItem} value={templateItem}>
-                {(templates as Record<string, any>)[String(templateItem)]?.title}
-              </option>
-            ))}
+            {renderOptions(actualVersion)}
           </select>
         </div>
         {template && (
           <div className='text-gray-400 text-xs mt-2 text-right'>
             <p>
-              <a 
-                target="_blank" 
+              <a
+                target="_blank"
                 href={`https://github.com/asyncapi/${template.replace('@asyncapi/', '')}`}
-                className="underline text-pink-500" 
+                className="underline text-pink-500"
                 rel="noreferrer"
               >
                 Link to the Github Repository of selected generation &rarr;
@@ -121,11 +150,11 @@ export const GeneratorModal = create(() => {
           </div>
         )}
         <div className="flex content-center justify-center">
-          <TemplateParameters 
+          <TemplateParameters
             ref={templateParamsRef}
-            templateName={template} 
-            template={template ? (templates as Record<string, any>)[String(template)]?.schema : {}} 
-            supportedProtocols={template ? (templates as Record<string, any>)[String(template)]?.supportedProtocols : []} 
+            templateName={template}
+            template={template ? (templates as Record<string, any>)[String(template)]?.schema : {}}
+            supportedProtocols={template ? (templates as Record<string, any>)[String(template)]?.supportedProtocols : []}
             setConfirmDisabled={setConfirmDisabled}
           />
         </div>
@@ -152,9 +181,9 @@ export const GeneratorModal = create(() => {
                 {problem.title}
               </div>
             </div>
-            {problem.validationErrors && 
+            {problem.validationErrors &&
               problem.validationErrors.length &&
-              problem.validationErrors.filter(error => error.message).length 
+              problem.validationErrors.filter(error => error.message).length
               ? (
                 <ul className='text-xs mt-2 list-disc pl-7'>
                   {problem.validationErrors.map(error => (

apps/studio/src/components/Modals/index.tsx

@@ -8,3 +8,4 @@ export * from './ImportBase64Modal';
 export * from './ImportURLModal';
 export * from './NewFileModal';
 export * from './RedirectedModal';
+export * from './ConfirmNewFileModal';

apps/studio/src/components/Navigation.tsx

@@ -252,6 +252,7 @@ export const Navigation: React.FunctionComponent<NavigationProps> = ({
   className = '',
 }) => {
   const [hash, setHash] = useState(window.location.hash);
+  const [loading, setloading] = useState(false);
 
   const { navigationSvc } = useServices();
   const rawSpec = useFilesState(state => state.files['asyncapi']?.content);
@@ -269,11 +270,26 @@ export const Navigation: React.FunctionComponent<NavigationProps> = ({
       window.removeEventListener('hashchange', fn);
     };
   }, []);
+
+  useEffect(() => {
+    if (!document) {
+      setloading(true);
+      const timer = setTimeout(() => {
+        setloading(false);
+      }, 1000);
+      return () => clearTimeout(timer);
+    }
+  },[document])
 
   if (!rawSpec || !document) {
     return (
-      <div className="flex overflow-hidden bg-gray-800 h-full justify-center items-center text-center text-white text-md px-6">
-        Empty or invalid document. Please fix errors/define AsyncAPI document.
+      <div className="flex flex-1 overflow-hidden h-full justify-center items-center text-2xl mx-auto px-6 text-center" style={{ backgroundColor: 'black' }}>
+        {loading ?(
+          <div className="rotating-wheel"></div>
+        ) : (
+          <p style={{ color: 'white' }}>Empty or invalid document. Please fix errors/define AsyncAPI document.</p>
+        )
+        }
       </div>
     );
   }
@@ -334,4 +350,4 @@ export const Navigation: React.FunctionComponent<NavigationProps> = ({
       </ul>
     </div>
   );
-};
+};

apps/studio/src/components/Sidebar.tsx

@@ -2,7 +2,7 @@ import { VscListSelection, VscCode, VscOpenPreview, VscGraph, VscNewFile, VscSet
 import { show as showModal } from '@ebay/nice-modal-react';
 
 import { Tooltip } from './common';
-import { SettingsModal, NewFileModal } from './Modals';
+import { SettingsModal, ConfirmNewFileModal } from './Modals';
 
 import { usePanelsState, panelsState, useDocumentsState } from '../state';
 
@@ -105,7 +105,7 @@ export const Sidebar: FunctionComponent<SidebarProps> = () => {
       name: 'newFile',
       title: 'New file',
       isActive: false,
-      onClick: () => showModal(NewFileModal),
+      onClick: () => showModal(ConfirmNewFileModal),
       icon: <VscNewFile className="w-5 h-5" />,
       tooltip: 'New file',
       enabled: true

apps/studio/src/components/Template/HTMLWrapper.tsx

@@ -12,6 +12,7 @@ export const HTMLWrapper: React.FunctionComponent<HTMLWrapperProps> = () => {
   const [parsedSpec, setParsedSpec] = useState<AsyncAPIDocumentInterface | null>(null);
   const { navigationSvc } = useServices();
   const document = useDocumentsState(state => state.documents['asyncapi']?.document) || null;
+  const [loading, setloading] = useState(false);
 
   const autoRendering = useSettingsState(state => state.templates.autoRendering);
   const templateRerender = useOtherState(state => state.templateRerender);
@@ -33,10 +34,24 @@ export const HTMLWrapper: React.FunctionComponent<HTMLWrapperProps> = () => {
     }
   }, [templateRerender]); // eslint-disable-line
 
+  useEffect(() => {
+    if (!document) {
+      setloading(true);
+      const timer = setTimeout(() => {
+        setloading(false);
+      }, 1000);
+      return () => clearTimeout(timer);
+    }
+  },[document])
   if (!document) {
     return (
       <div className="flex flex-1 overflow-hidden h-full justify-center items-center text-2xl mx-auto px-6 text-center">
-        <p>Empty or invalid document. Please fix errors/define AsyncAPI document.</p>
+        {loading ?(
+          <div className="rotating-wheel"></div>
+        ) : (
+          <p>Empty or invalid document. Please fix errors/define AsyncAPI document.</p>
+        )
+        }
       </div>
     );
   }