@aws-amplify/amplify-util-uibuilder 1.8.5-rds.1 → 1.9.0-cdk228withdata.0

package/src/commands/utils/codegenResources.ts

@@ -1,211 +1,8 @@
-/* eslint-disable spellcheck/spell-checker*/
-// You have a misspelled word: Renderer on Identifier
-import {
-  StudioTemplateRendererManager,
-  StudioComponent,
-  StudioTheme,
-  StudioTemplateRendererFactory,
-  StudioTemplateRenderer,
-  FrameworkOutputManager,
-  RenderTextComponentResponse,
-  GenericDataSchema,
-  getGenericFromDataStore,
-  StudioForm,
-  StudioSchema,
-  FormFeatureFlags,
-} from '@aws-amplify/codegen-ui';
-import {
-  AmplifyRenderer,
-  AmplifyFormRenderer,
-  ReactThemeStudioTemplateRenderer,
-  ReactIndexStudioTemplateRenderer,
-  ModuleKind,
-  ScriptTarget,
-  ScriptKind,
-  UtilTemplateType,
-  ReactUtilsStudioTemplateRenderer,
-  ReactThemeStudioTemplateRendererOptions,
-} from '@aws-amplify/codegen-ui-react';
+import { GenericDataSchema, getGenericFromDataStore } from '@aws-amplify/codegen-ui';
 import { printer } from '@aws-amplify/amplify-prompts';
 import { $TSContext } from '@aws-amplify/amplify-cli-core';
-import { getUiBuilderComponentsPath } from './getUiBuilderComponentsPath';
 import { ModelIntrospectionSchema } from '@aws-amplify/appsync-modelgen-plugin';
 
-const config = {
-  module: ModuleKind.ES2020,
-  target: ScriptTarget.ES2020,
-  script: ScriptKind.JSX,
-  renderTypeDeclarations: true,
-};
-
-/**
- * Writes component file to the work space
- */
-export const createUiBuilderComponent = (context: $TSContext, schema: StudioComponent, dataSchema?: GenericDataSchema): StudioComponent => {
-  const uiBuilderComponentsPath = getUiBuilderComponentsPath(context);
-  const rendererFactory = new StudioTemplateRendererFactory(
-    (component: StudioComponent) => new AmplifyRenderer(component as StudioComponent, config, dataSchema),
-  );
-
-  const outputPathDir = uiBuilderComponentsPath;
-
-  const rendererManager = new StudioTemplateRendererManager(rendererFactory, {
-    outputPathDir,
-  });
-
-  rendererManager.renderSchemaToTemplate(schema);
-  return schema;
-};
-
-/**
- * Writes theme file to the work space
- */
-export const createUiBuilderTheme = (
-  context: $TSContext,
-  schema: StudioTheme,
-  options?: ReactThemeStudioTemplateRendererOptions,
-): StudioTheme => {
-  const uiBuilderComponentsPath = getUiBuilderComponentsPath(context);
-  const rendererFactory = new StudioTemplateRendererFactory(
-    (component: StudioTheme) =>
-      new ReactThemeStudioTemplateRenderer(component, config, options) as unknown as StudioTemplateRenderer<
-        unknown,
-        StudioTheme,
-        FrameworkOutputManager<unknown>,
-        RenderTextComponentResponse
-      >,
-  );
-
-  const outputPathDir = uiBuilderComponentsPath;
-
-  const rendererManager = new StudioTemplateRendererManager(rendererFactory, {
-    outputPathDir,
-  });
-
-  try {
-    rendererManager.renderSchemaToTemplate(schema);
-    return schema;
-  } catch (e) {
-    printer.debug(e);
-    printer.debug('Skipping invalid theme with schema');
-    printer.debug(JSON.stringify(schema, null, 2));
-    throw e;
-  }
-};
-
-/**
- * Writes form file to the work space
- */
-export const createUiBuilderForm = (
-  context: $TSContext,
-  schema: StudioForm,
-  dataSchema?: GenericDataSchema,
-  formFeatureFlags?: FormFeatureFlags,
-): StudioForm => {
-  const uiBuilderComponentsPath = getUiBuilderComponentsPath(context);
-  const rendererFactory = new StudioTemplateRendererFactory(
-    (form: StudioForm) =>
-      new AmplifyFormRenderer(form, dataSchema, config, formFeatureFlags) as unknown as StudioTemplateRenderer<
-        unknown,
-        StudioForm,
-        FrameworkOutputManager<unknown>,
-        RenderTextComponentResponse
-      >,
-  );
-
-  const outputPathDir = uiBuilderComponentsPath;
-
-  const rendererManager = new StudioTemplateRendererManager(rendererFactory, {
-    outputPathDir,
-  });
-
-  try {
-    rendererManager.renderSchemaToTemplate(schema);
-    return schema;
-  } catch (e) {
-    printer.debug(e);
-    printer.debug('Skipping invalid form with schema');
-    printer.debug(JSON.stringify(schema, null, 2));
-    throw e;
-  }
-};
-
-/**
- * Writes index file to the work space
- */
-export const generateAmplifyUiBuilderIndexFile = (context: $TSContext, schemas: StudioSchema[]): void => {
-  const uiBuilderComponentsPath = getUiBuilderComponentsPath(context);
-  const rendererFactory = new StudioTemplateRendererFactory(
-    (schema: StudioSchema[]) =>
-      new ReactIndexStudioTemplateRenderer(schema, config) as unknown as StudioTemplateRenderer<
-        unknown,
-        StudioSchema[],
-        FrameworkOutputManager<unknown>,
-        RenderTextComponentResponse
-      >,
-  );
-
-  const outputPathDir = uiBuilderComponentsPath;
-
-  const rendererManager = new StudioTemplateRendererManager(rendererFactory, {
-    outputPathDir,
-  });
-
-  try {
-    if (schemas.length) {
-      rendererManager.renderSchemaToTemplate(schemas);
-    }
-  } catch (e) {
-    printer.debug(e);
-    printer.debug('Failed to generate component index file');
-    throw e;
-  }
-};
-
-type UtilFileChecks = {
-  hasForms: boolean;
-  hasViews: boolean;
-};
-
-/**
- * Writes utils file to the work space
- */
-export const generateAmplifyUiBuilderUtilFile = (context: $TSContext, { hasForms, hasViews }: UtilFileChecks): void => {
-  const uiBuilderComponentsPath = getUiBuilderComponentsPath(context);
-  const rendererFactory = new StudioTemplateRendererFactory(
-    (utils: UtilTemplateType[]) => new ReactUtilsStudioTemplateRenderer(utils, config),
-  );
-
-  const outputPathDir = uiBuilderComponentsPath;
-
-  const rendererManager = new StudioTemplateRendererManager(rendererFactory, {
-    outputPathDir,
-  });
-
-  const utils = new Set<UtilTemplateType>();
-
-  if (hasForms) {
-    utils.add('validation');
-    utils.add('formatter');
-    utils.add('fetchByPath');
-    utils.add('processFile');
-  }
-
-  if (hasViews) {
-    utils.add('formatter');
-  }
-
-  try {
-    if (utils.size) {
-      rendererManager.renderSchemaToTemplate([...utils]);
-    }
-  } catch (e) {
-    printer.debug(e);
-    printer.debug('Failed to generate component index file');
-    throw e;
-  }
-};
-
 /**
  * If models are available, they will be populated in the models field of the returned object.
  * If they're not available, it will return undefined
@@ -224,25 +21,3 @@ export const getAmplifyDataSchema = async (context: $TSContext): Promise<Generic
     return undefined;
   }
 };
-
-/**
- * generates base create/update froms from names
- */
-export const generateBaseForms = (modelMap: { [model: string]: Set<'create' | 'update'> }): StudioForm[] => {
-  const getSchema = (name: string, type: 'create' | 'update'): StudioForm => ({
-    name: `${name}${type === 'create' ? 'CreateForm' : 'UpdateForm'}`,
-    formActionType: type,
-    dataType: { dataSourceType: 'DataStore', dataTypeName: name },
-    fields: {},
-    sectionalElements: {},
-    style: {},
-    cta: {},
-  });
-
-  const schemas: StudioForm[] = [];
-
-  Object.entries(modelMap).forEach(([name, set]) => {
-    set.forEach((type) => schemas.push(getSchema(name, type)));
-  });
-  return schemas;
-};

package/src/commands/utils/detachedFormCleanup.ts

@@ -1,4 +1,3 @@
-import { StudioForm, StudioSchema } from '@aws-amplify/codegen-ui';
 import { Form } from 'aws-sdk/clients/amplifyuibuilder';
 import { AmplifyStudioClient } from '../../clients';
 import { printer } from '@aws-amplify/amplify-prompts';
@@ -7,7 +6,7 @@ import asyncPool from 'tiny-async-pool';
 /**
  * Does the form's reference DataStore type exist in the list of models
  */
-export const isFormDetachedFromModel = (formSchema: StudioForm | Form, modelNames: Set<string>): boolean => {
+export const isFormDetachedFromModel = (formSchema: Form, modelNames: Set<string>): boolean => {
   return formSchema.dataType.dataSourceType === 'DataStore' && !modelNames.has(formSchema.dataType.dataTypeName);
 };
 
@@ -16,7 +15,7 @@ export const isFormDetachedFromModel = (formSchema: StudioForm | Form, modelName
  * @param schema The schema to test
  * @returns boolean
  */
-export const isFormSchemaCustomized = (formSchema: StudioForm | Form): boolean => {
+export const isFormSchemaCustomized = (formSchema: Form): boolean => {
   const { fields, style, sectionalElements } = formSchema;
   // Fields and sectionalElements just need an empty check
   if (!isEmpty({ ...fields, ...sectionalElements })) {
@@ -31,7 +30,7 @@ export const isFormSchemaCustomized = (formSchema: StudioForm | Form): boolean =
 /**
  * Is the schema a StudioForm
  */
-export const isStudioForm = (schema: StudioSchema | undefined): schema is StudioForm => {
+export const isStudioForm = (schema: Form | undefined): schema is Form => {
   if (!schema) return false;
   return 'formActionType' in schema;
 };

package/src/commands/utils/storageManager.ts

@@ -1,6 +1,6 @@
-import { StudioForm, StudioFormFieldConfig, StudioGenericFieldConfig, StudioSchema } from '@aws-amplify/codegen-ui';
+import { FieldConfig, Form } from 'aws-sdk/clients/amplifyuibuilder';
 
-export const hasStorageField = (form: StudioForm): boolean => {
+export const hasStorageField = (form: Form): boolean => {
   const result = Object.values(form.fields).some((field) => {
     return isGenericFieldConfig(field) && field.inputType?.type === 'StorageField';
   });
@@ -8,10 +8,6 @@ export const hasStorageField = (form: StudioForm): boolean => {
   return result;
 };
 
-export const isFormSchema = (schema: StudioSchema): schema is StudioForm => {
-  return schema && Object.keys(schema).includes('fields');
-};
-
-export const isGenericFieldConfig = (config: StudioFormFieldConfig): config is StudioGenericFieldConfig => {
+export const isGenericFieldConfig = (config: FieldConfig) => {
   return !Object.keys(config).includes('excluded');
 };

package/src/commands/utils/syncAmplifyUiBuilderComponents.ts

@@ -1,145 +1,232 @@
 import { printer } from '@aws-amplify/amplify-prompts';
-import { $TSContext } from '@aws-amplify/amplify-cli-core';
+import type { GenericDataSchema, GenericDataField, GenericDataRelationshipType } from '@aws-amplify/codegen-ui';
 import {
-  StudioComponent,
-  StudioTheme,
-  GenericDataSchema,
-  StudioForm,
-  StudioSchema,
-  checkIsSupportedAsForm,
-  FormFeatureFlags,
-} from '@aws-amplify/codegen-ui';
-import { createUiBuilderComponent, createUiBuilderForm, createUiBuilderTheme, generateBaseForms } from './codegenResources';
-import { getUiBuilderComponentsPath } from './getUiBuilderComponentsPath';
-
-type CodegenResponse<T extends StudioSchema> =
-  | {
-      resultType: 'SUCCESS';
-      schema: T;
-      schemaName?: string;
+  CodegenGenericDataEnum,
+  CodegenGenericDataFieldDataType,
+  CodegenGenericDataFields,
+  CodegenGenericDataModel,
+  CodegenGenericDataNonModel,
+  CodegenGenericDataRelationshipType,
+  CodegenJob,
+  CodegenJobGenericDataSchema,
+} from 'aws-sdk/clients/amplifyuibuilder';
+import fetch from 'node-fetch';
+import { performance } from 'perf_hooks';
+import path from 'path';
+import fs from 'fs';
+import asyncPool from 'tiny-async-pool';
+
+const mapRelationshipTypeToCodegen = (
+  relationship: GenericDataRelationshipType | undefined,
+): CodegenGenericDataRelationshipType | undefined => {
+  if (!relationship) return undefined;
+
+  switch (relationship.type) {
+    case 'HAS_MANY':
+      return {
+        type: 'HAS_MANY',
+        relatedModelFields: relationship.relatedModelFields,
+        canUnlinkAssociatedModel: !!relationship.canUnlinkAssociatedModel,
+        relatedJoinFieldName: relationship.relatedJoinFieldName,
+        relatedJoinTableName: relationship.relatedJoinTableName,
+        belongsToFieldOnRelatedModel: relationship.belongsToFieldOnRelatedModel,
+        relatedModelName: relationship.relatedModelName,
+      };
+    case 'HAS_ONE':
+      return {
+        type: 'HAS_ONE',
+        associatedFields: relationship.associatedFields,
+        isHasManyIndex: !!relationship.isHasManyIndex,
+        relatedModelName: relationship.relatedModelName,
+      };
+    case 'BELONGS_TO':
+      return {
+        type: 'BELONGS_TO',
+        associatedFields: relationship.associatedFields,
+        isHasManyIndex: !!relationship.isHasManyIndex,
+        relatedModelName: relationship.relatedModelName,
+      };
+    default:
+      throw new Error('Invalid relationship type');
+  }
+};
+
+const mapDataFieldsToCodegen = (fields: { [fieldName: string]: GenericDataField }): CodegenGenericDataFields => {
+  const codegenFields: CodegenGenericDataFields = {};
+
+  Object.entries(fields).forEach(([fieldName, dataField]) => {
+    let dataType: CodegenGenericDataFieldDataType = '';
+    let dataTypeValue = '';
+    if (typeof dataField.dataType === 'object' && dataField.dataType !== null) {
+      if ('enum' in dataField.dataType) {
+        dataType = 'Enum';
+        dataTypeValue = dataField.dataType.enum;
+      } else if ('model' in dataField.dataType) {
+        dataType = 'Model';
+        dataTypeValue = dataField.dataType.model;
+      } else if ('nonModel' in dataField.dataType) {
+        dataType = 'NonModel';
+        dataTypeValue = dataField.dataType.nonModel;
+      }
+    } else {
+      dataType = dataField.dataType;
+      dataTypeValue = dataField.dataType;
     }
-  | {
-      resultType: 'FAILURE';
-      schemaName: string;
-      error: Error;
-      schema?: T;
+    codegenFields[fieldName] = {
+      dataType: dataType,
+      dataTypeValue: dataTypeValue,
+      required: dataField.required,
+      readOnly: dataField.readOnly,
+      isArray: dataField.isArray,
     };
-
-// TODO: when types are updated in codegen-ui reference mappers here so the arguments accepted are not any
-
-/**
- * Returns instances of StudioComponent from the component schemas
- */
-export const generateUiBuilderComponents = (
-  context: $TSContext,
-  componentSchemas: any[], // eslint-disable-line @typescript-eslint/no-explicit-any
-  dataSchema?: GenericDataSchema,
-): CodegenResponse<StudioComponent>[] => {
-  const componentResults = componentSchemas.map<CodegenResponse<StudioComponent>>((schema) => {
-    try {
-      const component = createUiBuilderComponent(context, schema, dataSchema);
-      return { resultType: 'SUCCESS', schema: component };
-    } catch (e) {
-      printer.debug(`Failure caught processing ${schema.name}`);
-      printer.debug(e);
-      return { resultType: 'FAILURE', schemaName: schema.name, error: e };
+    if (dataField.relationship) {
+      codegenFields[fieldName].relationship = mapRelationshipTypeToCodegen(dataField.relationship);
     }
   });
 
-  printer.debug(
-    `Generated ${componentResults.filter((result) => result.resultType === 'SUCCESS').length} components in ${getUiBuilderComponentsPath(
-      context,
-    )}`,
-  );
-  return componentResults;
+  return codegenFields;
 };
 
-/**
- * Returns instances of StudioTheme from theme schemas
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const generateUiBuilderThemes = (context: $TSContext, themeSchemas: any[]): CodegenResponse<StudioTheme>[] => {
-  if (themeSchemas.length === 0) {
-    return [generateDefaultTheme(context)];
-  }
-  const themeResults = themeSchemas.map<CodegenResponse<StudioTheme>>((schema) => {
-    try {
-      const theme = createUiBuilderTheme(context, schema);
-      return { resultType: 'SUCCESS', schema: theme };
-    } catch (e) {
-      printer.debug(`Failure caught processing ${schema.name}`);
-      printer.debug(e);
-      return { resultType: 'FAILURE', schemaName: schema.name, error: e };
-    }
+export const mapGenericDataSchemaToCodegen = (genericDataSchema: GenericDataSchema): CodegenJobGenericDataSchema => {
+  const { models, nonModels, enums, dataSourceType } = genericDataSchema;
+  const codegenModels: { [key: string]: CodegenGenericDataModel } = {};
+  const codegenNonModels: { [key: string]: CodegenGenericDataNonModel } = {};
+  const codegenEnums: { [key: string]: CodegenGenericDataEnum } = {};
+
+  Object.entries(models).forEach(([modelName, genericDataModel]) => {
+    const modelFields = mapDataFieldsToCodegen(genericDataModel.fields);
+
+    codegenModels[modelName] = {
+      isJoinTable: genericDataModel.isJoinTable,
+      primaryKeys: genericDataModel.primaryKeys,
+      fields: modelFields,
+    };
   });
 
-  printer.debug(
-    `Generated ${themeResults.filter((result) => result.resultType === 'SUCCESS').length} themes in ${getUiBuilderComponentsPath(context)}`,
-  );
-  return themeResults;
+  Object.entries(nonModels).forEach(([nonModelName, genericDataModel]) => {
+    const nonModelFields = mapDataFieldsToCodegen(genericDataModel.fields);
+
+    codegenNonModels[nonModelName] = {
+      fields: nonModelFields,
+    };
+  });
+
+  Object.entries(enums).forEach(([enumName, genericEnum]) => {
+    codegenEnums[enumName] = {
+      values: genericEnum.values,
+    };
+  });
+
+  return {
+    models: codegenModels,
+    nonModels: codegenNonModels,
+    enums: codegenEnums,
+    dataSourceType,
+  };
 };
 
-/**
- * Generates the defaultTheme in the user's project that's exported from @aws-amplify/codegen-ui-react
- */
-const generateDefaultTheme = (context: $TSContext): CodegenResponse<StudioTheme> => {
-  try {
-    const theme = createUiBuilderTheme(context, { name: 'studioTheme', values: [] }, { renderDefaultTheme: true });
-    printer.debug(`Generated default theme in ${getUiBuilderComponentsPath(context)}`);
-    return { resultType: 'SUCCESS', schema: theme };
-  } catch (e) {
-    printer.debug(`Failure caught rendering default theme`);
-    printer.debug(e);
-    return { resultType: 'FAILURE', schemaName: 'studioTheme', error: e };
+function delay(durationMs: number): Promise<void> {
+  return new Promise((r) => setTimeout(() => r(), durationMs));
+}
+
+export const waitForSucceededJob = async (getJob: () => Promise<CodegenJob>, { pollInterval }: { pollInterval: number }) => {
+  const startTime = performance.now();
+  // Adding env variable because if something happens and we need a longer timeout
+  // we will give the customer a chance to increase timeout as a workaround.
+  // Default timeout is 2 minutes for customers with thousands of components.
+  const waitTimeout = process.env.UI_BUILDER_CODEGENJOB_TIMEOUT ? parseInt(process.env.UI_BUILDER_CODEGENJOB_TIMEOUT) : 1000 * 60 * 2;
+
+  const endTime = startTime + waitTimeout;
+
+  while (performance.now() < endTime) {
+    const job = await getJob();
+
+    if (!job) {
+      printer.error('Codegen job not found');
+      throw new Error('Codegen job not found');
+    }
+
+    if (job.status === 'failed') {
+      printer.error('Codegen job status is failed', { message: job.statusMessage });
+      throw new Error(job.statusMessage);
+    }
+
+    if (job.status === 'succeeded') {
+      printer.debug(`Polling time: ${performance.now() - startTime}`);
+
+      return job;
+    }
+
+    await delay(pollInterval);
   }
-};
 
-/**
- * Returns instances of StudioForm from form schemas
- */
-export const generateUiBuilderForms = (
-  context: $TSContext,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  formSchemas: any[],
-  dataSchema?: GenericDataSchema,
-  autoGenerateForms?: boolean,
-  formFeatureFlags?: FormFeatureFlags,
-): CodegenResponse<StudioForm>[] => {
-  const modelMap: { [model: string]: Set<'create' | 'update'> } = {};
-  if (dataSchema?.dataSourceType === 'DataStore' && autoGenerateForms) {
-    Object.entries(dataSchema.models).forEach(([name, model]) => {
-      if (checkIsSupportedAsForm(model, formFeatureFlags) && !model.isJoinTable) {
-        modelMap[name] = new Set(['create', 'update']);
-      }
-    });
+  if (performance.now() > endTime) {
+    printer.error(`Codegen job never succeeded before timeout`);
   }
-  const codegenForm = (schema: StudioForm): CodegenResponse<StudioForm> => {
+
+  throw new Error('Failed to return codegen job');
+};
+
+export const fetchWithRetries = async (url: string, retries = 3, delay = 300) => {
+  let retryCount = 0;
+  let retryDelay = delay;
+
+  while (retryCount < retries) {
     try {
-      const form = createUiBuilderForm(context, schema, dataSchema, formFeatureFlags);
-      return { resultType: 'SUCCESS', schema: form };
-    } catch (e) {
-      printer.debug(`Failure caught processing ${schema.name}`);
-      printer.debug(e);
-      return {
-        resultType: 'FAILURE',
-        schemaName: schema.name,
-        schema,
-        error: e,
-      };
+      const response = await fetch(url);
+      return response;
+    } catch (error) {
+      printer.debug(`Error fetching ${url}: ${error}`);
+      retryCount = retryCount + 1;
+      await new Promise((res) => setTimeout(res, delay));
+      retryDelay = retryDelay * 2;
     }
-  };
-  const formResults = formSchemas.map((schema: StudioForm) => {
-    if (schema?.dataType && schema.dataType?.dataSourceType === 'DataStore') {
-      modelMap[schema.dataType.dataTypeName]?.delete(schema.formActionType);
+  }
+  throw new Error('Fetch reached max number of retries without succeeding');
+};
+
+export const extractUIComponents = async (url: string, uiBuilderComponentsPath: string) => {
+  try {
+    if (!fs.existsSync(uiBuilderComponentsPath)) {
+      fs.mkdirSync(uiBuilderComponentsPath, { recursive: true });
     }
-    return codegenForm(schema);
-  });
 
-  // append remaining models
-  formResults.push(...generateBaseForms(modelMap).map(codegenForm));
+    const response = await fetchWithRetries(url);
+    if (!response.ok) {
+      throw new Error('Failed to download component manifest file');
+    }
+    const manifestFile = await (<
+      Promise<{ Output: { downloadUrl: string | undefined; fileName: string; schemaName: string; error: string | undefined }[] }>
+    >response.json());
+
+    const downloadComponent = async (output: { fileName: string; downloadUrl: string | undefined; error: string | undefined }) => {
+      if (output.downloadUrl && !output.error) {
+        try {
+          const response = await fetchWithRetries(output.downloadUrl);
+          if (!response.ok) {
+            printer.debug(`Failed to download ${output.fileName}`);
+            throw new Error(`Failed to download ${output.fileName}`);
+          }
+          return { content: await response.text(), error: undefined, fileName: output.fileName };
+        } catch (error) {
+          printer.debug(`Skipping ${output.fileName} because of an error downloading the component`);
+          return { error: `Failed to download ${output.fileName}`, content: undefined, fileName: output.fileName };
+        }
+      } else {
+        printer.debug(`Skipping ${output.fileName} because of an error generating the component`);
+        return { error: output.error, content: undefined, fileName: output.fileName };
+      }
+    };
 
-  printer.debug(
-    `Generated ${formResults.filter((result) => result.resultType === 'SUCCESS').length} forms in ${getUiBuilderComponentsPath(context)}`,
-  );
-  return formResults;
+    for await (const downloaded of asyncPool(5, manifestFile.Output, downloadComponent)) {
+      if (downloaded.content) {
+        fs.writeFileSync(path.join(uiBuilderComponentsPath, downloaded.fileName), downloaded.content);
+        printer.debug(`Downloaded ${downloaded.fileName}`);
+      }
+    }
+    printer.debug('ui-components downloaded successfully');
+  } catch (error) {
+    printer.error('failed to download ui-components');
+    throw error;
+  }
 };