Cleanup PipelineDetails

Author: camielvs

src/components/Editor/PipelineDetails.tsx

@@ -9,7 +9,6 @@ import { downloadYamlFromComponentText } from "@/utils/URL";
 import copyToYaml from "@/utils/yaml";
 
 import TooltipButton from "../../Buttons/TooltipButton";
-import { blockBaseClass } from "./shared";
 
 interface ActionBlockProps {
   displayName: string;
@@ -18,6 +17,7 @@ interface ActionBlockProps {
   onDelete?: () => void;
   hasDeletionConfirmation?: boolean;
   readOnly?: boolean;
+  className?: string;
 }
 
 const ActionBlock = ({
@@ -27,6 +27,7 @@ const ActionBlock = ({
   onDelete,
   hasDeletionConfirmation = true,
   readOnly = false,
+  className,
 }: ActionBlockProps) => {
   const notify = useToastNotification();
   const [confirmDelete, setConfirmDelete] = useState(false);
@@ -74,7 +75,7 @@ const ActionBlock = ({
   }, [onDelete, confirmDelete, hasDeletionConfirmation, notify]);
 
   return (
-    <InlineStack gap="2" className={blockBaseClass}>
+    <InlineStack gap="2" className={className}>
       <TooltipButton
         variant="outline"
         tooltip="Download YAML"

…hared/TaskDetails/Blocks/ActionBlock.tsx …ared/ContextPanel/Blocks/ActionBlock.tsxsrc/components/shared/TaskDetails/Blocks/ActionBlock.tsx renamed to src/components/shared/ContextPanel/Blocks/ActionBlock.tsx src/components/shared/TaskDetails/Blocks/ActionBlock.tsx renamed to src/components/shared/ContextPanel/Blocks/ActionBlock.tsx

@@ -10,34 +10,35 @@ import { Icon } from "@/components/ui/icon";
 import { BlockStack, InlineStack } from "@/components/ui/layout";
 import { Heading } from "@/components/ui/typography";
 
-import { blockBaseClass } from "./shared";
-
 type ContentBlockProps =
   | {
       title: string;
-      content?: ReactNode;
+      children?: ReactNode;
       collapsible?: false;
       defaultOpen?: never;
+      className?: string;
     }
   | {
       title: string;
-      content?: ReactNode;
+      children?: ReactNode;
       collapsible: true;
       defaultOpen?: boolean;
+      className?: string;
     };
 
 export const ContentBlock = ({
   title,
-  content,
+  children,
   collapsible,
   defaultOpen = false,
+  className,
 }: ContentBlockProps) => {
-  if (!content) {
+  if (!children) {
     return null;
   }
 
   return (
-    <BlockStack className={blockBaseClass}>
+    <BlockStack className={className}>
       <Collapsible className="w-full" defaultOpen={defaultOpen}>
         <InlineStack blockAlign="center" gap="1">
           <Heading level={3}>{title}</Heading>
@@ -53,10 +54,10 @@ export const ContentBlock = ({
 
         {collapsible ? (
           <CollapsibleContent className="w-full mt-1">
-            {content}
+            {children}
           </CollapsibleContent>
         ) : (
-          content
+          children
         )}
       </Collapsible>
     </BlockStack>

…ared/TaskDetails/Blocks/ContentBlock.tsx …red/ContextPanel/Blocks/ContentBlock.tsxsrc/components/shared/TaskDetails/Blocks/ContentBlock.tsx renamed to src/components/shared/ContextPanel/Blocks/ContentBlock.tsx src/components/shared/TaskDetails/Blocks/ContentBlock.tsx renamed to src/components/shared/ContextPanel/Blocks/ContentBlock.tsx

@@ -4,19 +4,19 @@ import { Link } from "@/components/ui/link";
 import { Heading, Paragraph } from "@/components/ui/typography";
 import { convertGithubUrlToDirectoryUrl, isGithubUrl } from "@/utils/URL";
 
-import { blockBaseClass } from "./shared";
-
 export function LinkBlock({
   url,
   canonicalUrl,
+  className,
 }: {
   url?: string;
   canonicalUrl?: string;
+  className?: string;
 }) {
   if (!url && !canonicalUrl) return null;
 
   return (
-    <BlockStack className={blockBaseClass}>
+    <BlockStack className={className}>
       <Heading level={3}>URL</Heading>
       {url && (
         <>
@@ -40,7 +40,12 @@ export function LinkBlock({
   );
 }
 
-export const URLBlock = ({ href, text }: { href?: string; text: string }) => (
+export type URLBlockProps = {
+  href?: string;
+  text: string;
+};
+
+export const URLBlock = ({ href, text }: URLBlockProps) => (
   <InlineStack blockAlign="center" gap="1">
     <Link href={href} target="_blank" rel="noopener noreferrer">
       <Paragraph size="xs" className="text-sky-500 hover:underline">

…/shared/TaskDetails/Blocks/LinkBlock.tsx …shared/ContextPanel/Blocks/LinkBlock.tsxsrc/components/shared/TaskDetails/Blocks/LinkBlock.tsx renamed to src/components/shared/ContextPanel/Blocks/LinkBlock.tsx src/components/shared/TaskDetails/Blocks/LinkBlock.tsx renamed to src/components/shared/ContextPanel/Blocks/LinkBlock.tsx

@@ -0,0 +1,93 @@
+import { BlockStack, InlineStack } from "@/components/ui/layout";
+import { Heading, Paragraph } from "@/components/ui/typography";
+
+import { URLBlock, type URLBlockProps } from "./LinkBlock";
+
+export interface ListBlockItemProps {
+  name?: string;
+  value?: string | URLBlockProps;
+  critical?: boolean;
+}
+
+interface ListBlockProps {
+  title?: string;
+  items: ListBlockItemProps[];
+  marker?: "bullet" | "number" | "none";
+  className?: string;
+}
+
+export const ListBlock = ({
+  title,
+  items,
+  marker = "bullet",
+  className,
+}: ListBlockProps) => {
+  const listElement = marker === "number" ? "ol" : "ul";
+
+  const getListStyle = () => {
+    switch (marker) {
+      case "bullet":
+        return "pl-5 list-disc";
+      case "number":
+        return "pl-5 list-decimal";
+      case "none":
+        return "list-none";
+      default:
+        return "pl-5 list-disc";
+    }
+  };
+
+  return (
+    <BlockStack className={className}>
+      {title && <Heading level={3}>{title}</Heading>}
+      <BlockStack as={listElement} gap="1" className={getListStyle()}>
+        {items.map((item, index) => {
+          if (!item.value) {
+            return null;
+          }
+
+          return (
+            <li key={index} className="w-full">
+              <ListBlockItem
+                name={item.name}
+                value={item.value}
+                critical={item.critical}
+              />
+            </li>
+          );
+        })}
+      </BlockStack>
+    </BlockStack>
+  );
+};
+
+const ListBlockItem = ({ name, value, critical }: ListBlockItemProps) => {
+  if (!value) {
+    return null;
+  }
+
+  return (
+    <InlineStack gap="2" blockAlign="center" wrap="nowrap">
+      {name && (
+        <Paragraph size="xs" tone={critical ? "critical" : "inherit"}>
+          {name}:
+        </Paragraph>
+      )}
+      {isURL(value) ? (
+        <URLBlock href={value.href} text={value.text} />
+      ) : (
+        <Paragraph
+          size="xs"
+          tone={critical ? "critical" : "subdued"}
+          className="truncate"
+        >
+          {value}
+        </Paragraph>
+      )}
+    </InlineStack>
+  );
+};
+
+const isURL = (val: string | URLBlockProps): val is URLBlockProps => {
+  return typeof val === "object" && val !== null && "href" in val;
+};

src/components/shared/ContextPanel/Blocks/ListBlock.tsx

@@ -17,20 +17,20 @@ import { Heading, Paragraph } from "@/components/ui/typography";
 import { useCopyToClipboard } from "@/hooks/useCopyToClip";
 import { cn } from "@/lib/utils";
 
-import { blockBaseClass } from "./shared";
-
 interface TextBlockProps {
   title: string;
   text?: string;
   allowCopy?: boolean;
   collapsible?: boolean;
+  className?: string;
 }
 
 export const TextBlock = ({
   title,
   text,
   allowCopy,
   collapsible,
+  className,
 }: TextBlockProps) => {
   const { isCopied, isTooltipOpen, handleCopy, handleTooltipOpen } =
     useCopyToClipboard(text);
@@ -80,7 +80,7 @@ export const TextBlock = ({
   }
 
   return (
-    <BlockStack className={blockBaseClass}>
+    <BlockStack className={className}>
       <Collapsible className="w-full">
         <InlineStack blockAlign="center" gap="1">
           <Heading level={3}>{title}</Heading>