From 31a58e3172d757c5f785ef8e607efadd1a03dfaf Mon Sep 17 00:00:00 2001 From: Tan Nhu Date: Thu, 10 Nov 2022 15:17:55 -0800 Subject: [PATCH] Add routingId to support Harness gateway + Prototype for Commit modal (#68) * Implement file path edit input * Implement file path edit input - cont * Prototype for Commit modal * Add routingId to support Harness gateway --- web/src/App.tsx | 9 +- .../CommitModalButton.module.scss | 58 +++++ .../CommitModalButton.module.scss.d.ts | 11 + .../CommitModalButton/CommitModalButton.tsx | 206 ++++++++++++++++++ .../NewRepoModalButton/NewRepoModalButton.tsx | 8 +- web/src/framework/strings/stringTypes.ts | 8 + web/src/hooks/useGetResourceContent.ts | 8 +- web/src/i18n/strings.en.yaml | 8 + .../RepositoriesListing.tsx | 11 +- .../ContentHeader/ContentHeader.tsx | 12 +- .../FolderContent/Readme.tsx | 33 ++- .../RepositoryBranchesContent.tsx | 11 +- .../CommitsContentHeader.tsx | 16 +- .../RepositoryCommitsContent.tsx | 9 +- .../FileEditor/FileEditor.module.scss | 17 +- .../FileEditor/FileEditor.module.scss.d.ts | 1 + .../FileEditor/FileEditor.tsx | 159 +++++++++----- web/src/utils/Utils.ts | 1 + 18 files changed, 483 insertions(+), 103 deletions(-) create mode 100644 web/src/components/CommitModalButton/CommitModalButton.module.scss create mode 100644 web/src/components/CommitModalButton/CommitModalButton.module.scss.d.ts create mode 100644 web/src/components/CommitModalButton/CommitModalButton.tsx diff --git a/web/src/App.tsx b/web/src/App.tsx index 1b9809fd2..e0b7cb0ce 100644 --- a/web/src/App.tsx +++ b/web/src/App.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState, useCallback } from 'react' +import React, { useEffect, useState, useCallback, useMemo } from 'react' import { RestfulProvider } from 'restful-react' import { TooltipContextProvider } from '@harness/uicore' import { ModalProvider } from '@harness/use-modal' @@ -34,6 +34,11 @@ const App: React.FC = React.memo(function App({ (): Partial => buildResfulReactRequestOptions(hooks?.useGetToken?.() || token), [token, hooks] ) + const queryParams = useMemo( + () => (!standalone ? { routingId: space.split('/').shift() } : {}), + + [space, standalone] + ) useEffect(() => { languageLoader(lang).then(setStrings) @@ -46,7 +51,7 @@ const App: React.FC = React.memo(function App({ { if (!response.ok && response.status === 401) { diff --git a/web/src/components/CommitModalButton/CommitModalButton.module.scss b/web/src/components/CommitModalButton/CommitModalButton.module.scss new file mode 100644 index 000000000..a95212b30 --- /dev/null +++ b/web/src/components/CommitModalButton/CommitModalButton.module.scss @@ -0,0 +1,58 @@ +.main { + padding-left: var(--spacing-xxlarge) !important; + height: 100%; + + .extendedDescription textarea { + height: 100px !important; + } + + .radioGroup { + > div { + margin-bottom: var(--spacing-small) !important; + } + + &.directly { + label[class*='RadioButton']:first-of-type { + background: rgba(220, 238, 255, 0.5); + mix-blend-mode: normal; + border: 1px solid var(--primary-6); + } + } + + &.newBranch { + label[class*='RadioButton']:last-of-type { + background: rgba(220, 238, 255, 0.5); + mix-blend-mode: normal; + border: 1px solid var(--primary-6); + } + } + + label[class*='RadioButton'] { + border-radius: var(--spacing-2); + border: 1px solid var(--bp3-intent-color, var(--grey-200)); + padding: var(--spacing-small) !important; + + &:first-of-type { + margin-bottom: var(--spacing-small); + } + + span { + font-size: var(--form-input-font-size); + font-weight: 500; + } + } + + .newBranchContainer { + align-items: center; + padding-left: var(--spacing-medium); + + > div { + margin-bottom: 0 !important; + + input { + width: 588px; + } + } + } + } +} diff --git a/web/src/components/CommitModalButton/CommitModalButton.module.scss.d.ts b/web/src/components/CommitModalButton/CommitModalButton.module.scss.d.ts new file mode 100644 index 000000000..db055006e --- /dev/null +++ b/web/src/components/CommitModalButton/CommitModalButton.module.scss.d.ts @@ -0,0 +1,11 @@ +/* eslint-disable */ +// this is an auto-generated file +declare const styles: { + readonly main: string + readonly extendedDescription: string + readonly radioGroup: string + readonly directly: string + readonly newBranch: string + readonly newBranchContainer: string +} +export default styles diff --git a/web/src/components/CommitModalButton/CommitModalButton.tsx b/web/src/components/CommitModalButton/CommitModalButton.tsx new file mode 100644 index 000000000..735b16bb2 --- /dev/null +++ b/web/src/components/CommitModalButton/CommitModalButton.tsx @@ -0,0 +1,206 @@ +/* + * Copyright 2021 Harness Inc. All rights reserved. + * Use of this source code is governed by the PolyForm Shield 1.0.0 license + * that can be found in the licenses directory at the root of this repository, also available at + * https://polyformproject.org/wp-content/uploads/2020/06/PolyForm-Shield-1.0.0.txt. + */ + +import React, { useState } from 'react' +import { Dialog, Intent } from '@blueprintjs/core' +import * as yup from 'yup' +import { + Button, + ButtonProps, + Container, + Layout, + FlexExpander, + Icon, + Formik, + FormikForm, + Heading, + useToaster, + FormInput +} from '@harness/uicore' +import cx from 'classnames' +import { FontVariation } from '@harness/design-system' +import { useMutate } from 'restful-react' +import { get } from 'lodash-es' +import { useModalHook } from '@harness/use-modal' +import { String, useStrings } from 'framework/strings' +import { DEFAULT_BRANCH_NAME, getErrorMessage, Unknown } from 'utils/Utils' +import type { TypesRepository, OpenapiCreateRepositoryRequest } from 'services/scm' +import { useAppContext } from 'AppContext' +import css from './CommitModalButton.module.scss' + +enum CommitToGitRefOption { + DIRECTLY = 'directly', + NEW_BRANCH = 'new-branch' +} + +interface RepoFormData { + message: string + extendedDescription: string + newBranch: string + branch: string + commitToGitRefOption: CommitToGitRefOption +} + +const formInitialValues: RepoFormData = { + message: '', + extendedDescription: '', + newBranch: '', + branch: '', + commitToGitRefOption: CommitToGitRefOption.DIRECTLY +} + +export interface CommitModalButtonProps extends Omit { + gitRef: string + commitMessagePlaceHolder: string + resourcePath: string + onSubmit: (data: TypesRepository) => void +} + +export const CommitModalButton: React.FC = ({ + gitRef, + resourcePath, + commitMessagePlaceHolder, + onSubmit, + ...props +}) => { + const ModalComponent: React.FC = () => { + const { standalone } = useAppContext() + const { getString } = useStrings() + const [targetBranchOption, setTargetBranchOption] = useState(CommitToGitRefOption.DIRECTLY) + const [branchName, setBranchName] = useState(gitRef) + const { showError } = useToaster() + const { mutate: createRepo, loading: submitLoading } = useMutate({ + verb: 'POST', + path: `/api/v1/repos?spacePath=${gitRef}` + }) + const loading = submitLoading + + console.log('Commit to', { targetBranchOption, branchName }) + + const handleSubmit = (formData?: Unknown): void => { + try { + createRepo({ + message: branchName || get(formData, 'message', DEFAULT_BRANCH_NAME), + extendedDescription: get(formData, 'extendedDescription', '').trim(), + commitToGitRefOption: get(formData, 'commitToGitRefOption') === CommitToGitRefOption.DIRECTLY, + uid: get(formData, 'name', '').trim(), + parentId: standalone ? gitRef : 0 + } as OpenapiCreateRepositoryRequest) + .then(response => { + hideModal() + onSubmit(response) + }) + .catch(_error => { + showError(getErrorMessage(_error), 0, 'failedToCreateRepo') + }) + } catch (exception) { + showError(getErrorMessage(exception), 0, 'failedToCreateRepo') + } + } + + return ( + + + + {getString('commitChanges')} + + + + + + + + + { + setTargetBranchOption(get(e.target, 'defaultValue')) + }} + items={[ + { + label: , + value: CommitToGitRefOption.DIRECTLY + }, + { + label: , + value: CommitToGitRefOption.NEW_BRANCH + } + ]} + /> + {targetBranchOption === CommitToGitRefOption.NEW_BRANCH && ( + + + + + + + )} + + + + + ) + } + + const [openModal, hideModal] = useModalHook(ModalComponent, [ + onSubmit, + gitRef, + resourcePath, + commitMessagePlaceHolder + ]) + + return