Skip to content

Commit

Permalink
fix(ui): align job info view in context providers (#3629)
Browse files Browse the repository at this point in the history 
* fix(ui): align job info view in context providers

* update: table layout

* [autofix.ci] apply automated fixes

* update

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
  • Loading branch information
@liangfung @autofix-ci
liangfung and autofix-ci[bot] authored Dec 30, 2024
1 parent c8cc754 commit 652afaf
Show file tree
Hide file tree
Showing 8 changed files with 317 additions and 306 deletions.
2 changes: 1 addition & 1 deletion ee/tabby-ui/app/(dashboard)/components/dashboard-main.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export default function MainContent({
}, [pathname])

return (
<SidebarInset>
<SidebarInset className="overflow-x-hidden">
{/* Wraps right hand side into ScrollArea, making scroll bar consistent across all browsers */}
<ScrollArea ref={scroller} style={style}>
<Header />
Expand Down
2 changes: 1 addition & 1 deletion ee/tabby-ui/app/(dashboard)/profile/components/change-name.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ const ChangeNameForm: React.FC<ChangeNameFormProps> = ({
<FormItem>
<FormLabel>Name</FormLabel>
<FormControl>
<Input className="w-[350px]" {...field} />
<Input className="w-full md:w-[350px]" {...field} />
</FormControl>
<FormMessage />
</FormItem>
Expand Down
6 changes: 3 additions & 3 deletions ee/tabby-ui/app/(dashboard)/profile/components/change-password.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ const ChangePasswordForm: React.FC<ChangePasswordFormProps> = ({
<FormLabel required>Old password</FormLabel>
<FormControl>
<Input
className="w-[350px]"
className="w-full md:w-[350px]"
autoCapitalize="none"
autoComplete="off"
autoCorrect="off"
Expand All @@ -117,7 +117,7 @@ const ChangePasswordForm: React.FC<ChangePasswordFormProps> = ({
<FormLabel required>New password</FormLabel>
<FormControl>
<Input
className="w-[350px]"
className="w-full md:w-[350px]"
autoCapitalize="none"
autoComplete="off"
autoCorrect="off"
Expand Down Expand Up @@ -145,7 +145,7 @@ const ChangePasswordForm: React.FC<ChangePasswordFormProps> = ({
<FormLabel required>Confirm new password</FormLabel>
<FormControl>
<Input
className="w-[350px]"
className="w-full md:w-[350px]"
autoCapitalize="none"
autoComplete="off"
autoCorrect="off"
Expand Down
2 changes: 1 addition & 1 deletion ee/tabby-ui/app/(dashboard)/profile/components/email.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export const Email = () => {
<div>
<Input
disabled
className="w-[350px]"
className="w-full md:w-[350px]"
value={data?.me?.email}
onChange={noop}
/>
Expand Down
209 changes: 106 additions & 103 deletions ...dashboard)/settings/(integrations)/providers/[kind]/detail/components/provider-detail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -284,111 +284,114 @@ const ActiveRepoTable: React.FC<{
return (
<>
<LoadingWrapper loading={fetching}>
<Table className="table-fixed">
<TableHeader>
<TableRow>
<TableHead className="w-[25%]">Name</TableHead>
<TableHead className="w-[35%]">URL</TableHead>
<TableHead className="w-[140px]">Access</TableHead>
<TableHead className="w-[180px]">Job</TableHead>
<TableHead className="w-[60px] text-right">
<Button
variant="outline"
size="icon"
className="shadow-none"
onClick={e => setOpen(true)}
>
<IconPlus />
</Button>
</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{activeRepos?.length || recentlyActivatedRepositories?.length ? (
<>
{recentlyActivatedRepositories?.map(x => {
return (
<TableRow key={x.node.id} className="!bg-muted/80">
<TableCell className="break-all lg:break-words">
{x.node.displayName}
</TableCell>
<TableCell className="break-all lg:break-words">
{x.node.gitUrl}
</TableCell>
<TableCell></TableCell>
<TableCell></TableCell>
<TableCell className="flex justify-end">
<div
className={buttonVariants({
variant: 'ghost',
size: 'icon'
})}
>
<IconSpinner />
</div>
</TableCell>
</TableRow>
)
})}
{activeRepos?.map(x => {
return (
<TableRow key={x.node.id}>
<TableCell className="break-all lg:break-words">
{x.node.displayName}
</TableCell>
<TableCell className="break-all lg:break-words">
{x.node.gitUrl}
</TableCell>
<TableCell className="break-all lg:break-words">
<AccessPolicyView
sourceId={x.node.sourceId}
sourceName={x.node.displayName}
editable
fetchingUserGroups={fetchingUserGroups}
userGroups={userGroupData?.userGroups}
/>
</TableCell>
<TableCell>
<JobInfoView
jobInfo={x.node.jobInfo}
onTrigger={() =>
handleTriggerJobRun(x.node.jobInfo.command)
}
/>
</TableCell>
<TableCell className="text-right">
<Button
size="icon"
variant="hover-destructive"
onClick={e =>
handleDelete(x, activeRepos?.length === 1)
}
>
<IconTrash />
</Button>
</TableCell>
</TableRow>
)
})}
</>
) : (
<ScrollArea>
<Table className="min-w-[400px]">
<TableHeader>
<TableRow>
<TableCell
colSpan={5}
className="h-[100px] text-center hover:bg-background"
>
<div className="mt-4 flex flex-col items-center gap-4">
<span>No repositories</span>
<Button onClick={e => setOpen(true)} className="gap-1">
<IconPlus />
Add
</Button>
</div>
</TableCell>
<TableHead className="w-[25%]">Name</TableHead>
<TableHead className="w-[35%]">URL</TableHead>
<TableHead className="w-[140px]">Access</TableHead>
<TableHead>Job</TableHead>
<TableHead className="w-[60px] text-right">
<Button
variant="outline"
size="icon"
className="shadow-none"
onClick={e => setOpen(true)}
>
<IconPlus />
</Button>
</TableHead>
</TableRow>
)}
</TableBody>
</Table>
</TableHeader>
<TableBody>
{activeRepos?.length || recentlyActivatedRepositories?.length ? (
<>
{recentlyActivatedRepositories?.map(x => {
return (
<TableRow key={x.node.id} className="!bg-muted/80">
<TableCell className="break-all lg:break-words">
{x.node.displayName}
</TableCell>
<TableCell className="break-all lg:break-words">
{x.node.gitUrl}
</TableCell>
<TableCell></TableCell>
<TableCell></TableCell>
<TableCell className="flex justify-end">
<div
className={buttonVariants({
variant: 'ghost',
size: 'icon'
})}
>
<IconSpinner />
</div>
</TableCell>
</TableRow>
)
})}
{activeRepos?.map(x => {
return (
<TableRow key={x.node.id}>
<TableCell className="break-all lg:break-words">
{x.node.displayName}
</TableCell>
<TableCell className="break-all lg:break-words">
{x.node.gitUrl}
</TableCell>
<TableCell className="break-all lg:break-words">
<AccessPolicyView
sourceId={x.node.sourceId}
sourceName={x.node.displayName}
editable
fetchingUserGroups={fetchingUserGroups}
userGroups={userGroupData?.userGroups}
/>
</TableCell>
<TableCell>
<JobInfoView
jobInfo={x.node.jobInfo}
onTrigger={() =>
handleTriggerJobRun(x.node.jobInfo.command)
}
/>
</TableCell>
<TableCell className="text-right">
<Button
size="icon"
variant="hover-destructive"
onClick={e =>
handleDelete(x, activeRepos?.length === 1)
}
>
<IconTrash />
</Button>
</TableCell>
</TableRow>
)
})}
</>
) : (
<TableRow>
<TableCell
colSpan={5}
className="h-[100px] text-center hover:bg-background"
>
<div className="mt-4 flex flex-col items-center gap-4">
<span>No repositories</span>
<Button onClick={e => setOpen(true)} className="gap-1">
<IconPlus />
Add
</Button>
</div>
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
<ScrollBar orientation="horizontal" />
</ScrollArea>
{(page > 1 || pageInfo?.hasNextPage) && (
<div className="mt-2 flex justify-end">
<div className="flex w-[100px] items-center justify-center text-sm font-medium">
Expand Down
2 changes: 1 addition & 1 deletion ee/tabby-ui/app/(dashboard)/settings/(integrations)/providers/components/job-trigger.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ export function JobInfoView(props: JobInfoProps) {

return (
<div className={cn('flex items-center gap-1', className)}>
<LastJobRunInfo jobInfo={jobInfo} className="hidden lg:block" />
<LastJobRunInfo jobInfo={jobInfo} className="hidden lg:block lg:w-32" />
<JobTrigger
onTrigger={onTrigger}
isPending={isJobPending}
Expand Down
Loading

0 comments on commit 652afaf

Please sign in to comment.