Console 1383 open non existing schema version results in infinite loading (#7316)

Author: jonathanawesome

packages/web/app/src/components/admin/AdminStats.tsx

@@ -26,7 +26,7 @@ import { CHART_PRIMARY_COLOR } from '@/constants';
 import { env } from '@/env/frontend';
 import { DocumentType, FragmentType, graphql, useFragment } from '@/gql';
 import { theme } from '@/lib/charts';
-import { useChartStyles } from '@/utils';
+import { useChartStyles } from '@/lib/utils';
 import { ChevronUpIcon } from '@radix-ui/react-icons';
 import {
   createColumnHelper,

packages/web/app/src/components/common/not-found-content.tsx

@@ -2,17 +2,27 @@ import ghost from '../../../public/images/figures/ghost.svg?url';
 import { useRouter } from '@tanstack/react-router';
 import { Button } from '../ui/button';
 
-export function NotFoundContent(props: { heading: React.ReactNode; subheading: React.ReactNode }) {
+export function NotFoundContent({
+  heading,
+  subheading,
+  includeBackButton = true,
+}: {
+  heading: React.ReactNode;
+  subheading: React.ReactNode;
+  includeBackButton?: boolean;
+}) {
   const router = useRouter();
 
   return (
     <div className="flex h-full flex-1 flex-col items-center justify-center gap-2.5 py-6">
       <img src={ghost} alt="Ghost illustration" width="200" height="200" className="drag-none" />
-      <h2 className="text-xl font-bold">{props.heading}</h2>
-      <h3 className="font-semibold">{props.subheading}</h3>
-      <Button variant="secondary" className="mt-2" onClick={router.history.back}>
-        Go back
-      </Button>
+      <h2 className="text-xl font-bold">{heading}</h2>
+      <h3 className="font-semibold">{subheading}</h3>
+      {includeBackButton && (
+        <Button variant="secondary" className="mt-2" onClick={router.history.back}>
+          Go back
+        </Button>
+      )}
     </div>
   );
 }

packages/web/app/src/components/organization/Permissions.tsx

@@ -9,7 +9,7 @@ import {
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { OrganizationAccessScope, ProjectAccessScope, TargetAccessScope } from '@/gql/graphql';
 import { NoAccess, Scope } from '@/lib/access/common';
-import { truthy } from '@/utils';
+import { truthy } from '@/lib/utils';
 
 function isLowerThen<T>(targetScope: T, sourceScope: T, scopesInLowerToHigherOrder: readonly T[]) {
   const sourceIndex = scopesInLowerToHigherOrder.indexOf(sourceScope);

packages/web/app/src/components/target/explorer/common.tsx

@@ -7,8 +7,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/comp
 import { Markdown } from '@/components/v2/markdown';
 import { FragmentType, graphql, useFragment } from '@/gql';
 import { formatNumber, toDecimal } from '@/lib/hooks';
-import { cn } from '@/lib/utils';
-import { capitalize } from '@/utils';
+import { capitalize, cn } from '@/lib/utils';
 import { Link as NextLink, useRouter } from '@tanstack/react-router';
 import { useDescriptionsVisibleToggle } from './provider';
 import { SupergraphMetadataList } from './super-graph-metadata';

packages/web/app/src/components/target/insights/Stats.tsx

@@ -28,7 +28,7 @@ import {
   useFormattedThroughput,
 } from '@/lib/hooks';
 import { pick } from '@/lib/object';
-import { useChartStyles } from '@/utils';
+import { useChartStyles } from '@/lib/utils';
 import { useRouter } from '@tanstack/react-router';
 import { OperationsFallback } from './Fallback';
 import { resolutionToMilliseconds } from './utils';

packages/web/app/src/components/ui/copy-text.tsx

@@ -15,7 +15,7 @@ export function CopyText(props: { children: ReactNode; copy?: string; className?
       </div>
       <TooltipProvider delayDuration={0}>
         <Tooltip>
-          <TooltipTrigger>
+          <TooltipTrigger asChild>
             <Button
               className="invisible -my-3 p-2 py-3 group-hover:visible"
               variant="link"

packages/web/app/src/lib/utils.ts

@@ -1,10 +1,24 @@
 import { clsx, type ClassValue } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
+// Style-related
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
 
+const darkChartStyles = {
+  backgroundColor: 'transparent',
+  textStyle: { color: '#fff' },
+  legend: {
+    textStyle: { color: '#fff' },
+  },
+};
+
+export function useChartStyles() {
+  return darkChartStyles;
+}
+
+// Strings
 export function pluralize(count: number, singular: string, plural: string): string {
   if (count === 1) {
     return singular;
@@ -13,8 +27,24 @@ export function pluralize(count: number, singular: string, plural: string): stri
   return plural;
 }
 
+export function capitalize(str: string) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
+// Errors
 export function exhaustiveGuard(_value: never): never {
   throw new Error(
     `Reached forbidden guard function with unexpected value: ${JSON.stringify(_value)}`,
   );
 }
+
+// Validation
+export function isValidUUID(value: string): boolean {
+  return /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(value);
+}
+
+type Truthy<T> = T extends false | '' | 0 | null | undefined ? never : T; // from lodash
+
+export function truthy<T>(value: T): value is Truthy<T> {
+  return !!value;
+}

packages/web/app/src/pages/organization-subscription.tsx

@@ -18,7 +18,7 @@ import { Card } from '@/components/v2/card';
 import Stat from '@/components/v2/stat';
 import { graphql, useFragment } from '@/gql';
 import { formatNumber } from '@/lib/hooks';
-import { useChartStyles } from '@/utils';
+import { useChartStyles } from '@/lib/utils';
 import { Link } from '@tanstack/react-router';
 
 const DateFormatter = Intl.DateTimeFormat('en-US', {

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

@@ -1,6 +1,7 @@
 import { ReactElement, useMemo, useState } from 'react';
 import { CheckIcon, GitCompareIcon } from 'lucide-react';
 import { useQuery } from 'urql';
+import { NotFoundContent } from '@/components/common/not-found-content';
 import {
   ChangesBlock,
   CompositionErrorsSection,
@@ -15,7 +16,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/comp
 import { DiffEditor, TimeAgo } from '@/components/v2';
 import { FragmentType, graphql, useFragment } from '@/gql';
 import { ProjectType, SeverityLevelType } from '@/gql/graphql';
-import { cn } from '@/lib/utils';
+import { cn, isValidUUID } from '@/lib/utils';
 import {
   CheckCircledIcon,
   CrossCircledIcon,
@@ -242,15 +243,11 @@ const DefaultSchemaVersionView_SchemaVersionFragment = graphql(`
     log {
       ... on PushedSchemaLog {
         id
-        author
-        service
-        commit
         serviceSdl
         previousServiceSdl
       }
       ... on DeletedSchemaLog {
         id
-        deletedService
         previousServiceSdl
       }
     }
@@ -443,9 +440,6 @@ function DefaultSchemaVersionView(props: {
 const ContractVersionView_ContractVersionFragment = graphql(`
   fragment ContractVersionView_ContractVersionFragment on ContractVersion {
     id
-    contractName
-    isComposable
-    hasSchemaChanges
     isFirstComposableVersion
     supergraphSDL
     compositeSchemaSDL
@@ -640,6 +634,8 @@ function ActiveSchemaVersion(props: {
   projectSlug: string;
   targetSlug: string;
 }) {
+  const isValidVersionId = isValidUUID(props.versionId);
+
   const [query] = useQuery({
     query: ActiveSchemaVersion_SchemaVersionQuery,
     variables: {
@@ -648,6 +644,7 @@ function ActiveSchemaVersion(props: {
       targetSlug: props.targetSlug,
       versionId: props.versionId,
     },
+    pause: !isValidVersionId,
   });
 
   const { error } = query;
@@ -657,7 +654,28 @@ function ActiveSchemaVersion(props: {
   const schemaVersion = project?.target?.schemaVersion;
   const projectType = query.data?.project?.type;
 
-  if (isLoading || !schemaVersion || !projectType) {
+  // Order of these conditionals is important...relocate carefully!
+  if (!isValidVersionId) {
+    return (
+      <NotFoundContent
+        heading="Invalid version ID"
+        subheading="The provided version ID is not a valid UUID format."
+        includeBackButton={false}
+      />
+    );
+  }
+
+  if (!isLoading && !schemaVersion) {
+    return (
+      <NotFoundContent
+        heading="Version ID does not exist"
+        subheading="The provided version ID is not in our database."
+        includeBackButton={false}
+      />
+    );
+  }
+
+  if (isLoading || !projectType) {
     return (
       <div className="flex size-full flex-col items-center justify-center self-center text-sm text-gray-500">
         <Spinner className="mb-3 size-8" />

packages/web/app/src/pages/target-history.tsx

@@ -49,7 +49,6 @@ const HistoryPage_VersionsPageQuery = graphql(`
                 deletedService
               }
             }
-            baseSchema
             githubMetadata {
               repository
               commit