From 5c9281a1d08d5a39d8b5fbae42d311587f386416 Mon Sep 17 00:00:00 2001 From: Alex Rodriguez Fernandez Date: Fri, 20 Dec 2024 13:38:31 +0100 Subject: [PATCH] feat(ui): rename external repository components to just repository (#1092) - renamed components - updated tests - upgraded lint --- app/ui/cypress/integration/newProject.spec.ts | 6 +- .../CapabilitiesSelector.tsx | 6 - app/ui/src/Pages/NewProject/NewProject.tsx | 4 +- .../pages/Repository/Repository.module.scss | 35 --- .../pages/Repository/Repository.tsx | 40 ---- .../RepositoryOption.module.scss | 43 ---- .../RepositoryOption/RepositoryOption.tsx | 37 --- ...ule.scss => RepositoryDetails.module.scss} | 0 ...tory.test.ts => RepositoryDetails.test.ts} | 4 +- .../RepositoryDetails/RepositoryDetails.tsx | 57 ++++- ...toryUtils.ts => RepositoryDetailsUtils.ts} | 0 .../ExternalRepository/ExternalRepository.tsx | 68 ------ .../Repository.module.scss | 0 .../RepositoryIcon.tsx} | 4 +- .../SidebarRepository.tsx} | 4 +- .../Pages/Project/pages/Overview/Overview.tsx | 7 +- .../components/TabGit/TabGit.tsx | 7 +- .../Projects/components/Project/Project.tsx | 10 +- .../__snapshots__/Project.test.tsx.snap | 4 +- app/ui/test-report.xml | 220 ------------------ 20 files changed, 74 insertions(+), 482 deletions(-) delete mode 100644 app/ui/src/Pages/NewProject/pages/Repository/Repository.module.scss delete mode 100644 app/ui/src/Pages/NewProject/pages/Repository/Repository.tsx delete mode 100644 app/ui/src/Pages/NewProject/pages/Repository/components/RepositoryOption/RepositoryOption.module.scss delete mode 100644 app/ui/src/Pages/NewProject/pages/Repository/components/RepositoryOption/RepositoryOption.tsx rename app/ui/src/Pages/NewProject/pages/RepositoryDetails/{components/ExternalRepository/ExternalRepository.module.scss => RepositoryDetails.module.scss} (100%) rename app/ui/src/Pages/NewProject/pages/RepositoryDetails/{components/ExternalRepository/ExternalRepository.test.ts => RepositoryDetails.test.ts} (89%) rename app/ui/src/Pages/NewProject/pages/RepositoryDetails/{components/ExternalRepository/ExternalRepositoryUtils.ts => RepositoryDetailsUtils.ts} (100%) delete mode 100644 app/ui/src/Pages/NewProject/pages/RepositoryDetails/components/ExternalRepository/ExternalRepository.tsx rename app/ui/src/Pages/NewProject/pages/{Repository/components/RepositoryTypeComponent => RepositoryIcon}/Repository.module.scss (100%) rename app/ui/src/Pages/NewProject/pages/{Repository/components/RepositoryTypeComponent/RepositoryTypeComponent.tsx => RepositoryIcon/RepositoryIcon.tsx} (84%) rename app/ui/src/Pages/NewProject/pages/SidebarComponents/{SidebarExternalRepository/SidebarExternalRepository.tsx => SidebarRepository/SidebarRepository.tsx} (89%) delete mode 100644 app/ui/test-report.xml diff --git a/app/ui/cypress/integration/newProject.spec.ts b/app/ui/cypress/integration/newProject.spec.ts index a3e78c5cd..825473b70 100644 --- a/app/ui/cypress/integration/newProject.spec.ts +++ b/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(); diff --git a/app/ui/src/Components/SiteBar/components/CapabilitiesSelector/CapabilitiesSelector.tsx b/app/ui/src/Components/SiteBar/components/CapabilitiesSelector/CapabilitiesSelector.tsx index 082702fe6..1ce3abcf7 100644 --- a/app/ui/src/Components/SiteBar/components/CapabilitiesSelector/CapabilitiesSelector.tsx +++ b/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 = ({ capabilities, ...props }) => { return (
diff --git a/app/ui/src/Pages/NewProject/NewProject.tsx b/app/ui/src/Pages/NewProject/NewProject.tsx index 1a40943e0..4e44c3a0f 100644 --- a/app/ui/src/Pages/NewProject/NewProject.tsx +++ b/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 ; case StepNames.DETAILS: - return ; + return ; default: return <>; } diff --git a/app/ui/src/Pages/NewProject/pages/Repository/Repository.module.scss b/app/ui/src/Pages/NewProject/pages/Repository/Repository.module.scss deleted file mode 100644 index 02842c182..000000000 --- a/app/ui/src/Pages/NewProject/pages/Repository/Repository.module.scss +++ /dev/null @@ -1,35 +0,0 @@ -@import 'Styles/variables'; -@import 'Styles/mixins'; -@import 'Styles/colors'; - -.container { - display: flex; - flex-direction: column; - max-width: fit-content; - - .repositories { - display: flex; - pointer-events: none; - max-height: fit-content; - max-width: fit-content; - border: 1px solid transparent; - transition: border ease 0.4s; - - &.error { - border: 1px solid palette(error); - } - .repository { - pointer-events: auto; - } - & > div:nth-child(2) { - margin-left: 2 * $grid-unit; - } - } - - .errorMessage { - @include font-small; - text-align: right; - color: palette(error); - margin-top: $grid-unit; - } -} diff --git a/app/ui/src/Pages/NewProject/pages/Repository/Repository.tsx b/app/ui/src/Pages/NewProject/pages/Repository/Repository.tsx deleted file mode 100644 index 4e50604ea..000000000 --- a/app/ui/src/Pages/NewProject/pages/Repository/Repository.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import RepositoryTypeComponent, { LOCATION } from './components/RepositoryTypeComponent/RepositoryTypeComponent'; -import * as React from 'react'; -import RepositoryOption from './components/RepositoryOption/RepositoryOption'; -import cx from 'classnames'; -import styles from './Repository.module.scss'; -import useNewProject from 'Graphql/client/hooks/useNewProject'; -import { useReactiveVar } from '@apollo/client'; -import { newProject } from 'Graphql/client/cache'; - -function Repository(params: { showErrors: boolean }) { - const { showErrors } = params; - const { updateValue, clearError } = useNewProject('repository'); - const { - repository: { values, errors }, - } = useReactiveVar(newProject); - - return ( -
-
- { - clearError('type'); - }} - Repository={} - /> -
- {showErrors &&
{errors.type}
} -
- ); -} - -export default Repository; diff --git a/app/ui/src/Pages/NewProject/pages/Repository/components/RepositoryOption/RepositoryOption.module.scss b/app/ui/src/Pages/NewProject/pages/Repository/components/RepositoryOption/RepositoryOption.module.scss deleted file mode 100644 index 117917362..000000000 --- a/app/ui/src/Pages/NewProject/pages/Repository/components/RepositoryOption/RepositoryOption.module.scss +++ /dev/null @@ -1,43 +0,0 @@ -@import 'Styles/variables'; -@import 'Styles/mixins'; -@import 'Styles/colors'; - -.container { - display: flex; - flex-direction: column; - .repoContainer { - background-color: palette(base, 800); - width: 27 * $grid-unit; - padding: 4.5 * $grid-unit; - border: 1px solid transparent; - transition: border ease 0.4s; - display: flex; - flex-direction: column; - align-items: center; - cursor: pointer; - - .title { - @include font-body; - color: font-color(light); - margin-top: 6 * $grid-unit; - margin-bottom: 0; - } - - .subtitle { - @include font-small; - color: font-color(regular); - margin-top: $grid-unit; - } - &.selected { - border: 1px solid palette(highlight); - } - &:nth-child(2) { - margin-left: $grid-unit * 2; - } - } - .selectedLabel { - @include font-small; - color: font-color(highlight); - width: 200px; - } -} diff --git a/app/ui/src/Pages/NewProject/pages/Repository/components/RepositoryOption/RepositoryOption.tsx b/app/ui/src/Pages/NewProject/pages/Repository/components/RepositoryOption/RepositoryOption.tsx deleted file mode 100644 index 2aeb78718..000000000 --- a/app/ui/src/Pages/NewProject/pages/Repository/components/RepositoryOption/RepositoryOption.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import React, { MouseEvent } from 'react'; - -import containerStyles from '../../Repository.module.scss'; -import cx from 'classnames'; -import repositoryStyles from '../RepositoryTypeComponent/Repository.module.scss'; -import styles from './RepositoryOption.module.scss'; - -type Props = { - title: string; - subtitle: string; - actionLabel: string; - isSelected: boolean; - onSelect: (e?: MouseEvent | undefined) => void; - Repository: JSX.Element; - dataTestId?: string; -}; - -function RepositoryOption({ title, subtitle, isSelected, onSelect, Repository, dataTestId }: Props) { - return ( -
-
-
{Repository}
-

{title}

-

{subtitle}

-
- {isSelected &&

You have selected this type of repository

} -
- ); -} - -export default RepositoryOption; diff --git a/app/ui/src/Pages/NewProject/pages/RepositoryDetails/components/ExternalRepository/ExternalRepository.module.scss b/app/ui/src/Pages/NewProject/pages/RepositoryDetails/RepositoryDetails.module.scss similarity index 100% rename from app/ui/src/Pages/NewProject/pages/RepositoryDetails/components/ExternalRepository/ExternalRepository.module.scss rename to app/ui/src/Pages/NewProject/pages/RepositoryDetails/RepositoryDetails.module.scss diff --git a/app/ui/src/Pages/NewProject/pages/RepositoryDetails/components/ExternalRepository/ExternalRepository.test.ts b/app/ui/src/Pages/NewProject/pages/RepositoryDetails/RepositoryDetails.test.ts similarity index 89% rename from app/ui/src/Pages/NewProject/pages/RepositoryDetails/components/ExternalRepository/ExternalRepository.test.ts rename to app/ui/src/Pages/NewProject/pages/RepositoryDetails/RepositoryDetails.test.ts index c82b263ec..d4ce7a7ce 100644 --- a/app/ui/src/Pages/NewProject/pages/RepositoryDetails/components/ExternalRepository/ExternalRepository.test.ts +++ b/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 diff --git a/app/ui/src/Pages/NewProject/pages/RepositoryDetails/RepositoryDetails.tsx b/app/ui/src/Pages/NewProject/pages/RepositoryDetails/RepositoryDetails.tsx index 779a1aefc..0ba196ec6 100644 --- a/app/ui/src/Pages/NewProject/pages/RepositoryDetails/RepositoryDetails.tsx +++ b/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 ; + + const { + values: { url, username }, + errors: { url: urlError, username: usernameError }, + } = project.repository; + return (
- +
+

Your repository

+
+ { + 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." + /> + { + updateValue('username', value); + clearError('username'); + }} + onBlur={() => { + const isValidUsername = validateMandatoryField(username); + updateError('username', getErrorMsg(isValidUsername)); + }} + error={showErrors ? usernameError : ''} + customClassname={styles.form} + formValue={username} + showClearButton + /> +
+
); } diff --git a/app/ui/src/Pages/NewProject/pages/RepositoryDetails/components/ExternalRepository/ExternalRepositoryUtils.ts b/app/ui/src/Pages/NewProject/pages/RepositoryDetails/RepositoryDetailsUtils.ts similarity index 100% rename from app/ui/src/Pages/NewProject/pages/RepositoryDetails/components/ExternalRepository/ExternalRepositoryUtils.ts rename to app/ui/src/Pages/NewProject/pages/RepositoryDetails/RepositoryDetailsUtils.ts diff --git a/app/ui/src/Pages/NewProject/pages/RepositoryDetails/components/ExternalRepository/ExternalRepository.tsx b/app/ui/src/Pages/NewProject/pages/RepositoryDetails/components/ExternalRepository/ExternalRepository.tsx deleted file mode 100644 index 6c4cbb772..000000000 --- a/app/ui/src/Pages/NewProject/pages/RepositoryDetails/components/ExternalRepository/ExternalRepository.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import { SpinnerCircular, TextInput, Select } from 'kwc'; -import * as React from 'react'; -import IconLink from '@material-ui/icons/Link'; -import styles from './ExternalRepository.module.scss'; -import useNewProject from 'Graphql/client/hooks/useNewProject'; -import { useReactiveVar } from '@apollo/client'; -import { newProject } from 'Graphql/client/cache'; -import { validateMandatoryField, validateUrl } from './ExternalRepositoryUtils'; -import { getErrorMsg } from 'Utils/string'; - -type Props = { - showErrors: boolean; -}; - - -function Repository({ showErrors }: Props) { - const project = useReactiveVar(newProject); - const { updateValue, updateError, clearError } = useNewProject('repository'); - - if (!project) return ; - - const { - values: { url, username }, - errors: { url: urlError, username: usernameError }, - } = project.repository; - - return ( -
-

Your repository

-
- { - 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." - /> - { - updateValue('username', value); - clearError('username'); - }} - onBlur={() => { - const isValidUsername = validateMandatoryField(username); - updateError('username', getErrorMsg(isValidUsername)); - }} - error={showErrors ? usernameError : ''} - customClassname={styles.form} - formValue={username} - showClearButton - /> -
-
- ); -} - -export default Repository; diff --git a/app/ui/src/Pages/NewProject/pages/Repository/components/RepositoryTypeComponent/Repository.module.scss b/app/ui/src/Pages/NewProject/pages/RepositoryIcon/Repository.module.scss similarity index 100% rename from app/ui/src/Pages/NewProject/pages/Repository/components/RepositoryTypeComponent/Repository.module.scss rename to app/ui/src/Pages/NewProject/pages/RepositoryIcon/Repository.module.scss diff --git a/app/ui/src/Pages/NewProject/pages/Repository/components/RepositoryTypeComponent/RepositoryTypeComponent.tsx b/app/ui/src/Pages/NewProject/pages/RepositoryIcon/RepositoryIcon.tsx similarity index 84% rename from app/ui/src/Pages/NewProject/pages/Repository/components/RepositoryTypeComponent/RepositoryTypeComponent.tsx rename to app/ui/src/Pages/NewProject/pages/RepositoryIcon/RepositoryIcon.tsx index 781178b08..9d661b0ec 100644 --- a/app/ui/src/Pages/NewProject/pages/Repository/components/RepositoryTypeComponent/RepositoryTypeComponent.tsx +++ b/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 (
( +const SidebarRepository = () => (

In this page you can set up the external repository information.

@@ -15,4 +15,4 @@ const SidebarExternalRepository = () => (

); -export default SidebarExternalRepository; +export default SidebarRepository; diff --git a/app/ui/src/Pages/Project/pages/Overview/Overview.tsx b/app/ui/src/Pages/Project/pages/Overview/Overview.tsx index 6b0ea83b2..84fb9ddfd 100644 --- a/app/ui/src/Pages/Project/pages/Overview/Overview.tsx +++ b/app/ui/src/Pages/Project/pages/Overview/Overview.tsx @@ -1,8 +1,5 @@ import { ErrorMessage, SpinnerCircular } from 'kwc'; -import RepositoryTypeComponent, { - LOCATION, - SIZE, -} from 'Pages/NewProject/pages/Repository/components/RepositoryTypeComponent/RepositoryTypeComponent'; +import RepositoryIcon, { LOCATION, SIZE } from 'Pages/NewProject/pages/RepositoryIcon/RepositoryIcon'; import DescriptionScore from 'Components/DescriptionScore/DescriptionScore'; import { GetProjects_projects } from 'Graphql/queries/types/GetProjects'; @@ -69,7 +66,7 @@ function Overview({ openedProject }: Props) {
- +
- +

{repository.url}

diff --git a/app/ui/src/Pages/Projects/components/Project/Project.tsx b/app/ui/src/Pages/Projects/components/Project/Project.tsx index e99bc9e34..6f893c670 100644 --- a/app/ui/src/Pages/Projects/components/Project/Project.tsx +++ b/app/ui/src/Pages/Projects/components/Project/Project.tsx @@ -2,9 +2,7 @@ import { AccessLevel } from 'Graphql/types/globalTypes'; import ROUTE, { buildRoute } from 'Constants/routes'; import React, { FC } from 'react'; import { capitalize } from 'lodash'; -import RepositoryTypeComponent, { - LOCATION, -} from 'Pages/NewProject/pages/Repository/components/RepositoryTypeComponent/RepositoryTypeComponent'; +import RepositoryIcon, { LOCATION } from 'Pages/NewProject/pages/RepositoryIcon/RepositoryIcon'; import { GetProjects_projects } from 'Graphql/queries/types/GetProjects'; import { Link } from 'react-router-dom'; @@ -107,11 +105,7 @@ const Band: FC = ({ project }) => ( const Square: FC = ({ project }) => (
- +
); diff --git a/app/ui/src/Pages/Projects/components/Project/__snapshots__/Project.test.tsx.snap b/app/ui/src/Pages/Projects/components/Project/__snapshots__/Project.test.tsx.snap index 55a481fbc..4f4b4c06c 100644 --- a/app/ui/src/Pages/Projects/components/Project/__snapshots__/Project.test.tsx.snap +++ b/app/ui/src/Pages/Projects/components/Project/__snapshots__/Project.test.tsx.snap @@ -373,7 +373,7 @@ exports[`Project component Component match snapshot 1`] = `
-
- +
diff --git a/app/ui/test-report.xml b/app/ui/test-report.xml deleted file mode 100644 index 023a0eb3a..000000000 --- a/app/ui/test-report.xml +++ /dev/null @@ -1,220 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -