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

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

@@ -7,11 +7,13 @@
 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 @@
 export const ConfirmModal: FunctionComponent<PropsWithChildren<ConfirmModalProps>> = ({
   title,
   description,
+  warning,
+  link,
   confirmText = 'Save',
   cancelText = 'Cancel',
   confirmDisabled = true,
@@ -103,16 +107,25 @@
                     {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'
-                      }`}
+                      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/Generator/GeneratorModal.tsx

@@ -8,17 +8,32 @@
 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'
+];
+
 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 : [];
@@ -73,9 +88,19 @@
     }, 200);
   };
 
+  const renderTemplateOption = (templateItem: string, disable: boolean = false) => {
+    return (
+      <option key={templateItem} value={templateItem} disabled={disable}>
+        {(templates as Record<string, any>)[String(templateItem)]?.title}
+      </option>
+    );
+  };
+
   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 +124,25 @@
             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>
-            ))}
+            {Object.keys(templates).map(templateItem => {
+              if (actualVersion === '3.0.0') {
+                if (!unsupportedGenerators.includes(templateItem)) {
+                  return renderTemplateOption(templateItem); // Render the option without disabling it if it's supported
+                }
+                else return renderTemplateOption(templateItem, true); // Disable it if it's unsupported
+              } else {
+                return renderTemplateOption(templateItem); // If it's not version 3.0.0 render the option.
+              }
+            })}
           </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 +151,11 @@
           </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 +182,9 @@
                 {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 => (