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

kalpesh-d · Feb 27, 2024 · a561414 · a561414
1 parent dab274d
commit a561414
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 10 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,25 @@ export const ConfirmModal: FunctionComponent<PropsWithChildren<ConfirmModalProps
                     {description && (
                       <p className="text-gray-500 text-xs">{description}</p>
                     )}
+                    {warning && (
+                      <p className="text-red-500 text-xs">{warning} {' '}
+                        <a
+                          href={link}
+                          target="_blank"
+                          rel="noreferrer"
+                        >
+                          [TRACKING_LINK]
+                        </a></p>
+                    )}
                     <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}
                     >

diff --git a/apps/studio/src/components/Modals/Generator/GeneratorModal.tsx b/apps/studio/src/components/Modals/Generator/GeneratorModal.tsx
@@ -12,6 +12,19 @@ import { filesState } 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('');
@@ -76,6 +89,8 @@ export const GeneratorModal = create(() => {
   return (
     <ConfirmModal
       title="Generate code/docs based on your AsyncAPI Document"
+      warning="Not all generators currently offer support for AsyncAPI V3."
+      link='https://github.com/asyncapi/studio/issues/980'
       confirmText="Generate"
       confirmDisabled={confirmDisabled}
       onSubmit={onSubmit}
@@ -99,11 +114,21 @@ 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>
-            ))}
+            {Object.keys(templates).map(templateItem => {
+              if (!unsupportedGenerators.includes(templateItem)) {
+                return (
+                  <option key={templateItem} value={templateItem}>
+                    {(templates as Record<string, any>)[String(templateItem)]?.title}
+                  </option>
+                );
+              } else {
+                return (
+                  <option key={templateItem} value={templateItem} disabled>
+                    {(templates as Record<string, any>)[String(templateItem)]?.title}
+                  </option>
+                );
+              }
+            })}
           </select>
         </div>
         {template && (
@@ -154,7 +179,7 @@ export const GeneratorModal = create(() => {
             </div>
             {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 => (