Improve handling of missing readme in modules

Signed-off-by: Damian Stasik <[email protected]>

frontend/src/components/EmptyState/index.tsx

@@ -1,6 +1,6 @@
 import { Icon } from "@/components/Icon";
 import { Paragraph } from "@/components/Paragraph";
-import { search } from "@/icons/search";
+import { empty } from "@/icons/empty";
 import clsx from "clsx";
 
 interface EmptyStateProps {
@@ -10,8 +10,8 @@ interface EmptyStateProps {
 
 export function EmptyState({ text, className }: EmptyStateProps) {
   return (
-    <Paragraph className={clsx("flex items-center gap-2", className)}>
-      <Icon path={search} className="size-4" />
+    <Paragraph className={clsx("flex flex-col items-center gap-2", className)}>
+      <Icon path={empty} className="size-7" />
       {text}
     </Paragraph>
   );

frontend/src/icons/empty.ts

@@ -0,0 +1,2 @@
+export const empty =
+  "m23.497 21.073-7.206-7.206a8.604 8.604 0 0 1-2.424 2.424l7.206 7.206a1.714 1.714 0 0 0 2.424-2.424ZM9.143 18.286C4.102 18.286 0 14.184 0 9.143S4.102 0 9.143 0s9.143 4.102 9.143 9.143-4.102 9.143-9.143 9.143Zm0-17.143c-4.412 0-8 3.588-8 8 0 4.411 3.588 8 8 8 4.411 0 8-3.589 8-8 0-4.412-3.589-8-8-8ZM.571 18.286a.572.572 0 0 1-.404-.976L17.31.168a.572.572 0 0 1 .823.793l-.015.015L.975 18.118a.57.57 0 0 1-.404.168Z";

frontend/src/routes/Module/Readme/index.tsx

@@ -1,11 +1,12 @@
-import { useSuspenseQueries } from "@tanstack/react-query";
+import { useSuspenseQueries, useSuspenseQuery } from "@tanstack/react-query";
 
 import { Markdown } from "@/components/Markdown";
 import { getModuleReadmeQuery, getModuleVersionDataQuery } from "../query";
 import { useModuleParams } from "../hooks/useModuleParams";
 import { Suspense } from "react";
 import { EditLink } from "@/components/EditLink";
 import { ModuleMetaTags } from "../components/MetaTags";
+import { EmptyState } from "@/components/EmptyState";
 
 function ModuleReadmeContent() {
   const { namespace, name, version, target } = useModuleParams();
@@ -46,12 +47,26 @@ function ModuleReadmeContentSkeleton() {
 }
 
 export function ModuleReadme() {
+  const { namespace, name, target, version } = useModuleParams();
+
+  const { data } = useSuspenseQuery(
+    getModuleVersionDataQuery(namespace, name, target, version),
+  );
+
   return (
     <div className="p-5">
       <ModuleMetaTags />
-      <Suspense fallback={<ModuleReadmeContentSkeleton />}>
-        <ModuleReadmeContent />
-      </Suspense>
+      {data.readme && (
+        <Suspense fallback={<ModuleReadmeContentSkeleton />}>
+          <ModuleReadmeContent />
+        </Suspense>
+      )}
+      {!data.readme && (
+        <EmptyState
+          text="This module does not have a README."
+          className="mt-5"
+        />
+      )}
     </div>
   );
 }

frontend/src/routes/ModuleExample/Readme/index.tsx

@@ -1,10 +1,14 @@
 import { useSuspenseQuery } from "@tanstack/react-query";
 
 import { Markdown } from "@/components/Markdown";
-import { getModuleExampleReadmeQuery } from "../query";
+import {
+  getModuleExampleDataQuery,
+  getModuleExampleReadmeQuery,
+} from "../query";
 import { useModuleExampleParams } from "../hooks/useModuleExampleParams";
 import { Suspense } from "react";
 import { ModuleExampleMetaTags } from "../components/MetaTags";
+import { EmptyState } from "@/components/EmptyState";
 
 function ModuleExampleReadmeContent() {
   const { namespace, name, target, version, example } =
@@ -36,12 +40,27 @@ function ModuleExampleReadmeContentSkeleton() {
 }
 
 export function ModuleExampleReadme() {
+  const { namespace, name, target, version, example } =
+    useModuleExampleParams();
+
+  const { data } = useSuspenseQuery(
+    getModuleExampleDataQuery(namespace, name, target, version, example),
+  );
+
   return (
     <div className="p-5">
       <ModuleExampleMetaTags />
-      <Suspense fallback={<ModuleExampleReadmeContentSkeleton />}>
-        <ModuleExampleReadmeContent />
-      </Suspense>
+      {data.readme && (
+        <Suspense fallback={<ModuleExampleReadmeContentSkeleton />}>
+          <ModuleExampleReadmeContent />
+        </Suspense>
+      )}
+      {!data.readme && (
+        <EmptyState
+          text="This example does not have a README."
+          className="mt-5"
+        />
+      )}
     </div>
   );
 }

frontend/src/routes/ModuleSubmodule/Readme/index.tsx

@@ -1,10 +1,14 @@
 import { useSuspenseQuery } from "@tanstack/react-query";
 
 import { Markdown } from "@/components/Markdown";
-import { getModuleSubmoduleReadmeQuery } from "../query";
+import {
+  getModuleSubmoduleDataQuery,
+  getModuleSubmoduleReadmeQuery,
+} from "../query";
 import { useModuleSubmoduleParams } from "../hooks/useModuleSubmoduleParams";
 import { Suspense } from "react";
 import { ModuleSubmoduleMetaTags } from "../components/MetaTags";
+import { EmptyState } from "@/components/EmptyState";
 
 function ModuleSubmoduleReadmeContent() {
   const { namespace, name, target, version, submodule } =
@@ -36,12 +40,27 @@ function ModuleSubmoduleReadmeContentSkeleton() {
 }
 
 export function ModuleSubmoduleReadme() {
+  const { namespace, name, target, version, submodule } =
+    useModuleSubmoduleParams();
+
+  const { data } = useSuspenseQuery(
+    getModuleSubmoduleDataQuery(namespace, name, target, version, submodule),
+  );
+
   return (
     <div className="p-5">
       <ModuleSubmoduleMetaTags />
-      <Suspense fallback={<ModuleSubmoduleReadmeContentSkeleton />}>
-        <ModuleSubmoduleReadmeContent />
-      </Suspense>
+      {data.readme && (
+        <Suspense fallback={<ModuleSubmoduleReadmeContentSkeleton />}>
+          <ModuleSubmoduleReadmeContent />
+        </Suspense>
+      )}
+      {!data.readme && (
+        <EmptyState
+          text="This submodule does not have a README."
+          className="mt-5"
+        />
+      )}
     </div>
   );
 }