Skip to content

Commit

Permalink
feat(ui): add sync repositories job status mock
Browse files Browse the repository at this point in the history
  • Loading branch information
@liangfung
liangfung committed Jun 3, 2024
1 parent a4ba051 commit 02e631b
Show file tree
Hide file tree
Showing 3 changed files with 186 additions and 21 deletions.
76 changes: 74 additions & 2 deletions ...ashboard)/settings/(integrations)/repository/[kind]/detail/components/provider-detail.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
'use client'

import React, { useEffect, useState } from 'react'
import Link from 'next/link'
import { useRouter, useSearchParams } from 'next/navigation'
import moment from 'moment'
import { toast } from 'sonner'
import { TypedDocumentNode, useQuery } from 'urql'

Expand All @@ -28,6 +30,7 @@ import {
listGitlabSelfHostedRepositories,
listGitlabSelfHostedRepositoryProviders
} from '@/lib/tabby/query'
import { cn } from '@/lib/utils'
import { Badge } from '@/components/ui/badge'
import { Button, buttonVariants } from '@/components/ui/button'
import { CardContent, CardTitle } from '@/components/ui/card'
Expand All @@ -42,8 +45,10 @@ import {
import {
IconChevronLeft,
IconChevronRight,
IconCirclePlay,
IconPlus,
IconSpinner,
IconStop,
IconTrash
} from '@/components/ui/icons'
import {
Expand All @@ -54,6 +59,12 @@ import {
TableHeader,
TableRow
} from '@/components/ui/table'
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger
} from '@/components/ui/tooltip'
import LoadingWrapper from '@/components/loading-wrapper'
import { ListSkeleton } from '@/components/skeleton'

Expand All @@ -68,6 +79,7 @@ import AddRepositoryForm from './add-repository-form'
import { UpdateProviderForm } from './update-provider-form'

const PAGE_SIZE = DEFAULT_PAGE_SIZE
const MOCK_START_TIME = moment().format('YYYY-MM-DD HH:mm')

type Repositories = Array<{
cursor: string
Expand Down Expand Up @@ -405,7 +417,8 @@ const ActiveRepoTable: React.FC<{
<TableRow>
<TableHead className="w-[25%]">Name</TableHead>
<TableHead className="w-[45%]">URL</TableHead>
<TableHead className="text-right">
<TableHead>Job</TableHead>
<TableHead className="text-right w-[100px]">
<Dialog open={open} onOpenChange={setOpen}>
<DialogContent className="top-[20vh]">
<DialogHeader className="gap-3">
Expand Down Expand Up @@ -453,11 +466,70 @@ const ActiveRepoTable: React.FC<{
</TableRow>
)
})}
{activeRepos?.map(x => {
{activeRepos?.map((x, index) => {
return (
<TableRow key={x.node.id}>
<TableCell>{x.node.name}</TableCell>
<TableCell>{x.node.gitUrl}</TableCell>
<TableCell>
<div className="flex gap-2.5 items-center">
<TooltipProvider delayDuration={0}>
<Tooltip>
<TooltipTrigger asChild>
<Link
href=""
className={cn(
'flex h-8 w-8 items-center justify-center rounded text-xs text-white hover:opacity-70',
{
'bg-blue-600': index === 0,
'bg-green-600': index === 1,
'bg-red-600': index === 2
}
)}
>
{index === 0 ? <IconSpinner /> : '20s'}
</Link>
</TooltipTrigger>
<TooltipContent>
<p>{MOCK_START_TIME}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>

<div className="flex items-center gap-1.5">
{index !== 0 && (
<Tooltip>
<TooltipTrigger asChild>
<Button size="icon" variant="ghost">
<IconCirclePlay
strokeWidth={1}
className="w-5 h-5"
/>
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Run</p>
</TooltipContent>
</Tooltip>
)}
{index === 0 && (
<Tooltip>
<TooltipTrigger asChild>
<Button size="icon" variant="ghost">
<IconStop
strokeWidth={1}
className="w-5 h-5"
/>
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Stop</p>
</TooltipContent>
</Tooltip>
)}
</div>
</div>
</TableCell>
<TableCell className="flex justify-end">
<div className="flex gap-1">
<Button
Expand Down
83 changes: 79 additions & 4 deletions ...ui/app/(dashboard)/settings/(integrations)/repository/git/components/repository-table.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
'use client'

import React from 'react'
import Link from 'next/link'
import moment from 'moment'
import { toast } from 'sonner'
import { useClient, useQuery } from 'urql'

Expand All @@ -9,8 +11,14 @@ import { graphql } from '@/lib/gql/generates'
import { GitRepositoriesQueryVariables } from '@/lib/gql/generates/graphql'
import { useMutation } from '@/lib/tabby/gql'
import { listRepositories } from '@/lib/tabby/query'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'
import { IconTrash } from '@/components/ui/icons'
import {
IconCirclePlay,
IconSpinner,
IconStop,
IconTrash
} from '@/components/ui/icons'
import {
Pagination,
PaginationContent,
Expand All @@ -26,6 +34,12 @@ import {
TableHeader,
TableRow
} from '@/components/ui/table'
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger
} from '@/components/ui/tooltip'
import LoadingWrapper from '@/components/loading-wrapper'

const deleteRepositoryMutation = graphql(/* GraphQL */ `
Expand All @@ -35,6 +49,7 @@ const deleteRepositoryMutation = graphql(/* GraphQL */ `
`)

const PAGE_SIZE = DEFAULT_PAGE_SIZE
const MOCK_START_TIME = moment().format('YYYY-MM-DD HH:mm')
export default function RepositoryTable() {
const client = useClient()
const [{ data, fetching }] = useQuery({
Expand Down Expand Up @@ -116,24 +131,84 @@ export default function RepositoryTable() {
<TableHeader>
<TableRow>
<TableHead className="w-[25%]">Name</TableHead>
<TableHead>Git URL</TableHead>
<TableHead className="w-[45%]">Git URL</TableHead>
<TableHead>Job</TableHead>
<TableHead className="w-[100px]"></TableHead>
</TableRow>
</TableHeader>
<TableBody>
{!currentPageRepos?.length && currentPage === 1 ? (
<TableRow>
<TableCell colSpan={3} className="h-[100px] text-center">
<TableCell colSpan={4} className="h-[100px] text-center">
No Data
</TableCell>
</TableRow>
) : (
<>
{currentPageRepos?.map(x => {
{currentPageRepos?.map((x, index) => {
return (
<TableRow key={x.node.id}>
<TableCell className="truncate">{x.node.name}</TableCell>
<TableCell className="truncate">{x.node.gitUrl}</TableCell>
<TableCell className="truncate">
<div className="flex gap-2.5 items-center">
<TooltipProvider delayDuration={0}>
<Tooltip>
<TooltipTrigger asChild>
<Link
href=""
className={cn(
'flex h-8 w-8 items-center justify-center rounded text-xs text-white hover:opacity-70',
{
'bg-blue-600': index === 0,
'bg-green-600': index === 1,
'bg-red-600': index === 2
}
)}
>
{index === 0 ? <IconSpinner /> : '20s'}
</Link>
</TooltipTrigger>
<TooltipContent>
<p>{MOCK_START_TIME}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>

<div className="flex items-center gap-1.5">
{index !== 0 && (
<Tooltip>
<TooltipTrigger asChild>
<Button size="icon" variant="ghost">
<IconCirclePlay
strokeWidth={1}
className="w-5 h-5"
/>
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Run</p>
</TooltipContent>
</Tooltip>
)}
{index === 0 && (
<Tooltip>
<TooltipTrigger asChild>
<Button size="icon" variant="ghost">
<IconStop
strokeWidth={1}
className="w-5 h-5"
/>
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Stop</p>
</TooltipContent>
</Tooltip>
)}
</div>
</div>
</TableCell>
<TableCell className="flex justify-end">
<div className="flex gap-1">
<Button
Expand Down
48 changes: 33 additions & 15 deletions ee/tabby-ui/components/ui/icons.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,16 @@

import * as React from 'react'
// FIXME(wwayne): Review each icons and consider re-export from `lucide-react`.
import { BookOpenText, ChevronsDownUp, GitFork, Mail, Star } from 'lucide-react'
import {
BookOpenText,
ChevronsDownUp,
CirclePlay,
CircleStop,
GitFork,
Mail,
Pause,
Star
} from 'lucide-react'

import { cn } from '@/lib/utils'

Expand Down Expand Up @@ -346,19 +355,12 @@ function IconRefresh({ className, ...props }: React.ComponentProps<'svg'>) {
)
}

function IconStop({ className, ...props }: React.ComponentProps<'svg'>) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
fill="currentColor"
className={cn('h-4 w-4', className)}
{...props}
>
<path d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24Zm0 192a88 88 0 1 1 88-88 88.1 88.1 0 0 1-88 88Zm24-120h-48a8 8 0 0 0-8 8v48a8 8 0 0 0 8 8h48a8 8 0 0 0 8-8v-48a8 8 0 0 0-8-8Zm-8 48h-32v-32h32Z" />
</svg>
)
}
const IconStop = ({
className,
...props
}: React.ComponentProps<typeof CircleStop>) => (
<CircleStop className={cn('h4 w-4', className)} {...props} />
)

function IconSidebar({ className, ...props }: React.ComponentProps<'svg'>) {
return (
Expand Down Expand Up @@ -1450,6 +1452,20 @@ function IconJetBrains({ className, ...props }: React.ComponentProps<'svg'>) {
)
}

const IconCirclePlay = ({
className,
...props
}: React.ComponentProps<typeof CirclePlay>) => (
<CirclePlay className={cn('h4 w-4', className)} {...props} />
)

const IconPause = ({
className,
...props
}: React.ComponentProps<typeof Pause>) => (
<Pause className={cn('h4 w-4', className)} {...props} />
)

export {
IconEdit,
IconNextChat,
Expand Down Expand Up @@ -1525,5 +1541,7 @@ export {
IconStar,
IconGitFork,
IconVSCode,
IconJetBrains
IconJetBrains,
IconCirclePlay,
IconPause
}

0 comments on commit 02e631b

Please sign in to comment.