@aws-amplify/amplify-util-uibuilder 1.5.0-studio-forms.0 → 1.6.0-beta.0

package/src/__tests__/cloneComponentsFromEnv.test.ts

@@ -6,7 +6,7 @@ const extractArgsDependencyMock = extractArgsDependency as any;
 const awsMock = aws as any;
 
 jest.mock('../commands/utils/featureFlags', () => ({
-  getTransformerVersion: jest.fn().mockImplementation(() => 2)
+  getTransformerVersion: jest.fn().mockReturnValue(2),
 }));
 jest.mock('../commands/utils/extractArgs');
 jest.mock('amplify-cli-core');
@@ -21,7 +21,7 @@ const mockedComponentExport = jest.fn((envName: string) => {
     entities: [{}],
   };
 });
-const mockedComponentCreate = jest.fn(() => ({ entity: {} }));
+const mockedComponentCreate = jest.fn().mockReturnValue({ entity: {} });
 
 describe('can clone components to new environment', () => {
   let context: any;
@@ -37,26 +37,26 @@ describe('can clone components to new environment', () => {
         },
       },
     };
-    extractArgsDependencyMock.extractArgs = jest.fn().mockImplementation(() => ({
+    extractArgsDependencyMock.extractArgs = jest.fn().mockReturnValue({
       sourceEnvName: 'sourceEnvName',
       newEnvName: 'newEnvName',
       appId: 'appId',
       environmentName: 'environmentName',
-    }));
-    awsMock.AmplifyUIBuilder = jest.fn(() => ({
+    });
+    awsMock.AmplifyUIBuilder = jest.fn().mockReturnValue({
       exportComponents: jest.fn(({ environmentName }) => ({
         promise: () => mockedComponentExport(environmentName),
       })),
-      createComponent: jest.fn(() => ({ promise: () => mockedComponentCreate() })),
-      getMetadata: jest.fn(() => ({
-        promise: jest.fn(() => ({
+      createComponent: jest.fn().mockReturnValue({ promise: () => mockedComponentCreate() }),
+      getMetadata: jest.fn().mockReturnValue({
+        promise: jest.fn().mockReturnValue({
           features: {
             autoGenerateForms: 'true',
             autoGenerateViews: 'true',
           },
-        })),
-      })),
-    }));
+        }),
+      }),
+    });
   });
 
   it('clones components to a new env', async () => {

package/src/__tests__/createUiBuilderComponent.test.ts

@@ -1,3 +1,4 @@
+/* eslint-disable spellcheck/spell-checker */
 import * as codegen from '@aws-amplify/codegen-ui'; // eslint-disable-line import/no-extraneous-dependencies
 import {
   generateAmplifyUiBuilderIndexFile,
@@ -44,9 +45,9 @@ describe('can create a ui builder component', () => {
       variants: [],
     };
     const renderSchemaToTemplateMock = jest.fn();
-    codegenMock.StudioTemplateRendererManager = jest.fn().mockImplementation(() => ({
+    codegenMock.StudioTemplateRendererManager = jest.fn().mockReturnValue({
       renderSchemaToTemplate: renderSchemaToTemplateMock,
-    }));
+    });
   });
   it('calls the renderManager', () => {
     createUiBuilderComponent(context, schema);
@@ -56,6 +57,10 @@ describe('can create a ui builder component', () => {
     createUiBuilderTheme(context, schema);
     expect(new codegenMock.StudioTemplateRendererManager().renderSchemaToTemplate).toBeCalled();
   });
+  it('calls the renderManager for default theme', () => {
+    createUiBuilderTheme(context, schema, { renderDefaultTheme: true });
+    expect(new codegenMock.StudioTemplateRendererManager().renderSchemaToTemplate).toBeCalled();
+  });
   it('calls the renderManager for forms', () => {
     createUiBuilderForm(context, schema);
     expect(new codegenMock.StudioTemplateRendererManager().renderSchemaToTemplate).toBeCalled();

package/src/__tests__/generateComponents.test.ts

@@ -1,5 +1,4 @@
 import aws from 'aws-sdk'; // eslint-disable-line import/no-extraneous-dependencies
-import { CloudformationProviderFacade } from 'amplify-cli-core';
 import * as utils from '../commands/utils';
 import { run } from '../commands/generateComponents';
 
@@ -8,13 +7,10 @@ jest.mock('amplify-cli-core');
 const awsMock = aws as any;
 const utilsMock = utils as any;
 
-utilsMock.shouldRenderComponents = jest.fn().mockImplementation(() => true);
-utilsMock.notifyMissingPackages = jest.fn().mockImplementation(() => true);
-CloudformationProviderFacade.isAmplifyAdminApp = jest.fn().mockImplementation(() => ({
-  isAdminApp: true,
-}));
+utilsMock.shouldRenderComponents = jest.fn().mockReturnValue(true);
+utilsMock.notifyMissingPackages = jest.fn().mockReturnValue(true);
 jest.mock('../commands/utils/featureFlags', () => ({
-  getTransformerVersion: jest.fn().mockImplementation(() => 2)
+  getTransformerVersion: jest.fn().mockImplementation(() => 2),
 }));
 
 describe('can generate components', () => {
@@ -43,37 +39,37 @@ describe('can generate components', () => {
         },
       ],
     };
-    mockedExport = jest.fn(() => ({
+    mockedExport = jest.fn().mockReturnValue({
       entities: schemas.entities,
-    }));
-    awsMock.AmplifyUIBuilder = jest.fn(() => ({
-      exportComponents: jest.fn(() => ({
+    });
+    awsMock.AmplifyUIBuilder = jest.fn().mockReturnValue({
+      exportComponents: jest.fn().mockReturnValue({
         promise: () => mockedExport(),
-      })),
-      exportThemes: jest.fn(() => ({
+      }),
+      exportThemes: jest.fn().mockReturnValue({
         promise: () => mockedExport(),
-      })),
-      exportForms: jest.fn(() => ({
+      }),
+      exportForms: jest.fn().mockReturnValue({
         promise: () => mockedExport(),
-      })),
-      exportViews: jest.fn(() => ({
+      }),
+      exportViews: jest.fn().mockReturnValue({
         promise: () => mockedExport(),
-      })),
-      getMetadata: jest.fn(() => ({
-        promise: jest.fn(() => ({
+      }),
+      getMetadata: jest.fn().mockReturnValue({
+        promise: jest.fn().mockReturnValue({
           features: {
             autoGenerateForms: 'true',
             autoGenerateViews: 'true',
           },
-        })),
-      })),
-    }));
-    utilsMock.generateUiBuilderComponents = jest.fn().mockImplementation(() => schemas.entities);
-    utilsMock.generateUiBuilderThemes = jest.fn().mockImplementation(() => schemas.entities);
-    utilsMock.generateUiBuilderForms = jest.fn().mockImplementation(() => schemas.entities);
-    utilsMock.getAmplifyDataSchema = jest.fn().mockImplementation(() => undefined);
-    utilsMock.generateAmplifyUiBuilderIndexFile = jest.fn().mockImplementation(() => true);
-    utilsMock.generateAmplifyUiBuilderUtilFile = jest.fn().mockImplementation(() => true);
+        }),
+      }),
+    });
+    utilsMock.generateUiBuilderComponents = jest.fn().mockReturnValue(schemas.entities);
+    utilsMock.generateUiBuilderThemes = jest.fn().mockReturnValue(schemas.entities);
+    utilsMock.generateUiBuilderForms = jest.fn().mockReturnValue(schemas.entities);
+    utilsMock.getAmplifyDataSchema = jest.fn().mockReturnValue(undefined);
+    utilsMock.generateAmplifyUiBuilderIndexFile = jest.fn().mockReturnValue(true);
+    utilsMock.generateAmplifyUiBuilderUtilFile = jest.fn().mockReturnValue(true);
   });
 
   it('runs generateComponents', async () => {
@@ -83,10 +79,9 @@ describe('can generate components', () => {
     expect(utilsMock.generateUiBuilderThemes).toBeCalledTimes(1);
     expect(utilsMock.generateUiBuilderForms).toBeCalledTimes(1);
   });
+
   it('does not run generateComponents if not Amplify Admin app', async () => {
-    CloudformationProviderFacade.isAmplifyAdminApp = jest.fn().mockImplementationOnce(() => ({
-      isAdminApp: false,
-    }));
+    utilsMock.shouldRenderComponents = jest.fn().mockReturnValue(false);
     await run(context);
     expect(mockedExport).toBeCalledTimes(0);
     expect(utilsMock.generateUiBuilderComponents).toBeCalledTimes(0);

package/src/__tests__/getAmplifyDataSchema.test.ts

@@ -81,16 +81,16 @@ describe('should sync amplify backend models', () => {
 
     mockedFeatureFlags.getNumber.mockReturnValue(2);
     getMockedSchema.mockClear();
-  });
-
-  it('should getAmplifyBackendModels', async () => {
-    awsMock.AmplifyBackend = jest.fn(() => ({
-      getBackendAPIModels: jest.fn(() => ({
+    awsMock.AmplifyBackend = jest.fn().mockReturnValue({
+      getBackendAPIModels: jest.fn().mockReturnValue({
         promise: () => ({
           Models: getMockedSchema(),
         }),
-      })),
-    }));
+      }),
+    });
+  });
+
+  it('should getAmplifyBackendModels', async () => {
     const client = await AmplifyStudioClient.setClientInfo(context);
     const dataSchema = await getAmplifyDataSchema(client);
     expect(getMockedSchema).toBeCalled();
@@ -100,14 +100,6 @@ describe('should sync amplify backend models', () => {
 
   it('should not getAmplifyBackendModels and return undefined if graphQLTransformer version not supported', async () => {
     mockedFeatureFlags.getNumber.mockReturnValue(1);
-
-    awsMock.AmplifyBackend = jest.fn(() => ({
-      getBackendAPIModels: jest.fn(() => ({
-        promise: () => ({
-          Models: getMockedSchema(),
-        }),
-      })),
-    }));
     const client = await AmplifyStudioClient.setClientInfo(context);
     const dataSchema = await getAmplifyDataSchema(client);
     expect(getMockedSchema).not.toBeCalled();
@@ -115,13 +107,13 @@ describe('should sync amplify backend models', () => {
   });
 
   it('should handle Models not found', async () => {
-    awsMock.AmplifyBackend = jest.fn(() => ({
-      getBackendAPIModels: jest.fn(() => ({
-        promise: jest.fn(() => ({
+    awsMock.AmplifyBackend = jest.fn().mockReturnValue({
+      getBackendAPIModels: jest.fn().mockReturnValue({
+        promise: () => ({
           Models: undefined,
-        })),
-      })),
-    }));
+        }),
+      }),
+    });
     const client = await AmplifyStudioClient.setClientInfo(context);
     const dataSchema = await getAmplifyDataSchema(client);
     expect(dataSchema).toBeUndefined();
@@ -129,11 +121,11 @@ describe('should sync amplify backend models', () => {
   });
 
   it('should handle network error', async () => {
-    awsMock.AmplifyBackend = jest.fn(() => ({
-      getBackendAPIModels: jest.fn(() => ({
+    awsMock.AmplifyBackend = jest.fn().mockReturnValue({
+      getBackendAPIModels: jest.fn().mockReturnValue({
         promise: jest.fn().mockRejectedValue(new Error('Network Error')),
-      })),
-    }));
+      }),
+    });
     const client = await AmplifyStudioClient.setClientInfo(context);
     const dataSchema = await getAmplifyDataSchema(client);
     expect(dataSchema).toBeUndefined();

package/src/__tests__/shouldRenderComponents.test.ts

@@ -1,13 +1,60 @@
-import { $TSContext } from 'amplify-cli-core';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import {
+  $TSContext, AmplifyCategories, AmplifySupportedService, CloudformationProviderFacade,
+} from 'amplify-cli-core';
+import aws from 'aws-sdk'; // eslint-disable-line import/no-extraneous-dependencies
 import { shouldRenderComponents } from '../commands/utils/shouldRenderComponents';
 
+const awsMock = aws as any;
+
+jest.mock('amplify-cli-core', () => ({
+  ...jest.requireActual('amplify-cli-core'),
+  stateManager: {
+    getMeta: jest.fn(() => ({
+      [AmplifyCategories.API]: {
+        MyResourceName: {
+          service: AmplifySupportedService.APPSYNC,
+        },
+      },
+    })),
+    // eslint-disable-next-line spellcheck/spell-checker
+    getCLIJSON: jest.fn().mockReturnValue({ features: { graphqltransformer: { transformerversion: 2 } } }),
+    setCLIJSON: jest.fn(),
+  },
+  FeatureFlags: {
+    getBoolean: () => true,
+    getNumber: jest.fn().mockReturnValue(2),
+    reloadValues: jest.fn(),
+  },
+}));
+CloudformationProviderFacade.isAmplifyAdminApp = jest.fn().mockReturnValue({
+  isAdminApp: true,
+});
+
 describe('should render components', () => {
   let context: $TSContext | any;
-  beforeEach(() => {
+
+  beforeAll(async () => {
+    // set metadata response
+    awsMock.AmplifyUIBuilder = jest.fn(() => ({
+      getMetadata: jest.fn(() => ({
+        promise: jest.fn(() => ({
+          features: {
+            autoGenerateForms: 'true',
+            autoGenerateViews: 'true',
+          },
+        })),
+      })),
+    }));
     context = {
+      amplify: {
+        invokePluginMethod: () => ({}),
+      },
       input: {
         options: {
           'no-codegen': false,
+          appId: 'testAppId',
+          envName: 'testEnvName',
         },
       },
       exeInfo: {
@@ -35,12 +82,12 @@ describe('should render components', () => {
     const shouldIt = await shouldRenderComponents(context);
     expect(shouldIt).toBe(false);
   });
-  it("doesn't work if the frontend is not javascript", async () => {
+  it('should return false if frontend is ios', async () => {
     context.exeInfo.projectConfig.frontend = 'ios';
     const shouldIt = await shouldRenderComponents(context);
     expect(shouldIt).toBe(false);
   });
-  it("doesn't work if the frontend is not javascript", async () => {
+  it('should return false if frontend is vue', async () => {
     context.exeInfo.projectConfig.javascript.framework = 'vue';
     const shouldIt = await shouldRenderComponents(context);
     expect(shouldIt).toBe(false);

package/src/__tests__/syncAmplifyUiComponents.test.ts

@@ -1,3 +1,4 @@
+/* eslint-disable spellcheck/spell-checker */
 import { AmplifyCategories, AmplifySupportedService, stateManager } from 'amplify-cli-core'; // eslint-disable-line import/no-extraneous-dependencies
 import aws from 'aws-sdk'; // eslint-disable-line import/no-extraneous-dependencies
 import {
@@ -11,7 +12,6 @@ import {
 import { AmplifyStudioClient } from '../clients';
 import * as createUiBuilderComponentDependency from '../commands/utils/codegenResources';
 import { exampleSchema } from './utils';
-import { GenericDataModel, GenericDataSchema } from '@aws-amplify/codegen-ui';
 
 jest.mock('amplify-cli-core', () => ({
   ...jest.requireActual('amplify-cli-core'),
@@ -21,7 +21,7 @@ jest.mock('amplify-cli-core', () => ({
   },
 }));
 jest.mock('../commands/utils/featureFlags', () => ({
-  getTransformerVersion: jest.fn().mockImplementation(() => 2)
+  getTransformerVersion: jest.fn().mockReturnValue(2),
 }));
 
 const awsMock = aws as any;
@@ -238,6 +238,18 @@ describe('should sync amplify ui builder components', () => {
     const themes = generateUiBuilderThemes(context, [{}, {}]);
     expect(themes.every(theme => theme.resultType === 'FAILURE')).toBeTruthy();
   });
+  it('can generate ui builder default theme when no themes are passed', async () => {
+    createUiBuilderComponentDependencyMock.createUiBuilderTheme = jest.fn().mockImplementation(() => ({}));
+    const themes = generateUiBuilderThemes(context, []);
+    expect(themes.every(theme => theme.resultType === 'SUCCESS')).toBeTruthy();
+  });
+  it('can handle failed generation generate ui builder default theme when no themes are passed', async () => {
+    createUiBuilderComponentDependencyMock.createUiBuilderTheme = jest.fn().mockImplementation(() => {
+      throw new Error('ahh!');
+    });
+    const themes = generateUiBuilderThemes(context, []);
+    expect(themes.every(theme => theme.resultType === 'FAILURE')).toBeTruthy();
+  });
   it('can generate ui builder forms', async () => {
     createUiBuilderComponentDependencyMock.createUiBuilderForm = jest.fn().mockImplementation(() => ({}));
     const forms = generateUiBuilderForms(context, [{}, {}]);
@@ -259,8 +271,11 @@ describe('should sync amplify ui builder components', () => {
   });
 
   it('should not autogen forms for join tables or unsupported models', async () => {
-    expect(Object.keys(exampleSchema.models)).toStrictEqual(['Author', 'JoinTable', 'EmptyModel' ])
-    createUiBuilderComponentDependencyMock.createUiBuilderForm = jest.fn().mockImplementation((context, schema, dataSchema) => ({name: schema.dataType.dataTypeName}));
+    expect(Object.keys(exampleSchema.models)).toStrictEqual(['Author', 'JoinTable', 'EmptyModel']);
+    createUiBuilderComponentDependencyMock.createUiBuilderForm = jest.fn().mockImplementation(
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      (_ctx, schema, _dataSchema) => ({ name: schema.dataType.dataTypeName }),
+    );
     const forms = generateUiBuilderForms(context, [], exampleSchema, true);
     expect(forms.every(form => form.resultType === 'SUCCESS')).toBeTruthy();
     // only create & update form for author model

package/src/clients/amplify-studio-client.ts

@@ -57,7 +57,23 @@ export default class AmplifyStudioClient {
   #appId: string;
   #envName: string;
   metadata: StudioMetadata;
-  isSupportedGraphQL = false;
+  isGraphQLSupported = false;
+
+  /**
+   * static function meant to check if given appId is studio enabled
+   */
+  static isAmplifyApp = async (context: $TSContext, appId: string): Promise<boolean> => {
+    try {
+      const { isAdminApp } = await CloudformationProviderFacade.isAmplifyAdminApp(context, appId);
+      return isAdminApp;
+    } catch (err) {
+      // return false is admin app failed check
+      // this means we wont run codegen-ui
+      printer.debug(`Failed admin app check: ${err.message}`);
+      return false;
+    }
+  }
+
   /**
    * Used to configure the AWS Amplify clients.
    */
@@ -72,11 +88,11 @@ export default class AmplifyStudioClient {
 
     const client = new AmplifyStudioClient(awsConfigInfo, resolvedAppId, resolvedEnvName);
 
-    if ((await getTransformerVersion(context)) === 2) {
+    if ((await getTransformerVersion()) === 2) {
       await client.loadMetadata();
-      client.isSupportedGraphQL = true;
+      client.isGraphQLSupported = true;
     } else {
-      client.isSupportedGraphQL = false;
+      client.isGraphQLSupported = false;
     }
 
     return client;
@@ -113,9 +129,8 @@ export default class AmplifyStudioClient {
         autoGenerateForms: response.features?.autoGenerateForms === 'true',
         autoGenerateViews: response.features?.autoGenerateViews === 'true',
       };
-    } catch (e) {
-      printer.debug(e.toString());
-      throw e;
+    } catch (err) {
+      throw new Error(`Failed to load metadata: ${err.message}`);
     }
   };
 
@@ -141,9 +156,8 @@ export default class AmplifyStudioClient {
       } while (nextToken);
       printer.debug(JSON.stringify(uiBuilderComponents, null, 2));
       return { entities: uiBuilderComponents };
-    } catch (e) {
-      printer.debug(e);
-      throw e;
+    } catch (err) {
+      throw new Error(`Failed to list components: ${err.message}`);
     }
   };
 
@@ -170,9 +184,8 @@ export default class AmplifyStudioClient {
       } while (nextToken);
       printer.debug(JSON.stringify(uiBuilderThemes, null, 2));
       return { entities: uiBuilderThemes };
-    } catch (e) {
-      printer.debug(e);
-      throw e;
+    } catch (err) {
+      throw new Error(`Failed to list themes: ${err.message}`);
     }
   };
 
@@ -195,9 +208,8 @@ export default class AmplifyStudioClient {
       } while (nextToken);
       printer.debug(JSON.stringify(uibuilderForms, null, 2));
       return { entities: uibuilderForms };
-    } catch (e) {
-      printer.debug(e);
-      throw e;
+    } catch (err) {
+      throw new Error(`Failed to list forms: ${err.message}`);
     }
   };
 
@@ -214,8 +226,7 @@ export default class AmplifyStudioClient {
         .promise();
       return response.entity;
     } catch (err) {
-      printer.debug(err.toString());
-      throw err;
+      throw new Error(`Failed to create component: ${err.message}`);
     }
   };
 
@@ -231,14 +242,8 @@ export default class AmplifyStudioClient {
         })
         .promise();
       return Models;
-    } catch (e) {
-      printer.debug(e);
-      throw new Error(`Models not found in AmplifyBackend:GetBackendAPIModels response: ${e.message}`);
+    } catch (err) {
+      throw new Error(`Models not found in AmplifyBackend:GetBackendAPIModels response: ${err.message}`);
     }
   };
-
- isAmplifyApp = async (context: $TSContext): Promise<boolean> => {
-   const { isAdminApp } = await CloudformationProviderFacade.isAmplifyAdminApp(context, this.#appId);
-   return isAdminApp;
- }
 }

package/src/commands/generateComponents.ts

@@ -25,9 +25,6 @@ export const run = async (context: $TSContext): Promise<void> => {
   const spinner = ora('');
   try {
     const studioClient = await AmplifyStudioClient.setClientInfo(context);
-    if (!(await studioClient.isAmplifyApp(context))) {
-      return;
-    }
     const [componentSchemas, themeSchemas, formSchemas, dataSchema] = await Promise.all([
       studioClient.listComponents(),
       studioClient.listThemes(),
@@ -35,7 +32,7 @@ export const run = async (context: $TSContext): Promise<void> => {
       getAmplifyDataSchema(studioClient),
     ]);
 
-    const nothingWouldAutogen = !dataSchema || !studioClient.metadata.autoGenerateForms || !studioClient.isSupportedGraphQL;
+    const nothingWouldAutogen = !dataSchema || !studioClient.metadata.autoGenerateForms || !studioClient.isGraphQLSupported;
 
     if (nothingWouldAutogen && [componentSchemas, themeSchemas, formSchemas].every(group => !group.entities.length)) {
       printer.debug('Skipping UI component generation since none are found.');
@@ -47,7 +44,7 @@ export const run = async (context: $TSContext): Promise<void> => {
       component: generateUiBuilderComponents(context, componentSchemas.entities, dataSchema),
       theme: generateUiBuilderThemes(context, themeSchemas.entities),
       form: generateUiBuilderForms(
-        context, formSchemas.entities, dataSchema, studioClient.metadata.autoGenerateForms && studioClient.isSupportedGraphQL,
+        context, formSchemas.entities, dataSchema, studioClient.metadata.autoGenerateForms && studioClient.isGraphQLSupported,
       ),
     };
 

package/src/commands/utils/codegenResources.ts

@@ -23,6 +23,7 @@ import {
   ScriptKind,
   UtilTemplateType,
   ReactUtilsStudioTemplateRenderer,
+  ReactThemeStudioTemplateRendererOptions,
 } from '@aws-amplify/codegen-ui-react';
 import { printer } from 'amplify-prompts';
 import {
@@ -60,10 +61,14 @@ export const createUiBuilderComponent = (context: $TSContext, schema: StudioComp
 /**
  * Writes theme file to the work space
  */
-export const createUiBuilderTheme = (context: $TSContext, schema: StudioTheme): StudioTheme => {
+export const createUiBuilderTheme = (
+  context: $TSContext,
+  schema: StudioTheme,
+  options?: ReactThemeStudioTemplateRendererOptions,
+): StudioTheme => {
   const uiBuilderComponentsPath = getUiBuilderComponentsPath(context);
   const rendererFactory = new StudioTemplateRendererFactory(
-    (component: StudioTheme) => (new ReactThemeStudioTemplateRenderer(component, config) as unknown) as StudioTemplateRenderer<
+    (component: StudioTheme) => (new ReactThemeStudioTemplateRenderer(component, config, options) as unknown) as StudioTemplateRenderer<
         unknown,
         StudioTheme,
         FrameworkOutputManager<unknown>,
@@ -198,7 +203,7 @@ export const generateAmplifyUiBuilderUtilFile = (context: $TSContext, { hasForms
 export const getAmplifyDataSchema = async (
   studioClient: AmplifyStudioClient,
 ): Promise<GenericDataSchema | undefined> => {
-  if (!studioClient.isSupportedGraphQL) {
+  if (!studioClient.isGraphQLSupported) {
     return undefined;
   }
   try {

package/src/commands/utils/featureFlags.ts

@@ -1,7 +1,8 @@
 /* eslint-disable spellcheck/spell-checker */
 import {
-  $TSContext, FeatureFlags, pathManager, stateManager,
+  FeatureFlags, pathManager, stateManager,
 } from 'amplify-cli-core';
+import { printer } from 'amplify-prompts';
 
 // This is copy-pasta from the category api until they can expose the method to plugins
 
@@ -15,13 +16,13 @@ const transformerVersionFF = (): number => FeatureFlags.getNumber('graphQLTransf
  * Inspect feature flags for the project and determine if this particular project should be using graphql v2 or v1.
  * Coerces feature flags into a sane state if they are out of, and throws error on invalid configuration.
  */
-export const getTransformerVersion = async (context: $TSContext): Promise<number> => {
+export const getTransformerVersion = async (): Promise<number> => {
   if (useExperimentalPipelinedTransformerFF() === false) {
     return 1;
   }
 
   if (isLegacyFeatureFlagConfiguration()) {
-    await migrateToTransformerVersionFeatureFlag(context);
+    await migrateToTransformerVersionFeatureFlag();
   }
 
   const transformerVersion = transformerVersionFF();
@@ -40,7 +41,7 @@ const isLegacyFeatureFlagConfiguration = (): boolean => useExperimentalPipelined
 /**
  * Update project feature flags and alert the user if they have a deprecated set of feature flags.
  */
-const migrateToTransformerVersionFeatureFlag = async (context: $TSContext): Promise<void> => {
+const migrateToTransformerVersionFeatureFlag = async (): Promise<void> => {
   const projectPath = pathManager.findProjectRoot() ?? process.cwd();
 
   const config = stateManager.getCLIJSON(projectPath, undefined, {
@@ -53,7 +54,7 @@ const migrateToTransformerVersionFeatureFlag = async (context: $TSContext): Prom
   stateManager.setCLIJSON(projectPath, config);
   await FeatureFlags.reloadValues();
   // eslint-disable-next-line spellcheck/spell-checker
-  context.print.warning(
+  printer.warn(
     `\nThe project is configured with 'transformerVersion': ${transformerVersionFF()}, but 'useExperimentalPipelinedTransformer': ${useExperimentalPipelinedTransformerFF()}. Setting the 'transformerVersion': ${
       config.features.graphqltransformer.transformerversion
     }. 'useExperimentalPipelinedTransformer' is deprecated.`,

package/src/commands/utils/shouldRenderComponents.ts

@@ -1,34 +1,46 @@
+/* eslint-disable prefer-arrow/prefer-arrow-functions */
 import { $TSContext } from 'amplify-cli-core';
 import { printer } from 'amplify-prompts';
-export async function shouldRenderComponents(context: $TSContext) {
+import { AmplifyStudioClient } from '../../clients';
+import { getAppId } from './environmentHelpers';
+
+/**
+ * process to decide if we should render components
+ */
+export const shouldRenderComponents = async (context: $TSContext): Promise<boolean> => {
   if (process.env.FORCE_RENDER) {
     printer.debug('Forcing component render since environment variable flag is set.');
     return true;
   }
   if (context?.input?.options?.['no-codegen']) {
-    printer.debug('Not pulling components because --no-codegen flag is set');
+    printer.debug('Not pulling components because --no-codegen flag is set.');
     return false;
   }
 
   if (!context?.exeInfo?.projectConfig) {
-    printer.debug('Not pulling components because there is no projectConfig set for this project');
+    printer.debug('Not pulling components because there is no projectConfig set for this project.');
     return false;
   }
 
   if (!context.exeInfo.projectConfig.providers.includes('awscloudformation')) {
-    printer.debug('Not pulling components because there is no "awscloudformation" provider');
+    printer.debug('Not pulling components because there is no "awscloudformation" provider.');
     return false;
   }
 
   if (context.exeInfo.projectConfig.frontend !== 'javascript') {
-    printer.debug('Not pulling components because this project is not configured as a javascript frontend');
+    printer.debug('Not pulling components because this project is not configured as a javascript frontend.');
+    return false;
+  }
+
+  if (context.exeInfo.projectConfig.javascript.framework !== 'react') {
+    printer.debug('Not pulling components because this project is not configured with the "react" framework.');
     return false;
   }
 
-  if (context.exeInfo.projectConfig['javascript'].framework !== 'react') {
-    printer.debug('Not pulling components because this project is not configured with the "react" framework');
+  if (!(await AmplifyStudioClient.isAmplifyApp(context, getAppId(context)))) {
+    printer.debug('Not pulling components because this project is not Amplify Studio enabled.');
     return false;
   }
 
   return true;
-}
+};