fix: Disable unsupported generators for AsyncAPI V3 (#979) (#982)

* fix: Disable unsupported generators for AsyncAPI V3 (#979) * Refactored GeneratorModal for AsyncAPI V3 support and removed [TRACKING_LINK] * fix lint errors * fix warning --------- Co-authored-by: samz <samir.amzani@gmail.com>
asyncapi · Mar 5, 2024 · cacd18c · cacd18c
1 parent cea3fa8
commit cacd18c
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 20 deletions.
diff --git a/apps/studio/src/components/Modals/ConfirmModal.tsx b/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}
                     >

diff --git a/apps/studio/src/components/Modals/Generator/GeneratorModal.tsx b/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 => (