Elgato_dark/console
1
0
Fork 0
mirror of https://github.com/graphql-hive/console synced 2026-05-23 17:18:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix: identical page sizes and no flashing (#5205)

Browse source
This commit is contained in:
Laurin Quast 2024-07-19 09:13:53 +02:00 committed by GitHub
parent ca6f64cfdd
commit fbdd7e47c6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
14 changed files with 109 additions and 118 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/web/app/src/components/layouts/organization.tsx
View file

@ -207,7 +207,7 @@ export function OrganizationLayout({
) : null}
</div>
</div>
<div className="container pb-7">
<div className="container min-h-[var(--content-height)] pb-7">
{currentOrganization ? (
<>
<ProPlanBilling organization={currentOrganization} />

2
packages/web/app/src/components/layouts/project.tsx
View file

@ -191,7 +191,7 @@ export function ProjectLayout({
/>
</div>
</div>
<div className="container h-full pb-7">
<div className="container min-h-[var(--content-height)] pb-7">
<div className={className}>{children}</div>
</div>
</>

4
packages/web/app/src/components/layouts/target.tsx
View file

@ -269,7 +269,9 @@ export const TargetLayout = ({
) : null}
</div>
</div>
<div className={cn('container pb-7', className)}>{children}</div>
<div className={cn('container min-h-[var(--content-height)] pb-7', className)}>
{children}
</div>
</>
);
};

10
packages/web/app/src/components/ui/dotted-background.tsx
View file

@ -1,8 +1,14 @@
import React from 'react';
import { clsx } from 'clsx';
export function DottedBackground(props: { children: React.ReactNode }) {
export function DottedBackground(props: { children: React.ReactNode; className?: string }) {
return (
<div className="bg-dot-white/[0.2] relative flex size-full items-center justify-center bg-black">
<div
className={clsx(
'bg-dot-white/[0.2] relative flex size-full items-center justify-center bg-black',
props.className,
)}
>
<div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-black [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)]" />
{props.children}
</div>

5
packages/web/app/src/index.css
View file

@ -84,11 +84,6 @@
@apply border-border;
}
html,
body {
height: 100%;
}
body {
@apply text-foreground bg-[#030711];
font-feature-settings:

5
packages/web/app/src/pages/auth.tsx
View file

@ -23,15 +23,14 @@ export function AuthPage() {
return (
<>
<Meta title="Welcome" />
<div className="size-full">
<>
{session.loading ? (
<div className="flex size-full items-center justify-center">
<div className="flex min-h-[100vh] items-center justify-center">
<HiveLogo animated={false} className="size-8 animate-pulse" />
</div>
) : (
<div className="grid h-full items-center justify-center md:grid-cols-2 lg:max-w-none lg:grid-cols-3 lg:px-0">
<div className="grid h-full min-h-[100vh] items-center justify-center md:grid-cols-2 lg:max-w-none lg:grid-cols-3 lg:px-0">
<div className="bg-muted relative hidden h-full flex-col p-10 text-white lg:flex dark:border-r">
<div className="absolute inset-0 bg-[#101014]" />
<div className="relative z-20 flex items-center text-lg font-medium">

2
packages/web/app/src/pages/organization-join.tsx
View file

@ -92,7 +92,7 @@ export function JoinOrganizationPage(props: { inviteCode: string }) {
return (
<>
<Meta title={orgName ? `Invitation to ${orgName}` : 'Invitation'} />
<DottedBackground>
<DottedBackground className="min-h-[100vh]">
<Button
variant="outline"
onClick={() => router.navigate({ to: '/logout' })}

2
packages/web/app/src/pages/organization-new.tsx
View file

@ -28,7 +28,7 @@ export function NewOrgPage(): ReactElement {
return (
<>
<Meta title="Create Organization" />
<DottedBackground>
<DottedBackground className="min-h-[100vh]">
<div className="flex h-full grow items-center">
<Button
variant="outline"

2
packages/web/app/src/pages/target-checks-single.tsx
View file

@ -1046,7 +1046,7 @@ const ActiveSchemaCheck = (props: {
return null;
}
if (query.fetching) {
if (query.fetching || query.stale) {
return (
<div className="flex h-fit flex-1 items-center justify-center self-center">
<div className="flex flex-col items-center">

170
packages/web/app/src/pages/target-checks.tsx
View file

@ -282,98 +282,90 @@ function ChecksPageContent(props: { organizationId: string; projectId: string; t
projectId={props.projectId}
targetId={props.targetId}
page={Page.Checks}
className="h-full"
className={cn('flex', hasSchemaChecks || hasActiveSchemaCheck ? 'flex-row gap-x-6' : '')}
>
<div
className={cn(
'flex h-full w-full',
hasSchemaChecks || hasActiveSchemaCheck ? 'flex-row gap-x-6' : '',
)}
>
<div>
<div className="py-6">
<Title>Schema Checks</Title>
<Subtitle>Recently checked schemas.</Subtitle>
</div>
{query.fetching || query.stale ? null : hasSchemaChecks ? (
<div className="flex flex-col gap-5">
<div>
<div className="flex h-9 flex-row items-center justify-between">
<Label
htmlFor="filter-toggle-has-changes"
className="text-sm font-normal text-gray-100"
>
Show only changed schemas
</Label>
<Switch
checked={filters.showOnlyChanged ?? false}
onCheckedChange={handleShowOnlyFilterChange}
id="filter-toggle-has-changes"
/>
</div>
<div className="flex h-9 flex-row items-center justify-between">
<Label
htmlFor="filter-toggle-status-failed"
className="text-sm font-normal text-gray-100"
>
Show only failed checks
</Label>
<Switch
checked={filters.showOnlyFailed ?? false}
onCheckedChange={handleShowOnlyFilterFailed}
id="filter-toggle-status-failed"
/>
</div>
</div>
{hasFilteredSchemaChecks ? (
<div className="flex w-[300px] grow flex-col gap-2.5 overflow-y-auto rounded-md border border-gray-800/50 p-2.5">
{paginationVariables.map((cursor, index) => (
<Navigation
organizationId={props.organizationId}
projectId={props.projectId}
targetId={props.targetId}
schemaCheckId={schemaCheckId}
after={cursor}
isLastPage={index + 1 === paginationVariables.length}
onLoadMore={cursor =>
setPaginationVariables(cursors => [...cursors, cursor])
}
key={cursor ?? 'first'}
filters={filters}
/>
))}
</div>
) : (
<div className="cursor-default text-sm">
No schema checks found with the current filters
</div>
)}
</div>
) : (
<div>
<div className="cursor-default text-sm">
{hasActiveSchemaCheck ? 'List is empty' : 'Your schema check list is empty'}
</div>
<DocsLink href="/features/schema-registry#check-a-schema">
{hasActiveSchemaCheck
? 'Check you first schema'
: 'Learn how to check your first schema with Hive CLI'}
</DocsLink>
</div>
)}
<div>
<div className="w-[300px] py-6">
<Title>Schema Checks</Title>
<Subtitle>Recently checked schemas.</Subtitle>
</div>
{hasActiveSchemaCheck ? (
schemaCheckId ? (
<Outlet />
) : null
) : hasSchemaChecks ? (
<EmptyList
className="border-0 pt-6"
title="Select a schema check"
description="A list of your schema checks is available on the left."
/>
) : null}
{query.fetching || query.stale ? null : hasSchemaChecks ? (
<div className="flex flex-col gap-5">
<div>
<div className="flex h-9 flex-row items-center justify-between">
<Label
htmlFor="filter-toggle-has-changes"
className="text-sm font-normal text-gray-100"
>
Show only changed schemas
</Label>
<Switch
checked={filters.showOnlyChanged ?? false}
onCheckedChange={handleShowOnlyFilterChange}
id="filter-toggle-has-changes"
/>
</div>
<div className="flex h-9 flex-row items-center justify-between">
<Label
htmlFor="filter-toggle-status-failed"
className="text-sm font-normal text-gray-100"
>
Show only failed checks
</Label>
<Switch
checked={filters.showOnlyFailed ?? false}
onCheckedChange={handleShowOnlyFilterFailed}
id="filter-toggle-status-failed"
/>
</div>
</div>
{hasFilteredSchemaChecks ? (
<div className="flex w-[300px] grow flex-col gap-2.5 overflow-y-auto rounded-md border border-gray-800/50 p-2.5">
{paginationVariables.map((cursor, index) => (
<Navigation
organizationId={props.organizationId}
projectId={props.projectId}
targetId={props.targetId}
schemaCheckId={schemaCheckId}
after={cursor}
isLastPage={index + 1 === paginationVariables.length}
onLoadMore={cursor => setPaginationVariables(cursors => [...cursors, cursor])}
key={cursor ?? 'first'}
filters={filters}
/>
))}
</div>
) : (
<div className="cursor-default text-sm">
No schema checks found with the current filters
</div>
)}
</div>
) : (
<div>
<div className="cursor-default text-sm">
{hasActiveSchemaCheck ? 'List is empty' : 'Your schema check list is empty'}
</div>
<DocsLink href="/features/schema-registry#check-a-schema">
{hasActiveSchemaCheck
? 'Check you first schema'
: 'Learn how to check your first schema with Hive CLI'}
</DocsLink>
</div>
)}
</div>
{hasActiveSchemaCheck ? (
schemaCheckId ? (
<Outlet />
) : null
) : hasSchemaChecks ? (
<EmptyList
className="my-4 mt-6 justify-center border-0 py-8"
title="Select a schema check"
description="A list of your schema checks is available on the left."
/>
) : null}
</TargetLayout>
</>
);

6
packages/web/app/src/pages/target-history-version.tsx
View file

@ -75,7 +75,7 @@ function SchemaVersionView(props: {
);
return (
<div className="flex h-full grow flex-col">
<div className="flex w-full flex-col">
<div className="py-6">
<Title>Schema Version {schemaVersion.id}</Title>
<Subtitle>Detailed view of the schema version</Subtitle>
@ -310,7 +310,7 @@ function DefaultSchemaVersionView(props: {
</TabsList>
</Tabs>
</TooltipProvider>
<div className="border-muted min-h-[850px] rounded-md rounded-t-none border border-t-0">
<div className="border-muted grow rounded-md rounded-t-none border border-t-0">
{selectedView === 'details' && (
<div className="my-4 px-4">
{schemaVersion.isFirstComposableVersion ? (
@ -482,7 +482,7 @@ function ContractVersionView(props: {
</TabsList>
</Tabs>
</TooltipProvider>
<div className="border-muted min-h-[850px] rounded-md rounded-t-none border border-t-0">
<div className="border-muted grow rounded-md rounded-t-none border border-t-0">
{selectedView === 'details' && (
<div className="my-4 px-4">
{contractVersion.isFirstComposableVersion ? (

14
packages/web/app/src/pages/target-history.tsx
View file

@ -214,10 +214,10 @@ function HistoryPageContent(props: {
projectId={props.projectId}
targetId={props.targetId}
page={Page.History}
className="h-[--content-height] overflow-scroll"
className="flex flex-row gap-x-6"
>
{hasVersions ? (
<div className="flex size-full flex-row gap-x-6">
<>
<div>
<div className="py-6">
<Title>Versions</Title>
@ -242,18 +242,16 @@ function HistoryPageContent(props: {
</div>
</div>
</div>
<div className="grow">
<Outlet />
</div>
</div>
<Outlet />
</>
) : (
<>
<div className="w-full">
<div className="py-6">
<Title>Versions</Title>
<Subtitle>Recently published schemas.</Subtitle>
</div>
{query.fetching ? null : noSchemaVersion}
</>
</div>
)}
</TargetLayout>
);

2
packages/web/app/src/pages/target-laboratory.tsx
View file

@ -968,7 +968,7 @@ function LaboratoryPageContent(props: {
projectId={props.projectId}
targetId={props.targetId}
page={Page.Laboratory}
className="flex h-[--content-height] flex-col"
className="flex h-[--content-height] flex-col pb-0"
>
<div className="flex py-6">
<div className="flex-1">

1
packages/web/app/src/pages/target.tsx
View file

@ -68,7 +68,6 @@ function Schemas(props: { schemas?: readonly CompositeSchema[]; schema?: SingleS
if (props.schema) {
return (
<GraphQLBlock
className="mb-6"
sdl={props.schema.source}
url={'url' in props.schema && typeof props.schema.url === 'string' ? props.schema.url : ''}
/>