Skip to content

Commit 68f0e33

Browse files
hiderrhiderr
committed
refactoring + fix to design
1 parent b5850be commit 68f0e33

File tree

24 files changed

+672
-509
lines changed

24 files changed

+672
-509
lines changed

‎apps/design-system/src/subjects/views/repo-branches/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export function RepoBranchesView() {
1414
<RepoBranchListView
1515
isLoading={false}
1616
isCreatingBranch={false}
17-
onSubmit={noop}
17+
onSubmit={async () => {}}
1818
useRepoBranchesStore={useRepoBranchesStore}
1919
useTranslationStore={useTranslationStore}
2020
isCreateBranchDialogOpen={isCreateBranchDialogOpen}

‎apps/design-system/src/subjects/views/repo-tags/repo-tags-list.tsx

+4-6
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,12 @@ import { useCallback, useState } from 'react'
22

33
import { noop, useTranslationStore } from '@utils/viewUtils.ts'
44

5-
import { CreateTagDialog, IBranchSelectorStore, RepoTagsListView } from '@harnessio/ui/views'
5+
import { CreateTagDialog, RepoTagsListView } from '@harnessio/ui/views'
66

7-
import { repoBranchesStore } from '../repo-branches/repo-branches-store'
87
import { tagsStore } from './repo-tags-store'
98

109
export const RepoTagsList = () => {
1110
const [openCreateTagDialog, setOpenCreateTagDialog] = useState(false)
12-
const useRepoBranchesStore = useCallback((): IBranchSelectorStore => repoBranchesStore, [])
1311
const useRepoTagsStore = useCallback(() => tagsStore, [])
1412

1513
return (
@@ -30,10 +28,10 @@ export const RepoTagsList = () => {
3028
open={openCreateTagDialog}
3129
onClose={() => setOpenCreateTagDialog(false)}
3230
onSubmit={noop}
33-
branchQuery={''}
34-
setBranchQuery={noop}
35-
useRepoBranchesStore={useRepoBranchesStore}
3631
isLoading={false}
32+
error={''}
33+
selectedBranchOrTag={null}
34+
renderProp={() => null}
3735
/>
3836
</>
3937
)

‎apps/gitness/src/components-v2/create-branch-dialog.tsx

+89
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import { useCallback, useEffect, useState } from 'react'
2+
3+
import { useCreateBranchMutation } from '@harnessio/code-service-client'
4+
import { useToast } from '@harnessio/ui/components'
5+
import {
6+
BranchSelectorListItem,
7+
CreateBranchDialog as CreateBranchDialogComp,
8+
CreateBranchFormFields
9+
} from '@harnessio/ui/views'
10+
11+
import { useGetRepoRef } from '../framework/hooks/useGetRepoPath'
12+
import { useTranslationStore } from '../i18n/stores/i18n-store'
13+
import { BranchSelectorContainer } from './branch-selector-container'
14+
15+
interface CreateBranchDialogProps {
16+
open: boolean
17+
onClose: () => void
18+
}
19+
20+
export const CreateBranchDialog = ({ open, onClose }: CreateBranchDialogProps) => {
21+
const repo_ref = useGetRepoRef()
22+
const { toast } = useToast()
23+
const { t } = useTranslationStore()
24+
const [selectedBranchOrTag, setSelectedBranchOrTag] = useState<BranchSelectorListItem | null>(null)
25+
26+
const [showToast, setShowToast] = useState(false)
27+
const [toastId, setToastId] = useState<string | null>(null)
28+
29+
const [createdBranchName, setCreatedBranchName] = useState<string>('')
30+
31+
const selectBranchOrTag = useCallback((branchTagName: BranchSelectorListItem) => {
32+
setSelectedBranchOrTag(branchTagName)
33+
}, [])
34+
35+
useEffect(() => {
36+
if (!open) {
37+
setShowToast(false)
38+
setToastId(null)
39+
}
40+
41+
if (showToast && !toastId) {
42+
const { id } = toast({
43+
title: t('views:repos.branchCreated'),
44+
description: t('views:repos.branchCreatedDescription', { name: createdBranchName })
45+
})
46+
47+
setToastId(id)
48+
}
49+
}, [createdBranchName, showToast, t, toast, toastId, open])
50+
51+
const {
52+
mutateAsync: createBranch,
53+
error: createBranchError,
54+
isLoading: isCreatingBranch
55+
} = useCreateBranchMutation(
56+
{},
57+
{
58+
onSuccess: data => {
59+
onClose()
60+
setCreatedBranchName(data.body.name ?? '')
61+
setShowToast(true)
62+
}
63+
}
64+
)
65+
66+
const handleCreateBranch = async (data: CreateBranchFormFields) => {
67+
await createBranch({
68+
repo_ref,
69+
body: {
70+
...data
71+
}
72+
})
73+
}
74+
75+
return (
76+
<CreateBranchDialogComp
77+
useTranslationStore={useTranslationStore}
78+
open={open}
79+
onClose={onClose}
80+
selectedBranchOrTag={selectedBranchOrTag}
81+
onSubmit={handleCreateBranch}
82+
isCreatingBranch={isCreatingBranch}
83+
error={createBranchError?.message}
84+
renderProp={() => (
85+
<BranchSelectorContainer onSelectBranchorTag={selectBranchOrTag} selectedBranch={selectedBranchOrTag} />
86+
)}
87+
/>
88+
)
89+
}

‎apps/gitness/src/pages-v2/repo/repo-branch-list.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
import { DeleteAlertDialog } from '@harnessio/ui/components'
1414
import { CreateBranchFormFields, RepoBranchListView } from '@harnessio/ui/views'
1515

16+
import { CreateBranchDialog } from '../../components-v2/create-branch-dialog'
1617
import { useRoutes } from '../../framework/context/NavigationContext'
1718
import { useGetRepoRef } from '../../framework/hooks/useGetRepoPath'
1819
import { useQueryState } from '../../framework/hooks/useQueryState'
@@ -191,6 +192,8 @@ export function RepoBranchesListPage() {
191192
setCreateBranchSearchQuery={setCreateBranchSearchQuery}
192193
/>
193194

195+
<CreateBranchDialog open={isCreateBranchDialogOpen} onClose={() => setCreateBranchDialogOpen(false)} />
196+
194197
<DeleteAlertDialog
195198
open={deleteBranchName !== null}
196199
onClose={handleResetDeleteBranch}

‎apps/gitness/src/pages-v2/repo/repo-sidebar.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import { useTranslationStore } from '../../i18n/stores/i18n-store'
2020
import { PathParams } from '../../RouteDefinitions'
2121
import { orderSortDate } from '../../types'
2222
import { FILE_SEPERATOR, normalizeGitRef, REFS_TAGS_PREFIX } from '../../utils/git-utils'
23-
import { useRepoBranchesStore } from '././stores/repo-branches-store'
23+
import { useRepoBranchesStore } from './stores/repo-branches-store'
2424
import { transformBranchList } from './transform-utils/branch-transform'
2525

2626
/**

‎apps/gitness/src/pages-v2/repo/repo-tags-list-container.tsx

+45-76
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,56 @@
1-
import { useEffect, useState } from 'react'
1+
import { useCallback, useEffect, useState } from 'react'
22
import { useParams } from 'react-router-dom'
33

44
import {
5-
useCreateBranchMutation,
5+
DeleteTagErrorResponse,
66
useCreateTagMutation,
77
useDeleteTagMutation,
8-
useFindRepositoryQuery,
9-
useListBranchesQuery,
108
useListTagsQuery
119
} from '@harnessio/code-service-client'
12-
import { DeleteAlertDialog } from '@harnessio/ui/components'
10+
import { DeleteAlertDialog, DeleteAlertDialogProps } from '@harnessio/ui/components'
1311
import {
12+
BranchSelectorListItem,
1413
CommitTagType,
15-
CreateBranchDialog,
16-
CreateBranchFormFields,
1714
CreateTagDialog,
18-
CreateTagFromFields,
15+
CreateTagFormFields,
1916
RepoTagsListView
2017
} from '@harnessio/ui/views'
2118

19+
import { BranchSelectorContainer } from '../../components-v2/branch-selector-container'
20+
import { CreateBranchDialog } from '../../components-v2/create-branch-dialog'
2221
import { useRoutes } from '../../framework/context/NavigationContext'
2322
import { useGetRepoRef } from '../../framework/hooks/useGetRepoPath'
2423
import { useQueryState } from '../../framework/hooks/useQueryState'
2524
import usePaginationQueryStateWithStore from '../../hooks/use-pagination-query-state-with-store'
2625
import { useTranslationStore } from '../../i18n/stores/i18n-store'
2726
import { PathParams } from '../../RouteDefinitions'
2827
import { PageResponseHeader } from '../../types'
29-
import { useRepoBranchesStore } from './stores/repo-branches-store'
3028
import { useRepoTagsStore } from './stores/repo-tags-store'
31-
import { transformBranchList } from './transform-utils/branch-transform'
3229

3330
export const RepoTagsListContainer = () => {
3431
const repo_ref = useGetRepoRef()
35-
const { setTags, addTag, removeTag, page, setPage, setPaginationFromHeaders } = useRepoTagsStore()
36-
const { setBranchList, setDefaultBranch, setSelectedBranchTag, branchList } = useRepoBranchesStore()
32+
const { page, setPage, setPaginationFromHeaders, setTags } = useRepoTagsStore()
3733
const { spaceId, repoId } = useParams<PathParams>()
3834

3935
const routes = useRoutes()
4036
const [query, setQuery] = useQueryState('query')
41-
const [branchQuery, setBranchQuery] = useState('')
4237

4338
const { queryPage } = usePaginationQueryStateWithStore({ page, setPage })
4439

40+
const [selectedBranchOrTag, setSelectedBranchOrTag] = useState<BranchSelectorListItem | null>(null)
41+
4542
const [openCreateTagDialog, setOpenCreateTagDialog] = useState(false)
4643
const [openCreateBranchDialog, setOpenCreateBranchDialog] = useState(false)
4744
const [deleteTagDialog, setDeleteTagDialog] = useState(false)
4845
const [deleteTagName, setDeleteTagName] = useState<string | null>(null)
4946

50-
const { data: { body: repository } = {} } = useFindRepositoryQuery({ repo_ref: repo_ref })
47+
const [deleteError, setDeleteError] = useState<DeleteAlertDialogProps['error']>(null)
5148

52-
const { data: { body: tagsList, headers } = {}, isLoading: isLoadingTags } = useListTagsQuery({
49+
const {
50+
data: { body: tagsList, headers } = {},
51+
isLoading: isLoadingTags,
52+
refetch: refetchTags
53+
} = useListTagsQuery({
5354
repo_ref: repo_ref,
5455
queryParams: {
5556
query: query ?? '',
@@ -58,20 +59,16 @@ export const RepoTagsListContainer = () => {
5859
}
5960
})
6061

61-
const { data: { body: branches } = {} } = useListBranchesQuery({
62-
queryParams: {
63-
limit: 50,
64-
query: branchQuery ?? ''
65-
},
66-
repo_ref: repo_ref
67-
})
68-
69-
const { mutate: createTag, isLoading: isCreatingTag } = useCreateTagMutation(
62+
const {
63+
mutate: createTag,
64+
isLoading: isCreatingTag,
65+
error: createTagError
66+
} = useCreateTagMutation(
7067
{ repo_ref: repo_ref },
7168
{
72-
onSuccess: data => {
69+
onSuccess: () => {
7370
setOpenCreateTagDialog(false)
74-
addTag(data.body as CommitTagType)
71+
refetchTags()
7572
}
7673
}
7774
)
@@ -81,16 +78,12 @@ export const RepoTagsListContainer = () => {
8178
{
8279
onSuccess: () => {
8380
setDeleteTagDialog(false)
84-
removeTag(deleteTagName ?? '')
85-
}
86-
}
87-
)
88-
89-
const { mutate: createBranch, error: createBranchError } = useCreateBranchMutation(
90-
{},
91-
{
92-
onSuccess: () => {
93-
setOpenCreateBranchDialog(false)
81+
setDeleteError(null)
82+
refetchTags()
83+
},
84+
onError: (error: DeleteTagErrorResponse) => {
85+
const deleteErrorMsg = error?.message || 'An unknown error occurred.'
86+
setDeleteError({ message: deleteErrorMsg })
9487
}
9588
}
9689
)
@@ -101,30 +94,14 @@ export const RepoTagsListContainer = () => {
10194
}
10295
}, [tagsList, setTags])
10396

104-
useEffect(() => {
105-
if (branches) {
106-
setBranchList(transformBranchList(branches, repository?.default_branch))
107-
}
108-
}, [branches, setBranchList, repository])
109-
11097
useEffect(() => {
11198
setPaginationFromHeaders(
112-
parseInt(headers?.get(PageResponseHeader.xNextPage) || ''),
113-
parseInt(headers?.get(PageResponseHeader.xPrevPage) || '')
99+
parseInt(headers?.get(PageResponseHeader.xNextPage) ?? '0'),
100+
parseInt(headers?.get(PageResponseHeader.xPrevPage) ?? '0')
114101
)
115102
}, [headers, setPaginationFromHeaders])
116103

117-
useEffect(() => {
118-
const defaultBranch = branchList?.find(branch => branch.default)
119-
setSelectedBranchTag({
120-
name: defaultBranch?.name || repository?.default_branch || '',
121-
sha: defaultBranch?.sha || '',
122-
default: true
123-
})
124-
setDefaultBranch(repository?.default_branch ?? '')
125-
}, [branchList, repository?.default_branch])
126-
127-
const onSubmit = (data: CreateTagFromFields) => {
104+
const onSubmit = (data: CreateTagFormFields) => {
128105
createTag({
129106
body: {
130107
...data
@@ -139,14 +116,12 @@ export const RepoTagsListContainer = () => {
139116
})
140117
}
141118

142-
const handleCreateBranch = (data: CreateBranchFormFields) => {
143-
createBranch({
144-
repo_ref,
145-
body: {
146-
...data
147-
}
148-
})
149-
}
119+
const selectBranchOrTag = useCallback(
120+
(branchTagName: BranchSelectorListItem) => {
121+
setSelectedBranchOrTag(branchTagName)
122+
},
123+
[repoId, spaceId]
124+
)
150125

151126
return (
152127
<>
@@ -169,25 +144,19 @@ export const RepoTagsListContainer = () => {
169144
open={openCreateTagDialog}
170145
onClose={() => setOpenCreateTagDialog(false)}
171146
onSubmit={onSubmit}
172-
branchQuery={branchQuery}
173-
setBranchQuery={setBranchQuery}
174-
useRepoBranchesStore={useRepoBranchesStore}
175147
isLoading={isCreatingTag}
148+
error={createTagError?.message}
149+
selectedBranchOrTag={selectedBranchOrTag}
150+
renderProp={() => (
151+
<BranchSelectorContainer onSelectBranchorTag={selectBranchOrTag} selectedBranch={selectedBranchOrTag} />
152+
)}
176153
/>
177-
<CreateBranchDialog
178-
open={openCreateBranchDialog}
179-
onClose={() => setOpenCreateBranchDialog(false)}
180-
useRepoBranchesStore={useRepoBranchesStore}
181-
onSubmit={handleCreateBranch}
182-
useTranslationStore={useTranslationStore}
183-
handleChangeSearchValue={setBranchQuery}
184-
error={createBranchError?.message}
185-
/>
154+
<CreateBranchDialog open={openCreateBranchDialog} onClose={() => setOpenCreateBranchDialog(false)} />
186155
<DeleteAlertDialog
187156
open={deleteTagDialog}
188157
onClose={() => setDeleteTagDialog(false)}
189158
deleteFn={onDeleteTag}
190-
error={{ type: '', message: '' }}
159+
error={deleteError}
191160
type="tag"
192161
identifier={deleteTagName ?? undefined}
193162
isLoading={isDeletingTag}

‎packages/ui/.gitignore

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
coverage/
22
dist
3-
node_modules
3+
node_modules

0 commit comments

Comments
 (0)