Merge pull request #1143 from HubSpot/hs-project-add-fixes

Fix bugs with hs project add --type flag
HubSpot · Aug 22, 2024 · ca8593c · ca8593c
2 parents 425ef09 + 83b9892
commit ca8593c
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 36 deletions.
diff --git a/packages/cli/commands/project/add.js b/packages/cli/commands/project/add.js
@@ -6,7 +6,10 @@ const { fetchReleaseData } = require('@hubspot/local-dev-lib/github');
 const { trackCommandUsage } = require('../../lib/usageTracking');
 const { i18n } = require('../../lib/lang');
 const { projectAddPrompt } = require('../../lib/prompts/projectAddPrompt');
-const { createProjectComponent } = require('../../lib/projects');
+const {
+  createProjectComponent,
+  getProjectComponentsByVersion,
+} = require('../../lib/projects');
 const { loadAndValidateOptions } = require('../../lib/validation');
 const { uiBetaTag } = require('../../lib/ui');
 const {
@@ -21,34 +24,37 @@ exports.describe = uiBetaTag(i18n(`${i18nKey}.describe`), false);
 exports.handler = async options => {
   await loadAndValidateOptions(options);
 
-  const accountId = getAccountId(options);
-
   logger.log('');
   logger.log(i18n(`${i18nKey}.creatingComponent.message`));
   logger.log('');
 
+  const accountId = getAccountId(options);
+
   const releaseData = await fetchReleaseData(
     HUBSPOT_PROJECT_COMPONENTS_GITHUB_PATH
   );
   const projectComponentsVersion = releaseData.tag_name;
 
-  const { type, name } = await projectAddPrompt(
-    projectComponentsVersion,
-    options
+  const components = await getProjectComponentsByVersion(
+    projectComponentsVersion
   );
 
+  let { component, name } = await projectAddPrompt(components, options);
+
+  name = name || options.name;
+
+  if (!component) {
+    component = components.find(t => t.path === options.type);
+  }
+
   trackCommandUsage('project-add', null, accountId);
 
   try {
-    await createProjectComponent(
-      options.type || type,
-      options.name || name,
-      projectComponentsVersion
-    );
+    await createProjectComponent(component, name, projectComponentsVersion);
     logger.log('');
     logger.log(
       i18n(`${i18nKey}.success.message`, {
-        componentName: options.name || name,
+        componentName: name,
       })
     );
   } catch (error) {
@@ -69,6 +75,12 @@ exports.builder = yargs => {
   });
 
   yargs.example([['$0 project add', i18n(`${i18nKey}.examples.default`)]]);
+  yargs.example([
+    [
+      '$0 project add --name="my-component" --type="components/example-app"',
+      i18n(`${i18nKey}.examples.withFlags`),
+    ],
+  ]);
 
   return yargs;
 };
diff --git a/packages/cli/lang/en.lyaml b/packages/cli/lang/en.lyaml
@@ -554,9 +554,9 @@ en:
           describe: "Create a new component within a project"
           options:
             name:
-              describe: "Component name"
+              describe: "The name for your newly created component"
             type:
-              describe: "The type of component"
+              describe: "The path to the component type's location within the hubspot-project-components Github repo: https://github.com/HubSpot/hubspot-project-components"
           creatingComponent:
             message: "Adding a new component to your project"
           success:
@@ -565,6 +565,7 @@ en:
             locationInProject: "The component location must be within a project folder"
           examples:
             default: "Create a component within your project"
+            withFlags: "Use --name and --type flags to bypass the prompt."
         deploy:
           describe: "Deploy a project build"
           debug:

diff --git a/packages/cli/lib/projects.js b/packages/cli/lib/projects.js
@@ -7,6 +7,7 @@ const findup = require('findup-sync');
 const { logger } = require('@hubspot/local-dev-lib/logger');
 const { getEnv } = require('@hubspot/local-dev-lib/config');
 const { getHubSpotWebsiteOrigin } = require('@hubspot/local-dev-lib/urls');
+const { fetchFileFromRepository } = require('@hubspot/local-dev-lib/github');
 const {
   ENVIRONMENTS,
 } = require('@hubspot/local-dev-lib/constants/environments');
@@ -18,6 +19,8 @@ const {
   PROJECT_CONFIG_FILE,
   PROJECT_TASK_TYPES,
   PROJECT_ERROR_TYPES,
+  HUBSPOT_PROJECT_COMPONENTS_GITHUB_PATH,
+  PROJECT_COMPONENT_TYPES,
 } = require('./constants');
 const {
   createProject,
@@ -46,7 +49,6 @@ const {
   logApiErrorInstance,
   ApiErrorContext,
 } = require('./errorHandlers/apiErrors');
-const { HUBSPOT_PROJECT_COMPONENTS_GITHUB_PATH } = require('./constants');
 
 const i18nKey = 'lib.projects';
 
@@ -1002,6 +1004,16 @@ const displayWarnLogs = async (
   }
 };
 
+const getProjectComponentsByVersion = async projectComponentsVersion => {
+  const config = await fetchFileFromRepository(
+    HUBSPOT_PROJECT_COMPONENTS_GITHUB_PATH,
+    'config.json',
+    projectComponentsVersion
+  );
+
+  return config[PROJECT_COMPONENT_TYPES.COMPONENTS];
+};
+
 module.exports = {
   writeProjectConfig,
   getProjectConfig,
@@ -1019,4 +1031,5 @@ module.exports = {
   logFeedbackMessage,
   createProjectComponent,
   displayWarnLogs,
+  getProjectComponentsByVersion,
 };
diff --git a/packages/cli/lib/prompts/projectAddPrompt.js b/packages/cli/lib/prompts/projectAddPrompt.js
@@ -1,40 +1,23 @@
 const { promptUser } = require('./promptUtils');
-const { fetchFileFromRepository } = require('@hubspot/local-dev-lib/github');
 const { i18n } = require('../lang');
-const { HUBSPOT_PROJECT_COMPONENTS_GITHUB_PATH } = require('../constants');
-const { PROJECT_COMPONENT_TYPES } = require('../constants');
 
 const i18nKey = 'lib.prompts.projectAddPrompt';
 
-const createTypeOptions = async projectComponentsVersion => {
-  const config = await fetchFileFromRepository(
-    HUBSPOT_PROJECT_COMPONENTS_GITHUB_PATH,
-    'config.json',
-    projectComponentsVersion
-  );
-
-  return config[PROJECT_COMPONENT_TYPES.COMPONENTS];
-};
-
-const projectAddPrompt = async (
-  projectComponentsVersion,
-  promptOptions = {}
-) => {
-  const components = await createTypeOptions(projectComponentsVersion);
+const projectAddPrompt = async (components, promptOptions = {}) => {
   return promptUser([
     {
-      name: 'type',
+      name: 'component',
       message: () => {
         return promptOptions.type &&
-          !components.find(t => t.path === promptOptions.type.path)
+          !components.find(t => t.path === promptOptions.type)
           ? i18n(`${i18nKey}.errors.invalidType`, {
               type: promptOptions.type,
             })
           : i18n(`${i18nKey}.selectType`);
       },
       when:
         !promptOptions.type ||
-        !components.find(t => t.path === promptOptions.type.path),
+        !components.find(t => t.path === promptOptions.type),
       type: 'list',
       choices: components.map(type => {
         return {