USEFULL
/
drone
mirror of https://github.com/harness/drone.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: [AH-370]: export create registry button from gitness to use in harness ng ui (#2737) 

* feat: [AH-370]: export create registry button from gitness to use in harness ng ui
fix-admin-user-readme
Shivanand Sonnad 2024-09-25 09:24:00 +00:00 committed by Harness
parent 2b3b8b3503
commit 8f2744668c
7 changed files with 102 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/config/moduleFederation.config.js
View File

@ -55,7 +55,8 @@ module.exports = {
'./Labels': './src/pages/ManageSpace/ManageLabels/ManageLabels.tsx',
'./WebhookDetails': './src/pages/WebhookDetails/WebhookDetails.tsx',
'./NewRepoModalButton': './src/components/NewRepoModalButton/NewRepoModalButton.tsx',
'./HAREnterpriseApp': './src/ar/app/EnterpriseApp.tsx'
'./HAREnterpriseApp': './src/ar/app/EnterpriseApp.tsx',
'./HARCreateRegistryButton': './src/ar/views/CreateRegistryButton/CreateRegistryButton.tsx'
},
shared: {
formik: packageJSON.dependencies['formik'],

26
web/src/ar/app/App.tsx
View File

@ -14,7 +14,7 @@
* limitations under the License.
*/
import React, { Suspense, useEffect, useRef } from 'react'
import React, { PropsWithChildren, Suspense, useEffect, useRef } from 'react'
import { Page } from '@harnessio/uicore'
import { HARServiceAPIClient } from '@harnessio/react-har-service-client'
import { QueryClientProvider } from '@tanstack/react-query'
@ -35,7 +35,7 @@ import css from '@ar/app/app.module.scss'
const RouteDestinations = React.lazy(() => import('@ar/routes/RouteDestinations'))
export default function ChildApp(props: MFEAppProps): React.ReactElement {
export default function ChildApp(props: PropsWithChildren<MFEAppProps>): React.ReactElement {
const {
renderUrl,
parentContextObj,
@ -105,16 +105,18 @@ export default function ChildApp(props: MFEAppProps): React.ReactElement {
components={{ ...components, ...customComponents } as ParentProviderProps['components']}
utils={{ ...customUtils }}>
<ModalProvider>
<NavComponent>
<Suspense
fallback={
<Page.Body className={css.pageBody}>
<Page.Spinner fixed={false} />
</Page.Body>
}>
<RouteDestinations />
</Suspense>
</NavComponent>
{props.children ?? (
<NavComponent>
<Suspense
fallback={
<Page.Body className={css.pageBody}>
<Page.Spinner fixed={false} />
</Page.Body>
}>
<RouteDestinations />
</Suspense>
</NavComponent>
)}
</ModalProvider>
</ParentProvider>
</StringsContextProvider>

20
web/src/ar/pages/repository-details/components/Forms/RepositoryCreateForm.tsx
View File

@ -49,6 +49,7 @@ import css from './RepositoryDetailsForm.module.scss'
interface FormContentProps {
formikProps: FormikProps<VirtualRegistryRequest>
allowedPackageTypes?: RepositoryPackageType[]
getDefaultValuesByRepositoryType: (
type: RepositoryPackageType,
defaultValue: VirtualRegistryRequest
@ -56,7 +57,7 @@ interface FormContentProps {
}
function FormContent(props: FormContentProps): JSX.Element {
const { formikProps, getDefaultValuesByRepositoryType } = props
const { formikProps, getDefaultValuesByRepositoryType, allowedPackageTypes } = props
const { getString } = useStrings()
const { values } = formikProps
const { packageType, config } = values
@ -78,7 +79,8 @@ function FormContent(props: FormContentProps): JSX.Element {
name="packageType"
items={RepositoryTypes.map(each => ({
...each,
label: getString(each.label)
label: getString(each.label),
disabled: allowedPackageTypes?.length ? !allowedPackageTypes.includes(each.value) : each.disabled
}))}
staticItems
/>
@ -97,12 +99,13 @@ function FormContent(props: FormContentProps): JSX.Element {
interface RepositoryCreateFormProps {
factory?: RepositoryAbstractFactory
defaultType?: RepositoryPackageType
allowedPackageTypes?: RepositoryPackageType[]
setShowOverlay: (show: boolean) => void
onSuccess: (data: Repository) => void
}
function RepositoryCreateForm(props: RepositoryCreateFormProps, formikRef: FormikFowardRef): JSX.Element {
const { defaultType = RepositoryPackageType.DOCKER, factory = repositoryFactory, onSuccess, setShowOverlay } = props
const { defaultType, factory = repositoryFactory, onSuccess, setShowOverlay, allowedPackageTypes } = props
const { getString } = useStrings()
const parentRef = useGetSpaceRef()
const { showSuccess, showError, clear } = useToaster()
@ -125,7 +128,10 @@ function RepositoryCreateForm(props: RepositoryCreateFormProps, formikRef: Formi
)
const getInitialValues = (): VirtualRegistryRequest => {
return getDefaultValuesByRepositoryType(defaultType)
const defaultSelectedPackageType = allowedPackageTypes?.length
? allowedPackageTypes[0]
: RepositoryPackageType.DOCKER
return getDefaultValuesByRepositoryType(defaultType ?? defaultSelectedPackageType)
}
const handleSubmit = async (values: VirtualRegistryRequest): Promise<void> => {
@ -170,7 +176,11 @@ function RepositoryCreateForm(props: RepositoryCreateFormProps, formikRef: Formi
setFormikRef(formikRef, formik)
return (
<Container className={css.formContainer}>
<FormContent formikProps={formik} getDefaultValuesByRepositoryType={getDefaultValuesByRepositoryType} />
<FormContent
allowedPackageTypes={allowedPackageTypes}
formikProps={formik}
getDefaultValuesByRepositoryType={getDefaultValuesByRepositoryType}
/>
</Container>
)
}}

12
web/src/ar/pages/repository-details/hooks/useCreateRepositoryModal/useCreateRepositoryModal.tsx
View File

@ -21,15 +21,17 @@ import { Button, ButtonVariation, Layout, ModalDialog, Text } from '@harnessio/u
import { useParentHooks } from '@ar/hooks'
import { useStrings } from '@ar/frameworks/strings'
import type { RepositoryPackageType } from '@ar/common/types'
import RepositoryCreateForm from '@ar/pages/repository-details/components/Forms/RepositoryCreateForm'
import type { Repository } from '@ar/pages/repository-details/types'
interface useCreateRepositoryModalProps {
onSuccess: (data: Repository) => void
allowedPackageTypes?: RepositoryPackageType[]
}
export function useCreateRepositoryModal(props: useCreateRepositoryModalProps) {
const { onSuccess } = props
const { onSuccess, allowedPackageTypes } = props
const { getString } = useStrings()
const { useModalHook } = useParentHooks()
const [showOverlay, setShowOverlay] = useState(false)
@ -62,7 +64,6 @@ export function useCreateRepositoryModal(props: useCreateRepositoryModalProps) {
}
isCloseButtonShown
width={800}
showOverlay={showOverlay}
footer={
<Layout.Horizontal spacing="small">
<Button
@ -76,7 +77,12 @@ export function useCreateRepositoryModal(props: useCreateRepositoryModalProps) {
<Button variation={ButtonVariation.TERTIARY} text={getString('cancel')} onClick={hideModal} />
</Layout.Horizontal>
}>
<RepositoryCreateForm onSuccess={onSuccess} setShowOverlay={setShowOverlay} ref={stepRef} />
<RepositoryCreateForm
allowedPackageTypes={allowedPackageTypes}
onSuccess={onSuccess}
setShowOverlay={setShowOverlay}
ref={stepRef}
/>
</ModalDialog>
),
[showOverlay]

1
web/src/ar/pages/repository-list/strings/strings.en.yaml
View File

@ -1,5 +1,6 @@
pageHeading: Artifact Registries
newRepository: New Artifact Registry
newRegistry: New Registry
artifactRegistry:
label: Artifact Registry
subLabel: Manage internal packages and external dependencies through a unified registry.

1
web/src/ar/strings/types.ts
View File

@ -94,6 +94,7 @@ export interface StringsMap {
'repositoryList.artifactRegistry.subLabel': string
'repositoryList.deleteModal.contentText': string
'repositoryList.deleteModal.title': string
'repositoryList.newRegistry': string
'repositoryList.newRepository': string
'repositoryList.pageHeading': string
'repositoryList.selectEnvironments': string

60
web/src/ar/views/CreateRegistryButton/CreateRegistryButton.tsx Normal file
View File

@ -0,0 +1,60 @@
/*
* Copyright 2024 Harness, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from 'react'
import { ButtonVariation } from '@harnessio/uicore'
import { useParentComponents } from '@ar/hooks'
import { useStrings } from '@ar/frameworks/strings'
import type { RepositoryPackageType } from '@ar/common/types'
import type { Repository } from '@ar/pages/repository-details/types'
import type { RbacButtonProps } from '@ar/__mocks__/components/RbacButton'
import { useCreateRepositoryModal } from '@ar/pages/repository-details/hooks/useCreateRepositoryModal/useCreateRepositoryModal'
import '@ar/pages/version-details/VersionFactory'
import '@ar/pages/repository-details/RepositoryFactory'
interface CreateRegistryButtonProps extends RbacButtonProps {
onSuccess: (data: Repository) => void
allowedPackageTypes?: RepositoryPackageType[]
}
export default function CreateRegistryButton(props: CreateRegistryButtonProps) {
const { onSuccess, allowedPackageTypes, ...rest } = props
const { RbacButton } = useParentComponents()
const { getString } = useStrings()
const [show, hide] = useCreateRepositoryModal({
onSuccess: data => {
hide()
onSuccess(data)
},
allowedPackageTypes
})
return (
<RbacButton
variation={ButtonVariation.SECONDARY}
icon={'plus'}
iconProps={{ size: 10 }}
text={getString('repositoryList.newRegistry')}
{...rest}
onClick={() => {
show()
}}
/>
)
}