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

web/config/moduleFederation.config.js

@@ -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'],

web/src/ar/app/App.tsx

@@ -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>
+                {props.children ?? (
-                  <Suspense
+                  <NavComponent>
-                    fallback={
+                    <Suspense
-                      <Page.Body className={css.pageBody}>
+                      fallback={
-                        <Page.Spinner fixed={false} />
+                        <Page.Body className={css.pageBody}>
-                      </Page.Body>
+                          <Page.Spinner fixed={false} />
-                    }>
+                        </Page.Body>
-                    <RouteDestinations />
+                      }>
-                  </Suspense>
+                      <RouteDestinations />
-                </NavComponent>
+                    </Suspense>
+                  </NavComponent>
+                )}
               </ModalProvider>
             </ParentProvider>
           </StringsContextProvider>

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

@@ -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>
         )
       }}

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

@@ -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]

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

@@ -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.

web/src/ar/strings/types.ts

@@ -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

web/src/ar/views/CreateRegistryButton/CreateRegistryButton.tsx

@@ -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()
+      }}
+    />
+  )
+}