Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(ui): align job info view in context providers #3629

Merged
merged 4 commits into from
Dec 30, 2024
Merged

fix(ui): align job info view in context providers #3629

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e5c7be5
fix(ui): align job info view in context providers
liangfung Dec 28, 2024
90d4856
update: table layout
liangfung Dec 29, 2024
aa45a28
[autofix.ci] apply automated fixes
autofix-ci[bot] Dec 30, 2024
9b38458
update
liangfung Dec 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion ee/tabby-ui/app/(dashboard)/components/dashboard-main.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading