updated regex for resource name validation and convert to kebabCase i…

…f name is not valid
openshift · Jun 30, 2021 · 697a634 · 697a634
1 parent d3b71bd
commit 697a634
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 25 deletions.
diff --git a/...tend/packages/dev-console/src/components/import/__tests__/import-validation-utils.spec.ts b/...tend/packages/dev-console/src/components/import/__tests__/import-validation-utils.spec.ts
@@ -46,12 +46,14 @@ describe('ValidationUtils', () => {
 
   describe('createComponentName', () => {
     const invalidConvertedtoValidNamePair: { [key: string]: string } = {
-      '0name': 'ocp-0name',
-      '-name': 'ocp--name',
-      'name-': 'ocp-name',
-      'invalid&name': 'ocp-invalidname',
-      'invalid name': 'ocp-invalidname',
-      'invalid-Name': 'ocp-invalid-name',
+      '0name': 'ocp-0-name',
+      Name: 'name',
+      '-name': 'name',
+      'name-': 'name',
+      'invalid&name': 'invalid-name',
+      'invalid name': 'invalid-name',
+      'invalid-Name': 'invalid-name',
+      InvalidName: 'invalid-name',
     };
     const validNames: string[] = ['name', 'valid-name', 'name0', 'name-0'];
 
@@ -145,6 +147,21 @@ describe('ValidationUtils', () => {
       expect(name).toEqual('wild-west-frontend');
     });
 
+    it('should convert the detected name to valid kebabCase', async () => {
+      expect(
+        detectGitRepoName('https://github.com/openshift-evangelists/Wild-West-Frontend'),
+      ).toEqual('wild-west-frontend');
+      expect(
+        detectGitRepoName('https://github.com/openshift-evangelists/wildWestFrontend'),
+      ).toEqual('wild-west-frontend');
+      expect(
+        detectGitRepoName('https://github.com/openshift-evangelists/wild-west-frontend.git'),
+      ).toEqual('wild-west-frontend-git');
+      expect(
+        detectGitRepoName('https://github.com/openshift-evangelists/Wild-West-Frontend123'),
+      ).toEqual('wild-west-frontend-123');
+    });
+
     it('should throw an error if name is invalid', async () => {
       const mockData = cloneDeep(mockFormData);
       mockData.name = 'app_name';

diff --git a/frontend/packages/dev-console/src/components/import/git/GitSection.tsx b/frontend/packages/dev-console/src/components/import/git/GitSection.tsx
@@ -19,7 +19,7 @@ import {
   NormalizedBuilderImages,
 } from '../../../utils/imagestream-utils';
 import { GitData, GitReadableTypes, GitTypes } from '../import-types';
-import { detectGitType, detectGitRepoName, createComponentName } from '../import-validation-utils';
+import { detectGitType, detectGitRepoName } from '../import-validation-utils';
 import FormSection from '../section/FormSection';
 import AdvancedGitOptions from './AdvancedGitOptions';
 import SampleRepo from './SampleRepo';
@@ -107,10 +107,7 @@ const GitSection: React.FC<GitSectionProps> = ({
         return;
       }
 
-      gitRepoName &&
-        !nameTouched &&
-        !values.name &&
-        setFieldValue('name', createComponentName(gitRepoName));
+      gitRepoName && !nameTouched && !values.name && setFieldValue('name', gitRepoName);
       gitRepoName &&
         values.formType !== 'edit' &&
         !values.application.name &&
@@ -192,10 +189,7 @@ const GitSection: React.FC<GitSectionProps> = ({
   const handleGitUrlBlur = React.useCallback(() => {
     const { url } = values.git;
     const gitRepoName = detectGitRepoName(url);
-    values.formType !== 'edit' &&
-      gitRepoName &&
-      !nameTouched &&
-      setFieldValue('name', createComponentName(gitRepoName));
+    values.formType !== 'edit' && gitRepoName && !nameTouched && setFieldValue('name', gitRepoName);
     gitRepoName &&
       values.formType !== 'edit' &&
       !values.application.name &&

diff --git a/frontend/packages/dev-console/src/components/import/import-validation-utils.ts b/frontend/packages/dev-console/src/components/import/import-validation-utils.ts
@@ -64,18 +64,18 @@ export const detectGitType = (url: string): string => {
   return GitTypes.unsure;
 };
 
-export const detectGitRepoName = (url: string): string | undefined => {
-  if (!gitUrlRegex.test(url)) {
-    return undefined;
+export const createComponentName = (nameString: string): string => {
+  if (nameRegex.test(nameString)) {
+    return nameString;
   }
-
-  return _.kebabCase(url.split('/').pop());
+  const kebabCaseStr = _.kebabCase(nameString);
+  return nameString.match(/^\d/) ? `ocp-${kebabCaseStr}` : kebabCaseStr;
 };
 
-export const createComponentName = (nameString: string): string => {
-  const prefixToValidate = 'ocp-';
-  if (!nameRegex.test(nameString)) {
-    return `${prefixToValidate}${nameString.replace(/[^-a-zA-Z0-9]|(-*)$/g, '').toLowerCase()}`;
+export const detectGitRepoName = (url: string): string | undefined => {
+  if (!gitUrlRegex.test(url)) {
+    return undefined;
   }
-  return nameString;
+  const name = url.split('/').pop();
+  return createComponentName(name);
 };