feat(ui): rename external repository components to just repository (#…

…1092)

- renamed components
- updated tests
- upgraded lint

app/ui/cypress/integration/newProject.spec.ts

@@ -72,11 +72,11 @@ const createProject = (name: string, id: string, customResponse?: Object) => {
   // Go to the next step
   cy.getByTestId('nextButton').click();
 
-  cy.getByTestId('externalRepositoryInputs').find('input').eq(0).type('http://test.com');
-  cy.getByTestId('externalRepositoryInputs').find('input').eq(1).type('username-test');
+  cy.getByTestId('repositoryDetailsInputs').find('input').eq(0).type('http://test.com');
+  cy.getByTestId('repositoryDetailsInputs').find('input').eq(1).type('username-test');
   cy.contains('TOKEN').click();
 
-  cy.getByTestId('externalRepositoryInputs').find('input').eq(2).type('token-test');
+  cy.getByTestId('repositoryDetailsInputs').find('input').eq(2).type('token-test');
 
   // Go to the next step
   cy.getByTestId('nextButton').click();

app/ui/src/Components/SiteBar/components/CapabilitiesSelector/CapabilitiesSelector.tsx

@@ -1,7 +1,5 @@
 import React, { FC } from 'react';
 import styles from './CapabilitiesSelector.module.scss';
-import { useReactiveVar } from '@apollo/client';
-import { selectedCapabilities } from 'Graphql/client/cache';
 import { BottomComponentProps } from '../Breadcrumbs/components/Crumb/Crumb';
 import { GetCapabilities_capabilities } from 'Graphql/queries/types/GetCapabilities';
 import CapabilitiesItem from './CapabilitiesItem/CapabilitiesItem';
@@ -10,10 +8,6 @@ type Props = {
   capabilities: GetCapabilities_capabilities[] | undefined;
 };
 
-function sortCapability(capability1: GetCapabilities_capabilities) {
-  return capability1.default ? 1 : -1;
-}
-
 const CapabilitiesSelector: FC<Props & BottomComponentProps> = ({ capabilities, ...props }) => {
   return (
     <div className={styles.container}>

app/ui/src/Pages/NewProject/NewProject.tsx

@@ -16,7 +16,7 @@ import useUnloadPrompt from 'Hooks/useUnloadPrompt/useUnloadPrompt';
 import { newProject } from 'Graphql/client/cache';
 import SidebarTop from 'Components/Layout/Page/DefaultPage/SidebarTop';
 import SidebarInformation from './pages/SidebarComponents/Information/SidebarInformation';
-import SidebarExternalRepository from './pages/SidebarComponents/SidebarExternalRepository/SidebarExternalRepository';
+import SidebarRepository from './pages/SidebarComponents/SidebarRepository/SidebarRepository';
 import useNewProject from 'Graphql/client/hooks/useNewProject';
 
 enum Steps {
@@ -155,7 +155,7 @@ function NewProject() {
       case StepNames.INFORMATION:
         return <SidebarInformation />;
       case StepNames.DETAILS:
-        return <SidebarExternalRepository />;
+        return <SidebarRepository />;
       default:
         return <></>;
     }

app/ui/src/Pages/NewProject/pages/RepositoryDetails/components/ExternalRepository/ExternalRepository.test.ts → app/ui/src/Pages/NewProject/pages/RepositoryDetails/RepositoryDetails.test.ts

@@ -1,6 +1,6 @@
-import { validateMandatoryField, validateUrl } from './ExternalRepositoryUtils';
+import { validateMandatoryField, validateUrl } from './RepositoryDetailsUtils';
 
-describe('ExternalRepositoryUtils', () => {
+describe('RepositoryDetailsUtils', () => {
   describe('validateUrl', () => {
     it.each`
       url                         | expected

app/ui/src/Pages/NewProject/pages/RepositoryDetails/RepositoryDetails.tsx

@@ -1,14 +1,67 @@
 import * as React from 'react';
-import Repository from './components/ExternalRepository/ExternalRepository';
+import { SpinnerCircular, TextInput, Select } from 'kwc';
+import IconLink from '@material-ui/icons/Link';
+import styles from './RepositoryDetails.module.scss';
+import useNewProject from 'Graphql/client/hooks/useNewProject';
+import { useReactiveVar } from '@apollo/client';
+import { newProject } from 'Graphql/client/cache';
+import { validateMandatoryField, validateUrl } from './RepositoryDetailsUtils';
+import { getErrorMsg } from 'Utils/string';
 
 type Props = {
   showErrors: boolean;
 };
 
 function RepositoryDetails({ showErrors }: Props) {
+  const project = useReactiveVar(newProject);
+  const { updateValue, updateError, clearError } = useNewProject('repository');
+
+  if (!project) return <SpinnerCircular />;
+
+  const {
+    values: { url, username },
+    errors: { url: urlError, username: usernameError },
+  } = project.repository;
+
   return (
     <div>
-      <Repository showErrors={showErrors} />
+      <div className={styles.container}>
+        <h3 className={styles.title}>Your repository</h3>
+        <div className={styles.formContainer} data-testid={'repositoryDetailsInputs'}>
+          <TextInput
+            label="url"
+            onChange={(value: string) => {
+              updateValue('url', value);
+              clearError('url');
+            }}
+            onBlur={() => {
+              const isValidUrl = validateUrl(url);
+              updateError('url', getErrorMsg(isValidUrl));
+            }}
+            error={showErrors ? urlError : ''}
+            customClassname={styles.form}
+            formValue={url}
+            Icon={IconLink}
+            showClearButton
+            helpText="The HTTP(S) or GIT 'clone' URL of an existing repository."
+          />
+          <TextInput
+            label="username"
+            onChange={(value: string) => {
+              updateValue('username', value);
+              clearError('username');
+            }}
+            onBlur={() => {
+              const isValidUsername = validateMandatoryField(username);
+              updateError('username', getErrorMsg(isValidUsername));
+            }}
+            error={showErrors ? usernameError : ''}
+            customClassname={styles.form}
+            formValue={username}
+            showClearButton
+          />
+        </div>
+      </div>
     </div>
   );
 }

app/ui/src/Pages/NewProject/pages/Repository/components/RepositoryTypeComponent/RepositoryTypeComponent.tsx → app/ui/src/Pages/NewProject/pages/RepositoryIcon/RepositoryIcon.tsx

@@ -25,7 +25,7 @@ type Props = {
   size?: SIZE;
   shouldAnimate?: boolean;
 };
-function RepositoryTypeComponent({ squareLocation, size = SIZE.MEDIUM, customSize, shouldAnimate = true }: Props) {
+function RepositoryIcon({ squareLocation, size = SIZE.MEDIUM, customSize, shouldAnimate = true }: Props) {
   const side = customSize ? customSize : sizePixels[size];
   return (
     <div
@@ -42,4 +42,4 @@ function RepositoryTypeComponent({ squareLocation, size = SIZE.MEDIUM, customSiz
   );
 }
 
-export default memo(RepositoryTypeComponent);
+export default memo(RepositoryIcon);

app/ui/src/Pages/NewProject/pages/SidebarComponents/SidebarExternalRepository/SidebarExternalRepository.tsx → app/ui/src/Pages/NewProject/pages/SidebarComponents/SidebarRepository/SidebarRepository.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styles from '../SidebarComponents.module.scss';
 
-const SidebarExternalRepository = () => (
+const SidebarRepository = () => (
   <div className={styles.sidebar}>
     <p className={styles.line}>In this page you can set up the external repository information.</p>
     <p className={styles.line}>
@@ -15,4 +15,4 @@ const SidebarExternalRepository = () => (
   </div>
 );
 
-export default SidebarExternalRepository;
+export default SidebarRepository;