Separate check noschema from others; adjust ui per feedback

jdolle · jdolle · commit 27f25e492cf6 · 2025-03-11T13:20:46.000-07:00
diff --git a/packages/web/app/src/components/ui/empty-list.tsx b/packages/web/app/src/components/ui/empty-list.tsx
@@ -2,6 +2,7 @@ import { ReactElement, ReactNode } from 'react';
 import magnifier from '../../../public/images/figures/magnifier.svg?url';
 import { ProjectType } from '@/gql/graphql';
 import { cn } from '@/lib/utils';
+import { InlineCode } from '../v2/inline-code';
 import { Card } from './card';
 import { DocsLink } from './docs-note';
 import { Heading } from './heading';
@@ -48,41 +49,58 @@ export const noSchema = (
   />
 );
 
-// @todo consider monolith vs distributed etc
 export const NoSchemaVersion = ({
-  projectType,
+  projectType = null,
+  recommendedAction = 'none',
 }: {
   projectType: ProjectType | null;
+  recommendedAction: 'publish' | 'check' | 'none';
 }): ReactElement => {
-  const isDistributed =
-    projectType === ProjectType.Federation || projectType === ProjectType.Stitching;
+  let children: ReactElement | null = null;
+  if (recommendedAction !== 'none') {
+    const isDistributed =
+      projectType === ProjectType.Federation || projectType === ProjectType.Stitching;
+
+    if (recommendedAction === 'check') {
+      children = (
+        <>
+          <div className="flex w-full justify-center py-2 text-xs text-gray-500">
+            It's recommended to check that the schema is valid and compatible with the state of the
+            registry before publishing.
+          </div>
+          <div className="flex w-full justify-center">
+            <InlineCode
+              content={`hive schema:check ${isDistributed ? '--service <service-name> --url <url> ' : ''}<path/schema.graphql>`}
+            />
+          </div>
+        </>
+      );
+    } else if (recommendedAction === 'publish') {
+      children = (
+        <>
+          {isDistributed && (
+            <div className="flex w-full justify-center py-2 text-xs text-gray-500">
+              For distributed systems, it's recommended to publish the schema after the service is
+              deployed.
+            </div>
+          )}
+          <div className="flex w-full justify-center">
+            <InlineCode
+              content={`hive schema:publish ${isDistributed ? '--service <service-name> --url <url> ' : ''}<path/schema.graphql>`}
+            />
+          </div>
+        </>
+      );
+    }
+  }
+
   return (
     <EmptyList
       title="Hive is waiting for your first schema"
       description="You can publish a schema with Hive CLI and Hive Client"
       docsUrl="/features/schema-registry#publish-a-schema"
     >
-      <>
-        <div className="flex w-full justify-center py-2 text-xs text-gray-500">
-          First check that the schema is valid and compatible with the state of the registry.
-        </div>
-        <div className="flex w-full justify-center">
-          <InputCopy
-            value={`hive schema:check ${isDistributed ? '--service <service-name> --url <url> ' : ''}<path/schema.graphql>`}
-            alignment="center"
-          />
-        </div>
-        <div className="flex w-full justify-center py-2 text-xs text-gray-500">
-          Then publish the schema. For distributed systems, it's recommended to publish the schema
-          after the service is deployed.
-        </div>
-        <div className="flex w-full justify-center">
-          <InputCopy
-            value={`hive schema:publish ${isDistributed ? '--service <service-name> --url <url> ' : ''}<path/schema.graphql>`}
-            alignment="center"
-          />
-        </div>
-      </>
+      {children}
     </EmptyList>
   );
 };
diff --git a/packages/web/app/src/components/ui/input-copy.tsx b/packages/web/app/src/components/ui/input-copy.tsx
@@ -4,7 +4,7 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { useClipboard } from '@/lib/hooks';
 
-export function InputCopy(props: { value: string; alignment?: 'center' | 'left' }) {
+export function InputCopy(props: { value: string }) {
   const [isCopied, setIsCopied] = useState(false);
   const copyToClipboard = useClipboard();
 
@@ -31,7 +31,7 @@ export function InputCopy(props: { value: string; alignment?: 'center' | 'left'
           type="text"
           value={props.value}
           readOnly
-          className={`bg-secondary truncate text-white ${props.alignment === 'center' ? 'text-center' : ''}`}
+          className="bg-secondary truncate text-white"
           onFocus={ev => ev.target.select()}
         />
       </div>
diff --git a/packages/web/app/src/pages/target-apps.tsx b/packages/web/app/src/pages/target-apps.tsx
@@ -258,7 +258,10 @@ function TargetAppsView(props: {
           </div>
         </div>
       ) : !data.data?.target?.latestSchemaVersion ? (
-        <NoSchemaVersion projectType={data.data?.target?.project?.type ?? null} />
+        <NoSchemaVersion
+          recommendedAction="publish"
+          projectType={data.data?.target?.project?.type ?? null}
+        />
       ) : !data.data.target.appDeployments ? (
         <EmptyList
           title="Hive is waiting for your first app deployment"
diff --git a/packages/web/app/src/pages/target-checks.tsx b/packages/web/app/src/pages/target-checks.tsx
@@ -4,7 +4,7 @@ import { Page, TargetLayout } from '@/components/layouts/target';
 import { BadgeRounded } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { DocsLink } from '@/components/ui/docs-note';
-import { EmptyList } from '@/components/ui/empty-list';
+import { EmptyList, NoSchemaVersion } from '@/components/ui/empty-list';
 import { Label } from '@/components/ui/label';
 import { Meta } from '@/components/ui/meta';
 import { Subtitle, Title } from '@/components/ui/page';
@@ -196,6 +196,10 @@ const ChecksPageQuery = graphql(`
       }
     ) {
       id
+      project {
+        id
+        type
+      }
       schemaChecks(first: 1) {
         edges {
           node {
@@ -359,7 +363,14 @@ function ChecksPageContent(props: {
         ) : (
           <div>
             <div className="cursor-default text-sm">
-              {hasActiveSchemaCheck ? 'List is empty' : 'Your schema check list is empty'}
+              {hasActiveSchemaCheck ? (
+                'List is empty'
+              ) : (
+                <NoSchemaVersion
+                  projectType={query.data?.target?.project.type ?? null}
+                  recommendedAction="check"
+                />
+              )}
             </div>
             <DocsLink href="/features/schema-registry#check-a-schema">
               {hasActiveSchemaCheck
diff --git a/packages/web/app/src/pages/target-explorer-deprecated.tsx b/packages/web/app/src/pages/target-explorer-deprecated.tsx
@@ -307,7 +307,10 @@ function DeprecatedSchemaExplorer(props: {
               />
             </>
           ) : (
-            <NoSchemaVersion projectType={query.data?.target?.project?.type ?? null} />
+            <NoSchemaVersion
+              recommendedAction="publish"
+              projectType={query.data?.target?.project?.type ?? null}
+            />
           )}
         </>
       )}
diff --git a/packages/web/app/src/pages/target-explorer-type.tsx b/packages/web/app/src/pages/target-explorer-type.tsx
@@ -267,7 +267,10 @@ function TypeExplorerPageContent(props: {
           styleDeprecated
         />
       ) : type ? (
-        <NoSchemaVersion projectType={query.data?.target?.project?.type ?? null} />
+        <NoSchemaVersion
+          recommendedAction="publish"
+          projectType={query.data?.target?.project?.type ?? null}
+        />
       ) : (
         <div>Not found</div>
       )}
diff --git a/packages/web/app/src/pages/target-explorer-unused.tsx b/packages/web/app/src/pages/target-explorer-unused.tsx
@@ -359,7 +359,10 @@ function UnusedSchemaExplorer(props: {
               />
             </>
           ) : (
-            <NoSchemaVersion projectType={query.data?.target?.project.type} />
+            <NoSchemaVersion
+              recommendedAction="publish"
+              projectType={query.data?.target?.project.type}
+            />
           )}
         </>
       )}
diff --git a/packages/web/app/src/pages/target-explorer.tsx b/packages/web/app/src/pages/target-explorer.tsx
@@ -273,7 +273,10 @@ function ExplorerPageContent(props: {
           ) : latestSchemaVersion ? (
             noValidSchemaVersion
           ) : (
-            <NoSchemaVersion projectType={query.data?.target?.project.type ?? null} />
+            <NoSchemaVersion
+              projectType={query.data?.target?.project.type ?? null}
+              recommendedAction="publish"
+            />
           )}
         </>
       )}
diff --git a/packages/web/app/src/pages/target-history.tsx b/packages/web/app/src/pages/target-history.tsx
@@ -273,7 +273,10 @@ function HistoryPageContent(props: {
         <Subtitle>Recently published schemas.</Subtitle>
       </div>
       {query.fetching ? null : (
-        <NoSchemaVersion projectType={query.data?.target?.project.type ?? null} />
+        <NoSchemaVersion
+          recommendedAction="publish"
+          projectType={query.data?.target?.project.type ?? null}
+        />
       )}
     </div>
   );
diff --git a/packages/web/app/src/pages/target.tsx b/packages/web/app/src/pages/target.tsx
@@ -169,7 +169,7 @@ function SchemaView(props: {
 
   const { latestSchemaVersion } = target;
   if (!latestSchemaVersion) {
-    return <NoSchemaVersion projectType={project.type} />;
+    return <NoSchemaVersion recommendedAction="publish" projectType={project.type} />;
   }
 
   if (!latestSchemaVersion.schemas.nodes.length) {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -169,7 +169,7 @@ function SchemaView(props: {`
`169`	`169`
`170`	`170`	`const { latestSchemaVersion } = target;`
`171`	`171`	`if (!latestSchemaVersion) {`
`172`		`- return <NoSchemaVersion projectType={project.type} />;`
	`172`	`+ return <NoSchemaVersion recommendedAction="publish" projectType={project.type} />;`
`173`	`173`	`}`
`174`	`174`
`175`	`175`	`if (!latestSchemaVersion.schemas.nodes.length) {`