feat: add create repo page

apps/gitness/src/App.tsx

@@ -37,6 +37,7 @@ import PullRequestLayout from './layouts/PullRequestLayout'
 import RepoLayoutV1 from './layouts/RepoLayout'
 import SandboxPullRequestListPage from './pages-v2/pull-request/pull-request-list'
 import { RepoCode } from './pages-v2/repo/repo-code'
+import { CreateRepo } from './pages-v2/repo/repo-create-page'
 import RepoLayout from './pages-v2/repo/repo-layout'
 import ReposListPage from './pages-v2/repo/repo-list'
 import { RepoSidebar } from './pages-v2/repo/repo-sidebar'
@@ -68,7 +69,7 @@ import PullRequestListPage from './pages/pull-request/pull-request-list-page'
 import { RepoBranchesListPage } from './pages/repo/repo-branch-list'
 import { RepoBranchSettingsRulesPageContainer } from './pages/repo/repo-branch-rules-container'
 import RepoCommitsPage from './pages/repo/repo-commits'
-import { CreateRepo } from './pages/repo/repo-create-page'
+import { CreateRepoV1 } from './pages/repo/repo-create-page'
 import { RepoFiles } from './pages/repo/repo-files'
 import { RepoHeader } from './pages/repo/repo-header'
 import { RepoImportContainer } from './pages/repo/repo-import-container'
@@ -200,6 +201,14 @@ export default function App() {
             }
           ]
         },
+        {
+          path: ':spaceId/repos/create',
+          element: <CreateRepo />
+        },
+        {
+          path: ':spaceId/repos/import',
+          element: <RepoImportContainer />
+        },
         {
           path: 'theme',
           element: <ProfileSettingsThemePage />
@@ -464,7 +473,7 @@ export default function App() {
             },
             {
               path: ':spaceId/repos/create',
-              element: <CreateRepo />
+              element: <CreateRepoV1 />
             },
             {
               path: ':spaceId/repos/import',

apps/gitness/src/pages-v2/repo/repo-create-page.tsx

@@ -0,0 +1,73 @@
+import { useNavigate } from 'react-router-dom'
+
+import {
+  CreateRepositoryErrorResponse,
+  OpenapiCreateRepositoryRequest,
+  useCreateRepositoryMutation,
+  useListGitignoreQuery,
+  useListLicensesQuery
+} from '@harnessio/code-service-client'
+import { toast, Toaster } from '@harnessio/ui/components'
+import { FormFields, RepoCreatePage as RepoCreatePageView } from '@harnessio/ui/views'
+
+import { useGetSpaceURLParam } from '../../framework/hooks/useGetSpaceParam'
+
+export const CreateRepo = () => {
+  const createRepositoryMutation = useCreateRepositoryMutation({})
+  const spaceId = useGetSpaceURLParam()
+  const navigate = useNavigate()
+
+  const onSubmit = (data: FormFields) => {
+    const repositoryRequest: OpenapiCreateRepositoryRequest = {
+      default_branch: 'main',
+      parent_ref: spaceId,
+      description: data.description,
+      git_ignore: data.gitignore,
+      license: data.license,
+      is_public: data.access === '1',
+      readme: true,
+      identifier: data.name
+    }
+
+    createRepositoryMutation.mutate(
+      {
+        queryParams: {},
+        body: repositoryRequest
+      },
+      {
+        onSuccess: ({ body: data }) => {
+          navigate(`/${spaceId}/repos/${data?.identifier}`)
+        },
+        onError: (error: CreateRepositoryErrorResponse) => {
+          const message = error.message || 'An unknown error occurred.'
+          toast({
+            title: message,
+            variant: 'destructive'
+          })
+        }
+      }
+    )
+  }
+
+  const { data: { body: gitIgnoreOptions } = {} } = useListGitignoreQuery({})
+
+  const { data: { body: licenseOptions } = {} } = useListLicensesQuery({})
+
+  const onCancel = () => {
+    navigate(`/${spaceId}/repos`)
+  }
+
+  return (
+    <>
+      <RepoCreatePageView
+        onFormSubmit={onSubmit}
+        onFormCancel={onCancel}
+        isLoading={createRepositoryMutation.isLoading}
+        isSuccess={createRepositoryMutation.isSuccess}
+        gitIgnoreOptions={gitIgnoreOptions}
+        licenseOptions={licenseOptions}
+      />
+      <Toaster />
+    </>
+  )
+}

apps/gitness/src/pages/repo/repo-create-page.tsx

@@ -12,7 +12,7 @@ import { FormFields, RepoCreatePageForm } from '@harnessio/views'
 
 import { useGetSpaceURLParam } from '../../framework/hooks/useGetSpaceParam'
 
-export const CreateRepo = () => {
+export const CreateRepoV1 = () => {
   const createRepositoryMutation = useCreateRepositoryMutation({})
   const spaceId = useGetSpaceURLParam()
   const navigate = useNavigate()

packages/canary/src/index.ts

@@ -38,12 +38,9 @@ export * from './components/switch'
 export * from './components/table'
 export * from './components/tabs'
 export * from './components/text'
-export * from './components/toast'
-// export * from './components/toaster' Duplicate with sooner! Use sooner's Toaster instead
 export * from './components/toggle-group'
 export * from './components/toggle'
 export * from './components/tooltip'
-export * from './components/use-toast'
 export * from './lib/utils'
 export * from './lib/CanaryOutletFactory'
 export * from './components/treeview'

packages/ui/src/components/badge.tsx

@@ -17,24 +17,24 @@ enum BadgesHoverStates {
 }
 
 const badgeVariants = cva(
-  'focus:ring-ring inline-flex items-center rounded-md border transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2',
+  'inline-flex items-center rounded-md border transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/80 border-transparent shadow',
-        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent',
-        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent shadow',
+        default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
+        secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive: 'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
         outline: 'text-foreground'
       },
       size: {
         default: 'px-2.5 py-0.5 text-xs font-semibold',
         lg: 'px-3 py-1 text-xs font-normal',
-        sm: 'text-12 h-5 px-1 leading-none',
-        xs: 'text-11 px-1.5 py-0 font-light',
+        sm: 'h-5 px-1 text-12 leading-none',
+        xs: 'px-1.5 py-0 text-11 font-light',
         // TODO: Consider switching size variants to numeric values
         // Numeric size variants (like '18') provide clearer context about actual dimensions
         // compared to abstract sizes (xs, sm, lg).
-        '18': 'text-12 h-[18px] px-2'
+        '18': 'h-[18px] px-2 text-12'
       },
       borderRadius: {
         default: '',

packages/ui/src/components/button-group.tsx

@@ -1,16 +1,22 @@
-import React from 'react'
+import { ReactNode } from 'react'
 
 import { cn } from '@utils/cn'
 
 interface ButtonGroupProps {
-  children: React.ReactNode
+  children: ReactNode
   direction?: 'horizontal' | 'vertical'
   className?: string
   spacing?: string
   verticalAlign?: string
 }
 
-function Root({ children, direction = 'horizontal', className, spacing = '4', verticalAlign }: ButtonGroupProps) {
+export function ButtonGroup({
+  children,
+  direction = 'horizontal',
+  className,
+  spacing = '4',
+  verticalAlign
+}: ButtonGroupProps) {
   const gapClass = `gap-${spacing}`
   const verticalAlignClass = verticalAlign ? `items-${verticalAlign}` : ''
 
@@ -20,5 +26,3 @@ function Root({ children, direction = 'horizontal', className, spacing = '4', ve
     </div>
   )
 }
-
-export { Root }

packages/ui/src/components/button.tsx

@@ -1,20 +1,22 @@
-import * as React from 'react'
+import { ButtonHTMLAttributes, forwardRef, ReactNode } from 'react'
 
 import { Slot } from '@radix-ui/react-slot'
 import { CanaryOutletFactory, CanaryOutletName } from '@utils/CanaryOutletFactory'
 import { cn } from '@utils/cn'
 import { cva, type VariantProps } from 'class-variance-authority'
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50',
+  'inline-flex items-center justify-center whitespace-nowrap rounded text-sm font-medium transition-colors disabled:cursor-not-allowed',
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90 shadow',
-        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm',
-        outline: 'border-borders-2 bg-transparent hover:bg-accent hover:text-accent-foreground border shadow-sm',
-        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-sm',
-        tertiary: 'bg-tertiary text-secondary-foreground hover:bg-tertiary/80 shadow-sm',
+        default:
+          'bg-background-5 text-foreground-6 hover:bg-background-10 disabled:bg-background-6 disabled:text-foreground-9',
+        destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        outline:
+          'border border-borders-2 bg-transparent text-foreground-2 hover:border-borders-6 hover:text-foreground-8',
+        secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        tertiary: 'bg-tertiary text-secondary-foreground shadow-sm hover:bg-tertiary/80',
         ghost: 'hover:bg-background-12 hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline',
         link_accent: 'text-foreground-accent underline-offset-4 hover:underline',
@@ -64,17 +66,15 @@ const buttonVariants = cva(
   }
 )
 
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
   asChild?: boolean
   loading?: boolean
-  spinner?: React.ReactNode
-  dropdown?: React.ReactNode
+  spinner?: ReactNode
+  dropdown?: ReactNode
   gradientType?: string
 }
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (
     {
       className,

packages/ui/src/components/card.tsx

@@ -3,7 +3,7 @@ import { forwardRef, HTMLAttributes } from 'react'
 import { cn } from '@utils/cn'
 import { cva, type VariantProps } from 'class-variance-authority'
 
-const cardVariants = cva('bg-card text-card-foreground rounded-lg border shadow', {
+const cardVariants = cva('rounded-lg border bg-card text-card-foreground shadow', {
   variants: {
     variant: {
       default: '',

packages/ui/src/components/dialog.tsx

@@ -42,7 +42,7 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
         <Cross2Icon className="size-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>

packages/ui/src/components/dropdown-menu.tsx

@@ -126,9 +126,9 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     checked={checked}
     {...props}
   >
-    <span className="border-borders-9 group-data-[state=checked]:border-icons-2 absolute left-2 flex size-4 items-center justify-center rounded-sm border">
-      <DropdownMenuPrimitive.ItemIndicator className="bg-icons-2 flex size-full items-center justify-center">
-        <Icon className="text-icons-5 h-[7px]" name="checkbox" />
+    <span className="absolute left-2 flex size-4 items-center justify-center rounded-sm border border-borders-9 group-data-[state=checked]:border-icons-2">
+      <DropdownMenuPrimitive.ItemIndicator className="flex size-full items-center justify-center bg-icons-2">
+        <Icon className="h-[7px] text-icons-5" name="checkbox" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     <span className="text-14 text-foreground-8">{children}</span>