diff --git a/web/src/App.tsx b/web/src/App.tsx index 6befbcea2..609503493 100644 --- a/web/src/App.tsx +++ b/web/src/App.tsx @@ -25,13 +25,12 @@ const App: React.FC = React.memo(function App({ lang = 'en', on401 = handle401, children, - hooks = {}, - components = {} + hooks }: AppProps) { const [strings, setStrings] = useState() const token = useAPIToken() const getRequestOptions = useCallback( - (): Partial => buildResfulReactRequestOptions(hooks.useGetToken?.() || token), + (): Partial => buildResfulReactRequestOptions(hooks?.useGetToken?.() || token), [token, hooks] ) @@ -42,7 +41,7 @@ const App: React.FC = React.memo(function App({ return strings ? ( - + ({ standalone: true, setAppContext: noop, routes, - hooks: {}, - components: {} + hooks: {} }) export const AppContextProvider: React.FC<{ value: AppProps }> = React.memo(function AppContextProvider({ diff --git a/web/src/AppProps.ts b/web/src/AppProps.ts index 2ce05ded6..679476126 100644 --- a/web/src/AppProps.ts +++ b/web/src/AppProps.ts @@ -1,8 +1,6 @@ import type React from 'react' -import type * as History from 'history' -import type { PermissionOptionsMenuButtonProps } from 'components/Permissions/PermissionsOptionsMenuButton' -import type { Unknown } from 'utils/Utils' import type { SCMRoutes } from 'RouteDefinitions' +import type { Unknown } from 'utils/Utils' import type { LangLocale } from './framework/strings/languageLoader' /** @@ -42,63 +40,7 @@ export interface AppProps { on401?: () => void /** React Hooks that Harness Platform passes down. Note: Pass only hooks that your app need */ - hooks: Partial - - /** React Components that Harness Platform passes down. Note: Pass only components that your app need */ - components: Partial -} - -/** - * AppPathProps defines all possible URL parameters that application accepts. - */ -export interface AppPathProps { - accountId?: string - orgIdentifier?: string - projectIdentifier?: string - module?: string - policyIdentifier?: string - policySetIdentifier?: string - evaluationId?: string - repo?: string - branch?: string -} - -/** - * AppPropsHook defines a collection of React Hooks that application receives from - * Platform integration. - */ -export interface AppPropsHook { - usePermission(permissionRequest: Unknown, deps?: Array): Array - useGetSchemaYaml(params: Unknown, deps?: Array): Record - useGetToken(): Unknown - useAppStore(): Unknown - useGitSyncStore(): Unknown - useSaveToGitDialog(props: { onSuccess: Unknown; onClose: Unknown; onProgessOverlayClose: Unknown }): Unknown - useGetListOfBranchesWithStatus(props: Unknown): Unknown - useAnyEnterpriseLicense(): boolean - useCurrentEnterpriseLicense(): boolean - useLicenseStore(): Unknown -} // eslint-disable-line @typescript-eslint/no-empty-interface - -/** - * AppPropsComponent defines a collection of React Components that application receives from - * Platform integration. - */ -export interface AppPropsComponent { - NGBreadcrumbs: React.FC - RbacButton: React.FC - RbacOptionsMenuButton: React.FC - GitSyncStoreProvider: React.FC - GitContextForm: React.FC - NavigationCheck: React.FC<{ - when?: boolean - textProps?: { - contentText?: string - titleText?: string - confirmButtonText?: string - cancelButtonText?: string - } - navigate: (path: string) => void - shouldBlockNavigation?: (location: History.Location) => boolean + hooks: Partial<{ + useGetToken: Unknown }> } diff --git a/web/src/RouteDefinitions.ts b/web/src/RouteDefinitions.ts index e81db96bd..41b5e5538 100644 --- a/web/src/RouteDefinitions.ts +++ b/web/src/RouteDefinitions.ts @@ -6,38 +6,16 @@ export interface SCMPathProps { } export interface SCMQueryProps { - branch?: string - filePath?: string + query?: string } export const pathProps: Readonly> = { space: ':space', repoName: ':repoName', gitRef: ':gitRef*', - resourcePath: ':resourcePath' + resourcePath: ':resourcePath*' } -// function withAccountId(fn: (args: T) => string) { -// return (params: T & { accountId: string }): string => { -// const path = fn(params) -// return `/account/${params.accountId}/${path.replace(/^\//, '')}` -// } -// } - -// function withQueryParams(path: string, params: Record): string { -// return Object.entries(params).every(([key, value]) => ':' + key === value) -// ? path -// : [ -// path, -// Object.entries(params) -// .reduce((value, entry) => { -// value.push(entry.join('=')) -// return value -// }, [] as string[]) -// .join('&') -// ].join('?') -// } - export interface SCMRoutes { toSignIn: () => string toSignUp: () => string @@ -56,22 +34,7 @@ export interface SCMRoutes { export const routes: SCMRoutes = { toSignIn: (): string => '/signin', toSignUp: (): string => '/signup', - toSCMRepositoriesListing: ({ space }: { space: string }) => { - const [accountId, orgIdentifier, projectIdentifier] = space.split('/') - return `/account/${accountId}/code/${orgIdentifier}/${projectIdentifier}` - }, - toSCMRepository: ({ - repoPath, - gitRef, - resourcePath - }: { - repoPath: string - gitRef?: string - resourcePath?: string - }) => { - const [accountId, orgIdentifier, projectIdentifier, repoName] = repoPath.split('/') - return `/account/${accountId}/code/${orgIdentifier}/${projectIdentifier}/${repoName}${gitRef ? '/' + gitRef : ''}${ - resourcePath ? '/~/' + resourcePath : '' - }` - } + toSCMRepositoriesListing: ({ space }: { space: string }) => `/${space}`, + toSCMRepository: ({ repoPath, gitRef, resourcePath }: { repoPath: string; gitRef?: string; resourcePath?: string }) => + `/${repoPath}/${gitRef ? '/' + gitRef : ''}${resourcePath ? '/~/' + resourcePath : ''}` } diff --git a/web/src/RouteDestinations.tsx b/web/src/RouteDestinations.tsx index 900121850..40f6b7e7c 100644 --- a/web/src/RouteDestinations.tsx +++ b/web/src/RouteDestinations.tsx @@ -16,10 +16,21 @@ export const RouteDestinations: React.FC = React.memo(function RouteDestinations - + - + diff --git a/web/src/bootstrap.tsx b/web/src/bootstrap.tsx index 3cd75b469..c3ff0092e 100644 --- a/web/src/bootstrap.tsx +++ b/web/src/bootstrap.tsx @@ -1,5 +1,6 @@ import React from 'react' import ReactDOM from 'react-dom' +import { routes } from 'RouteDefinitions' import App from './App' import './bootstrap.scss' @@ -8,4 +9,4 @@ import './bootstrap.scss' // Also being used in when generating proper URLs inside the app. window.STRIP_SCM_PREFIX = true -ReactDOM.render(, document.getElementById('react-root')) +ReactDOM.render(, document.getElementById('react-root')) diff --git a/web/src/components/NameIdDescriptionTags/NameIdDescriptionTags.module.scss b/web/src/components/NameIdDescriptionTags/NameIdDescriptionTags.module.scss deleted file mode 100644 index bc6af2a68..000000000 --- a/web/src/components/NameIdDescriptionTags/NameIdDescriptionTags.module.scss +++ /dev/null @@ -1,61 +0,0 @@ -.main { - max-width: 785px; - margin-bottom: var(--spacing-medium) !important; - - :global(.bp3-input) { - &:disabled { - background-color: var(--grey-100); - } - } - div[class*='collapse'] { - margin-left: 0; - } - - & div[class*='Collapse'] { - border-top: none; - padding: 0; - - // spacing for adjacent collapsible - + div[class*='Collapse'][class*='main'] { - margin-top: var(--spacing-medium); - } - - div[class*='CollapseHeader'] { - padding-top: 0 !important; - } - - span[data-icon='main-chevron-down'] { - color: var(--primary-7); - } - } - - textarea { - min-height: 50px; - resize: vertical; - } - :global { - .TextInput--main { - margin: 0; - .bp3-form-group { - margin: 0; - } - margin-bottom: var(--spacing-medium); - } - } -} - -.editOpen { - cursor: pointer; - margin-left: 8px !important; - position: relative; - top: -2px; - - &:hover { - color: var(--primary-7) !important; - } -} -.descriptionLabel { - margin-bottom: var(--spacing-xsmall) !important; - display: flex !important; - align-items: center; -} diff --git a/web/src/components/NameIdDescriptionTags/NameIdDescriptionTags.module.scss.d.ts b/web/src/components/NameIdDescriptionTags/NameIdDescriptionTags.module.scss.d.ts deleted file mode 100644 index 506953412..000000000 --- a/web/src/components/NameIdDescriptionTags/NameIdDescriptionTags.module.scss.d.ts +++ /dev/null @@ -1,8 +0,0 @@ -/* eslint-disable */ -// this is an auto-generated file -declare const styles: { - readonly main: string - readonly editOpen: string - readonly descriptionLabel: string -} -export default styles diff --git a/web/src/components/NameIdDescriptionTags/NameIdDescriptionTags.tsx b/web/src/components/NameIdDescriptionTags/NameIdDescriptionTags.tsx deleted file mode 100644 index 65a4252ad..000000000 --- a/web/src/components/NameIdDescriptionTags/NameIdDescriptionTags.tsx +++ /dev/null @@ -1,206 +0,0 @@ -import React, { useState } from 'react' -import { Container, FormInput, Icon, Label, DataTooltipInterface, HarnessDocTooltip } from '@harness/uicore' -import type { InputWithIdentifierProps } from '@harness/uicore/dist/components/InputWithIdentifier/InputWithIdentifier' -import { isEmpty } from 'lodash-es' -import { Classes, IInputGroupProps, ITagInputProps } from '@blueprintjs/core' -import cx from 'classnames' -import type { FormikProps } from 'formik' -import { useStrings } from 'framework/strings' -import type { Unknown } from 'utils/Utils' -import type { - DescriptionComponentProps, - DescriptionProps, - NameIdDescriptionProps, - NameIdDescriptionTagsDeprecatedProps, - TagsComponentProps, - TagsDeprecatedComponentProps -} from './NameIdDescriptionTagsConstants' -import css from './NameIdDescriptionTags.module.scss' - -export interface NameIdDescriptionTagsProps { - identifierProps?: Omit - inputGroupProps?: IInputGroupProps - descriptionProps?: DescriptionProps - tagsProps?: Partial & { - isOption?: boolean - } - formikProps: FormikProps - className?: string - tooltipProps?: DataTooltipInterface -} - -interface NameIdProps { - nameLabel?: string // Strong default preference for "Name" vs. Contextual Name (e.g. "Service Name") unless approved otherwise - namePlaceholder?: string - identifierProps?: Omit - inputGroupProps?: IInputGroupProps - dataTooltipId?: string -} - -export const NameId = (props: NameIdProps): JSX.Element => { - const { getString } = useStrings() - const { identifierProps, nameLabel = getString('name'), inputGroupProps = {} } = props - const newInputGroupProps = { placeholder: getString('namePlaceholder'), ...inputGroupProps } - return ( - - ) -} - -export const Description = (props: DescriptionComponentProps): JSX.Element => { - const { descriptionProps = {}, hasValue, disabled = false } = props - const { isOptional = true, ...restDescriptionProps } = descriptionProps - const { getString } = useStrings() - const [isDescriptionOpen, setDescriptionOpen] = useState(hasValue || false) - const [isDescriptionFocus, setDescriptionFocus] = useState(false) - - return ( - - - {isDescriptionOpen && ( - - )} - - ) -} - -export const Tags = (props: TagsComponentProps): JSX.Element => { - const { tagsProps, hasValue, isOptional = true } = props - const { getString } = useStrings() - const [isTagsOpen, setTagsOpen] = useState(hasValue || false) - - return ( - - - {isTagsOpen && } - - ) -} - -function TagsDeprecated(props: TagsDeprecatedComponentProps): JSX.Element { - const { hasValue } = props - const { getString } = useStrings() - const [isTagsOpen, setTagsOpen] = useState(hasValue || false) - - return ( - - - {isTagsOpen && ( - (typeof name === 'string' ? name : '')} - itemFromNewTag={newTag => newTag} - items={[]} - tagInputProps={{ - noInputBorder: true, - openOnKeyDown: false, - showAddTagButton: true, - showClearAllButton: true, - allowNewTag: true - }} - /> - )} - - ) -} - -export function NameIdDescriptionTags(props: NameIdDescriptionTagsProps): JSX.Element { - const { getString } = useStrings() - const { className, identifierProps, descriptionProps, formikProps, inputGroupProps = {}, tooltipProps } = props - const newInputGroupProps = { placeholder: getString('namePlaceholder'), ...inputGroupProps } - return ( - - - - - ) -} - -// Requires verification with existing tags -export function NameIdDescriptionTagsDeprecated(props: NameIdDescriptionTagsDeprecatedProps): JSX.Element { - const { className, identifierProps, descriptionProps, formikProps } = props - return ( - - - - - - ) -} - -export function NameIdDescription(props: NameIdDescriptionProps): JSX.Element { - const { getString } = useStrings() - const { className, identifierProps, descriptionProps, formikProps, inputGroupProps = {} } = props - const newInputGroupProps = { placeholder: getString('namePlaceholder'), ...inputGroupProps } - - return ( - - - - - ) -} - -export function DescriptionTags(props: Omit): JSX.Element { - const { className, descriptionProps, tagsProps, formikProps } = props - return ( - - - - - ) -} diff --git a/web/src/components/NameIdDescriptionTags/NameIdDescriptionTagsConstants.ts b/web/src/components/NameIdDescriptionTags/NameIdDescriptionTagsConstants.ts deleted file mode 100644 index a0edc3996..000000000 --- a/web/src/components/NameIdDescriptionTags/NameIdDescriptionTagsConstants.ts +++ /dev/null @@ -1,48 +0,0 @@ -import type { TagInputProps } from '@harness/uicore' -import type { ITagInputProps, IInputGroupProps } from '@blueprintjs/core' -import type { InputWithIdentifierProps } from '@harness/uicore/dist/components/InputWithIdentifier/InputWithIdentifier' -import type { FormikProps } from 'formik' -import type { Unknown } from 'utils/Utils' - -export interface DescriptionProps { - placeholder?: string - isOptional?: boolean - disabled?: boolean -} -export interface DescriptionComponentProps { - descriptionProps?: DescriptionProps - hasValue?: boolean - disabled?: boolean - dataTooltipId?: string -} - -export interface TagsProps { - className?: string -} - -export interface TagsComponentProps { - tagsProps?: Partial - hasValue?: boolean - isOptional?: boolean - dataTooltipId?: string -} - -export interface TagsDeprecatedComponentProps { - hasValue?: boolean -} - -export interface NameIdDescriptionTagsDeprecatedProps { - identifierProps?: Omit - descriptionProps?: DescriptionProps - tagInputProps?: TagInputProps - formikProps: FormikProps - className?: string -} - -export interface NameIdDescriptionProps { - identifierProps?: Omit - inputGroupProps?: IInputGroupProps - descriptionProps?: DescriptionProps - className?: string - formikProps: Omit, 'tags'> -} diff --git a/web/src/components/NewRepoModalButton/NewRepoModalButton.tsx b/web/src/components/NewRepoModalButton/NewRepoModalButton.tsx index 1aba07b81..c24b2ce83 100644 --- a/web/src/components/NewRepoModalButton/NewRepoModalButton.tsx +++ b/web/src/components/NewRepoModalButton/NewRepoModalButton.tsx @@ -37,8 +37,8 @@ import { SUGGESTED_BRANCH_NAMES, Unknown } from 'utils/Utils' -import type { RepositoryDTO, CreateRepositoryBody } from 'types/SCMTypes' import { isGitBranchNameValid } from 'utils/GitUtils' +import type { TypesRepository, OpenapiCreateRepositoryRequest } from 'services/scm' import { useAppContext } from 'AppContext' import css from './NewRepoModalButton.module.scss' @@ -72,7 +72,7 @@ export interface NewRepoModalButtonProps extends Omit void + onSubmit: (data: TypesRepository) => void } export const NewRepoModalButton: React.FC = ({ @@ -88,7 +88,7 @@ export const NewRepoModalButton: React.FC = ({ const { getString } = useStrings() const [branchName, setBranchName] = useState(DEFAULT_BRANCH_NAME) const { showError } = useToaster() - const { mutate: createRepo, loading: submitLoading } = useMutate({ + const { mutate: createRepo, loading: submitLoading } = useMutate({ verb: 'POST', path: `/api/v1/repos?spacePath=${space}`, queryParams: { @@ -129,7 +129,7 @@ export const NewRepoModalButton: React.FC = ({ pathName: get(formData, 'name', '').trim(), readme: get(formData, 'addReadme', false), spaceId: standalone ? space : 0 - } as CreateRepositoryBody) + } as OpenapiCreateRepositoryRequest) .then(response => { hideModal() onSubmit(response) diff --git a/web/src/components/Permissions/PermissionsButton.tsx b/web/src/components/Permissions/PermissionsButton.tsx deleted file mode 100644 index 5deea6a5e..000000000 --- a/web/src/components/Permissions/PermissionsButton.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react' -import { Button, ButtonProps } from '@harness/uicore' -import { useAppContext } from 'AppContext' -import type { Unknown } from 'utils/Utils' - -interface PermissionButtonProps extends ButtonProps { - permission?: Unknown -} - -export const PermissionsButton: React.FC = (props: PermissionButtonProps) => { - const { - components: { RbacButton } - } = useAppContext() - const { permission, ...buttonProps } = props - - return RbacButton ? :