@aws-amplify/amplify-util-uibuilder 1.9.4 → 1.10.0-rc.0ffe9f92c0.0

package/src/__tests__/generateComponents.test.ts

@@ -3,6 +3,8 @@ import * as utils from '../commands/utils';
 import { run } from '../commands/generateComponents';
 import { isDataStoreEnabled } from '@aws-amplify/amplify-category-api';
 import { getTransformerVersion } from '../commands/utils/featureFlags';
+import { getCodegenConfig } from 'amplify-codegen';
+import { getUiBuilderComponentsPath } from '../commands/utils/getUiBuilderComponentsPath';
 
 jest.mock('../commands/utils');
 jest.mock('@aws-amplify/amplify-cli-core');
@@ -14,11 +16,22 @@ jest.mock('../commands/utils/featureFlags', () => ({
   ...jest.requireActual('../commands/utils/featureFlags'),
   getTransformerVersion: jest.fn(),
 }));
+jest.mock('../commands/utils/getUiBuilderComponentsPath', () => ({
+  ...jest.requireActual('../commands/utils/getUiBuilderComponentsPath'),
+  getUiBuilderComponentsPath: jest.fn(),
+}));
+jest.mock('amplify-codegen', () => ({
+  ...jest.requireActual('amplify-codegen'),
+  getCodegenConfig: jest.fn(),
+}));
+
 const awsMock = aws as any;
 const utilsMock = utils as any;
+const isDataStoreEnabledMocked = isDataStoreEnabled as any;
+const getTransformerVersionMocked = getTransformerVersion as any;
+const getCodegenConfigMocked = getCodegenConfig as any;
+const getUiBuilderComponentsPathMocked = getUiBuilderComponentsPath as any;
 
-const isDataStoreEnabledMocked = jest.mocked(isDataStoreEnabled);
-const getTransformerVersionMocked = jest.mocked(getTransformerVersion);
 utilsMock.shouldRenderComponents = jest.fn().mockReturnValue(true);
 utilsMock.notifyMissingPackages = jest.fn().mockReturnValue(true);
 utilsMock.getAmplifyDataSchema = jest.fn().mockReturnValue({});
@@ -32,18 +45,23 @@ jest.mock('../commands/utils/featureFlags', () => ({
   getTransformerVersion: jest.fn().mockReturnValue(2),
 }));
 
+const defaultStudioFeatureFlags = {
+  autoGenerateForms: 'true',
+  autoGenerateViews: 'true',
+  isRelationshipSupported: 'false',
+  isNonModelSupported: 'false',
+  isGraphQLEnabled: 'true',
+};
+
+const projectPath = '/usr/test/test-project';
+
 describe('can generate components', () => {
   let context: any;
   let schemas: any;
   let mockedExport: jest.Mock<any, any>;
   const getMetadataPromise = jest.fn().mockReturnValue({
     features: {
-      autoGenerateForms: 'true',
-      autoGenerateViews: 'true',
-      formFeatureFlags: {
-        isRelationshipSupported: 'false',
-        isNonModelSupported: 'false',
-      },
+      ...defaultStudioFeatureFlags,
     },
   });
   const startCodegenJobPromise = jest.fn().mockReturnValue({
@@ -53,6 +71,7 @@ describe('can generate components', () => {
     promise: startCodegenJobPromise,
   });
   beforeEach(() => {
+    jest.clearAllMocks();
     isDataStoreEnabledMocked.mockResolvedValue(true);
     getTransformerVersionMocked.mockResolvedValue(2);
     context = {
@@ -65,6 +84,11 @@ describe('can generate components', () => {
           envName: 'testEnvName',
         },
       },
+      exeInfo: {
+        localEnvInfo: {
+          projectPath,
+        },
+      },
     };
     schemas = {
       entities: [
@@ -81,6 +105,16 @@ describe('can generate components', () => {
         },
       ],
     };
+
+    getCodegenConfigMocked.mockReturnValue({
+      getGeneratedTypesPath: jest.fn().mockReturnValue(undefined),
+      getGeneratedQueriesPath: jest.fn().mockReturnValue(projectPath + '/src/graphql/queries.js'),
+      getGeneratedMutationsPath: jest.fn().mockReturnValue(projectPath + '/src/graphql/mutations.js'),
+      getGeneratedSubscriptionsPath: jest.fn().mockReturnValue(projectPath + '/src/graphql/subscriptions.js'),
+      getGeneratedFragmentsPath: jest.fn().mockReturnValue(projectPath + '/src/graphql/fragments.js'),
+      getQueryMaxDepth: jest.fn().mockReturnValue(3),
+    });
+
     mockedExport = jest.fn().mockReturnValue({
       entities: schemas.entities,
     });
@@ -105,10 +139,10 @@ describe('can generate components', () => {
         promise: jest.fn().mockReturnValue({ status: 'succeeded' }),
       }),
     });
+    getUiBuilderComponentsPathMocked.mockReturnValue(projectPath + '/src/ui-components');
     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);
     utilsMock.deleteDetachedForms = jest.fn();
@@ -120,7 +154,7 @@ describe('can generate components', () => {
     expect(mockedExport).toBeCalledTimes(3);
     expect(startCodegenJobPromise).toBeCalledTimes(1);
     expect(utilsMock.waitForSucceededJob).toBeCalledTimes(1);
-    expect(utilsMock.getUiBuilderComponentsPath).toBeCalledTimes(1);
+    expect(getUiBuilderComponentsPathMocked).toBeCalledTimes(1);
     expect(utilsMock.extractUIComponents).toBeCalledTimes(1);
     expect(utilsMock.deleteDetachedForms).toBeCalledTimes(1);
   });
@@ -130,34 +164,14 @@ describe('can generate components', () => {
     getTransformerVersionMocked.mockResolvedValue(2);
     getMetadataPromise.mockReturnValue({
       features: {
-        autoGenerateForms: 'true',
-        autoGenerateViews: 'true',
-        formFeatureFlags: {
-          isRelationshipSupported: 'false',
-          isNonModelSupported: 'false',
-        },
+        ...defaultStudioFeatureFlags,
       },
     });
     await run(context, 'PostPull');
     expect(mockStartCodegenJob).toHaveBeenCalledWith({
       appId: 'testAppId',
       environmentName: 'testEnvName',
-      codegenJobToCreate: {
-        renderConfig: {
-          react: {
-            module: 'es2020',
-            target: 'es2020',
-            script: 'jsx',
-            renderTypeDeclarations: true,
-          },
-        },
-        genericDataSchema: undefined,
-        autoGenerateForms: true,
-        features: {
-          isNonModelSupported: false,
-          isRelationshipSupported: false,
-        },
-      },
+      codegenJobToCreate: expect.objectContaining({ autoGenerateForms: true }),
     });
   });
 
@@ -166,104 +180,163 @@ describe('can generate components', () => {
     getTransformerVersionMocked.mockResolvedValue(1);
     getMetadataPromise.mockReturnValue({
       features: {
-        autoGenerateForms: 'true',
-        autoGenerateViews: 'true',
-        formFeatureFlags: {
-          isRelationshipSupported: 'false',
-          isNonModelSupported: 'false',
-        },
+        ...defaultStudioFeatureFlags,
       },
     });
     await run(context, 'PostPull');
     expect(mockStartCodegenJob).toHaveBeenCalledWith({
       appId: 'testAppId',
       environmentName: 'testEnvName',
-      codegenJobToCreate: {
-        renderConfig: {
-          react: {
-            module: 'es2020',
-            target: 'es2020',
-            script: 'jsx',
-            renderTypeDeclarations: true,
-          },
-        },
-        genericDataSchema: undefined,
-        autoGenerateForms: false,
-        features: {
-          isNonModelSupported: false,
-          isRelationshipSupported: false,
-        },
+      codegenJobToCreate: expect.objectContaining({ autoGenerateForms: false }),
+    });
+  });
+
+  it('should not autogenerate forms if datastore is not enabled and GraphQL is not enabled', async () => {
+    isDataStoreEnabledMocked.mockResolvedValue(false);
+    getMetadataPromise.mockReturnValue({
+      features: {
+        ...defaultStudioFeatureFlags,
+        isGraphQLEnabled: 'false',
       },
     });
+    await run(context, 'PostPull');
+    expect(mockStartCodegenJob).toHaveBeenCalledWith({
+      appId: 'testAppId',
+      environmentName: 'testEnvName',
+      codegenJobToCreate: expect.objectContaining({ autoGenerateForms: false }),
+    });
   });
 
-  it('should not autogenerate forms if datastore is not enabled', async () => {
+  it('should not autogenerate forms if datastore is not enabled and GraphQL is enabled with invalid config', async () => {
     isDataStoreEnabledMocked.mockResolvedValue(false);
     getMetadataPromise.mockReturnValue({
       features: {
-        autoGenerateForms: 'true',
-        autoGenerateViews: 'true',
-        formFeatureFlags: {
-          isRelationshipSupported: 'false',
-          isNonModelSupported: 'false',
-        },
+        ...defaultStudioFeatureFlags,
+        isGraphQLEnabled: 'true',
       },
     });
+    getCodegenConfigMocked.mockImplementation(() => {
+      throw new Error();
+    });
     await run(context, 'PostPull');
     expect(mockStartCodegenJob).toHaveBeenCalledWith({
       appId: 'testAppId',
       environmentName: 'testEnvName',
-      codegenJobToCreate: {
-        renderConfig: {
-          react: {
-            module: 'es2020',
-            target: 'es2020',
-            script: 'jsx',
-            renderTypeDeclarations: true,
-          },
-        },
-        genericDataSchema: undefined,
-        autoGenerateForms: false,
-        features: {
-          isNonModelSupported: false,
-          isRelationshipSupported: false,
-        },
+      codegenJobToCreate: expect.objectContaining({ autoGenerateForms: false }),
+    });
+  });
+
+  it('should autogenerate forms if datastore is not enabled and GraphQL is enabled with valid config', async () => {
+    isDataStoreEnabledMocked.mockResolvedValue(false);
+    getMetadataPromise.mockReturnValue({
+      features: {
+        ...defaultStudioFeatureFlags,
+        isGraphQLEnabled: 'true',
       },
     });
+    await run(context, 'PostPull');
+    expect(mockStartCodegenJob).toHaveBeenCalledWith({
+      appId: 'testAppId',
+      environmentName: 'testEnvName',
+      codegenJobToCreate: expect.objectContaining({ autoGenerateForms: true }),
+    });
   });
 
   it('should not autogenerate forms if feature flag  is not enabled', async () => {
     isDataStoreEnabledMocked.mockResolvedValue(true);
     getMetadataPromise.mockReturnValue({
       features: {
+        ...defaultStudioFeatureFlags,
         autoGenerateForms: 'false',
-        autoGenerateViews: 'true',
-        formFeatureFlags: {
-          isRelationshipSupported: 'false',
-          isNonModelSupported: 'false',
-        },
       },
     });
     await run(context, 'PostPull');
     expect(mockStartCodegenJob).toHaveBeenCalledWith({
       appId: 'testAppId',
       environmentName: 'testEnvName',
-      codegenJobToCreate: {
-        renderConfig: {
-          react: {
-            module: 'es2020',
-            target: 'es2020',
-            script: 'jsx',
-            renderTypeDeclarations: true,
+      codegenJobToCreate: expect.objectContaining({ autoGenerateForms: false }),
+    });
+  });
+
+  describe('codegen job creation', () => {
+    it('should inclue dataStore configuration when dataStore is enabled', async () => {
+      isDataStoreEnabledMocked.mockResolvedValue(true);
+      getMetadataPromise.mockReturnValue({
+        features: {
+          ...defaultStudioFeatureFlags,
+        },
+      });
+      await run(context, 'PostPull');
+      expect(mockStartCodegenJob).toHaveBeenCalledWith({
+        appId: 'testAppId',
+        environmentName: 'testEnvName',
+        codegenJobToCreate: expect.objectContaining({
+          renderConfig: {
+            react: expect.objectContaining({
+              apiConfiguration: {
+                dataStoreConfig: {},
+              },
+            }),
           },
+        }),
+      });
+    });
+
+    it('should inclue GraphQL configuration when dataStore is disabled and valid api configuration is found', async () => {
+      isDataStoreEnabledMocked.mockResolvedValue(false);
+      getMetadataPromise.mockReturnValue({
+        features: {
+          ...defaultStudioFeatureFlags,
+          isGraphQLEnabled: 'true',
         },
-        genericDataSchema: undefined,
-        autoGenerateForms: false,
+      });
+      await run(context, 'PostPull');
+      expect(mockStartCodegenJob).toHaveBeenCalledWith({
+        appId: 'testAppId',
+        environmentName: 'testEnvName',
+        codegenJobToCreate: expect.objectContaining({
+          renderConfig: {
+            react: expect.objectContaining({
+              apiConfiguration: {
+                graphQLConfig: {
+                  fragmentsFilePath: '../graphql/fragments.js',
+                  mutationsFilePath: '../graphql/mutations.js',
+                  queriesFilePath: '../graphql/queries.js',
+                  subscriptionsFilePath: '../graphql/subscriptions.js',
+                  typesFilePath: '',
+                },
+              },
+            }),
+          },
+        }),
+      });
+    });
+
+    it('should inclue noApi configuration when dataStore is disabled and no valid GraphQL Api', async () => {
+      isDataStoreEnabledMocked.mockResolvedValue(false);
+      getMetadataPromise.mockReturnValue({
         features: {
-          isNonModelSupported: false,
-          isRelationshipSupported: false,
+          ...defaultStudioFeatureFlags,
+          isGraphQLEnabled: 'true',
         },
-      },
+      });
+      getCodegenConfigMocked.mockImplementation(() => {
+        throw new Error();
+      });
+      await run(context, 'PostPull');
+      expect(mockStartCodegenJob).toHaveBeenCalledWith({
+        appId: 'testAppId',
+        environmentName: 'testEnvName',
+        codegenJobToCreate: expect.objectContaining({
+          renderConfig: {
+            react: expect.objectContaining({
+              apiConfiguration: {
+                noApiConfig: {},
+              },
+            }),
+          },
+        }),
+      });
     });
   });
 });

package/src/__tests__/utils/getApiConfiguration.test.ts

@@ -0,0 +1,41 @@
+import { $TSContext } from '@aws-amplify/amplify-cli-core';
+import { relativeToComponentsPath } from '../../commands/utils/getApiConfiguration';
+import { getUiBuilderComponentsPath } from '../../commands/utils/getUiBuilderComponentsPath';
+import path from 'path';
+
+jest.mock('../../commands/utils/getUiBuilderComponentsPath', () => ({
+  ...jest.requireActual('../../commands/utils/getUiBuilderComponentsPath'),
+  getUiBuilderComponentsPath: jest.fn(),
+}));
+
+jest.mock('path', () => ({
+  ...jest.requireActual('path'),
+}));
+
+const pathMocked = path as any;
+
+const getUiBuilderComponentsPathMocked = getUiBuilderComponentsPath as any;
+
+describe('relativeToComponentsPath', () => {
+  it('should return posix relative path when run in a windows-like environment', () => {
+    pathMocked.relative = path.win32.relative;
+    pathMocked.sep = path.win32.sep;
+    const projectPath = 'c:\\dev\\test\\test-project';
+    const toImport = projectPath + '\\src\\graphql\\queries.js';
+    getUiBuilderComponentsPathMocked.mockReturnValue(projectPath + '\\src\\ui-components');
+
+    const response = relativeToComponentsPath(toImport, {} as $TSContext);
+
+    expect(response).toBe('../graphql/queries.js');
+  });
+
+  it('should return expected relative path', () => {
+    const projectPath = '/dev/test/test-project';
+    const toImport = projectPath + '/src/graphql/queries.js';
+    getUiBuilderComponentsPathMocked.mockReturnValue(projectPath + '/src/ui-components');
+
+    const response = relativeToComponentsPath(toImport, {} as $TSContext);
+
+    expect(response).toBe('../graphql/queries.js');
+  });
+});

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

@@ -17,6 +17,7 @@ export type StudioMetadata = {
     isRelationshipSupported: boolean;
     isNonModelSupported: boolean;
   };
+  isGraphQLEnabled: boolean;
 };
 
 /**
@@ -122,6 +123,7 @@ export default class AmplifyStudioClient {
         isRelationshipSupported: false,
         isNonModelSupported: false,
       },
+      isGraphQLEnabled: false,
     };
   }
 
@@ -145,6 +147,7 @@ export default class AmplifyStudioClient {
           isRelationshipSupported: response.features?.isRelationshipSupported === 'true',
           isNonModelSupported: response.features?.isNonModelSupported === 'true',
         },
+        isGraphQLEnabled: response.features?.isGraphQLEnabled === 'true',
       };
     } catch (err) {
       throw new Error(`Failed to load metadata: ${err.message}`);

package/src/commands/generateComponents.ts

@@ -12,10 +12,11 @@ import {
   hasStorageField,
   mapGenericDataSchemaToCodegen,
   waitForSucceededJob,
-  getUiBuilderComponentsPath,
   extractUIComponents,
 } from './utils';
+import { getUiBuilderComponentsPath } from './utils/getUiBuilderComponentsPath';
 import { AmplifyUIBuilder } from 'aws-sdk';
+import { getApiConfiguration, hasDataStoreConfiguration, hasGraphQLConfiguration } from './utils/getApiConfiguration';
 
 /**
  * Pulls ui components from Studio backend and generates the code in the user's file system
@@ -34,10 +35,15 @@ export const run = async (context: $TSContext, eventType: 'PostPush' | 'PostPull
       studioClient.isGraphQLSupported ? getAmplifyDataSchema(context) : Promise.resolve(undefined),
     ]);
 
-    const nothingWouldAutogenerate =
-      !dataSchema || !studioClient.metadata.autoGenerateForms || !studioClient.isGraphQLSupported || !studioClient.isDataStoreEnabled;
+    const canGenerateDataComponents = dataSchema && studioClient.isGraphQLSupported;
 
-    if (nothingWouldAutogenerate && [componentSchemas, themeSchemas, formSchemas].every((group) => !group.entities.length)) {
+    const apiConfiguration: AmplifyUIBuilder.ApiConfiguration = canGenerateDataComponents
+      ? getApiConfiguration(studioClient, context)
+      : { noApiConfig: {} };
+    const hasDataAPI = hasDataStoreConfiguration(apiConfiguration) || hasGraphQLConfiguration(apiConfiguration);
+    const willAutogenerateItems = canGenerateDataComponents && studioClient.metadata.autoGenerateForms && hasDataAPI;
+
+    if (!willAutogenerateItems && [componentSchemas, themeSchemas, formSchemas].every((group) => !group.entities.length)) {
       printer.debug('Skipping UI component generation since none are found.');
       return;
     }
@@ -52,9 +58,10 @@ export const run = async (context: $TSContext, eventType: 'PostPush' | 'PostPull
           target: 'es2020',
           script: 'jsx',
           renderTypeDeclarations: true,
-        },
+          apiConfiguration,
+        } as AmplifyUIBuilder.ReactStartCodegenJobData,
       },
-      autoGenerateForms: studioClient.metadata.autoGenerateForms && studioClient.isGraphQLSupported,
+      autoGenerateForms: studioClient.metadata.autoGenerateForms && studioClient.isGraphQLSupported && hasDataAPI,
       features: studioClient.metadata.formFeatureFlags,
     };
     // SDK will throw if this is undefined

package/src/commands/utils/getApiConfiguration.ts

@@ -0,0 +1,73 @@
+import { printer } from '@aws-amplify/amplify-prompts';
+import { AmplifyStudioClient } from '../../clients';
+import { $TSContext } from '@aws-amplify/amplify-cli-core';
+import { getUiBuilderComponentsPath } from './getUiBuilderComponentsPath';
+import { getCodegenConfig } from 'amplify-codegen';
+import { ApiConfiguration } from 'aws-sdk/clients/amplifyuibuilder';
+import path from 'path';
+
+//a posix formatted relative path must always be returned as the return values are used directly in jsx files as import paths
+export function relativeToComponentsPath(importPath: string, context: $TSContext): string {
+  const componentsPath = getUiBuilderComponentsPath(context);
+  const segments = path.relative(componentsPath, importPath).split(path.sep);
+  return path.posix.join(...segments);
+}
+
+export function getApiConfiguration(studioClient: AmplifyStudioClient, context: $TSContext): ApiConfiguration {
+  if (studioClient.isDataStoreEnabled) {
+    return {
+      dataStoreConfig: {},
+    };
+  }
+
+  if (studioClient.metadata.isGraphQLEnabled) {
+    printer.debug('building graphql config');
+    // attempt to get api codegen info
+    const projectPath = context.exeInfo.localEnvInfo.projectPath;
+    let promptForUpdateCodegen = false;
+
+    try {
+      const codegenConfig = getCodegenConfig(projectPath);
+      const typesPath = codegenConfig.getGeneratedTypesPath();
+      const apiConfiguration = {
+        graphQLConfig: {
+          typesFilePath: (typesPath && relativeToComponentsPath(typesPath, context)) || '',
+          queriesFilePath: relativeToComponentsPath(codegenConfig.getGeneratedQueriesPath(), context),
+          mutationsFilePath: relativeToComponentsPath(codegenConfig.getGeneratedMutationsPath(), context),
+          subscriptionsFilePath: relativeToComponentsPath(codegenConfig.getGeneratedSubscriptionsPath(), context),
+          fragmentsFilePath: relativeToComponentsPath(codegenConfig.getGeneratedFragmentsPath(), context),
+        },
+      };
+
+      const minQueryDepth = 3;
+      const isQueryingTooShallow = (codegenConfig.getQueryMaxDepth() || 0) < minQueryDepth;
+
+      if (studioClient.metadata.formFeatureFlags.isRelationshipSupported && isQueryingTooShallow) {
+        promptForUpdateCodegen = true;
+        printer.warn(`Forms with relationships require a maximum query depth of at least ${minQueryDepth}.`);
+      }
+      return apiConfiguration;
+    } catch {
+      promptForUpdateCodegen = true;
+      printer.warn(
+        'Unable to successfully configure component generation for GraphQL. This will impact generating forms and components bound to your data models.',
+      );
+    } finally {
+      if (promptForUpdateCodegen) {
+        printer.warn(`Run 'amplify update codegen' to ensure GraphQL configurations for your project are correct.`);
+      }
+    }
+  }
+
+  return {
+    noApiConfig: {},
+  };
+}
+
+export function hasDataStoreConfiguration(apiConfiguration: ApiConfiguration): boolean {
+  return apiConfiguration.dataStoreConfig !== undefined;
+}
+
+export function hasGraphQLConfiguration(apiConfiguration: ApiConfiguration): boolean {
+  return apiConfiguration.graphQLConfig !== undefined;
+}