Add UI Blocks to Context Panel

Author: camielvs

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

@@ -0,0 +1,130 @@
+import { type ReactNode, useCallback, useState } from "react";
+import { FaPython } from "react-icons/fa";
+
+import { Icon } from "@/components/ui/icon";
+import { InlineStack } from "@/components/ui/layout";
+import { Paragraph } from "@/components/ui/typography";
+import useToastNotification from "@/hooks/useToastNotification";
+import type { ComponentSpec } from "@/utils/componentSpec";
+import { downloadYamlFromComponentText } from "@/utils/URL";
+import copyToYaml from "@/utils/yaml";
+
+import TooltipButton from "../../Buttons/TooltipButton";
+
+interface ActionBlockProps {
+  displayName: string;
+  componentSpec: ComponentSpec;
+  actions?: ReactNode[];
+  onDelete?: () => void;
+  hasDeletionConfirmation?: boolean;
+  readOnly?: boolean;
+  className?: string;
+}
+
+const ActionBlock = ({
+  displayName,
+  componentSpec,
+  actions = [],
+  onDelete,
+  hasDeletionConfirmation = true,
+  readOnly = false,
+  className,
+}: ActionBlockProps) => {
+  const notify = useToastNotification();
+  const [confirmDelete, setConfirmDelete] = useState(false);
+
+  const pythonOriginalCode =
+    componentSpec?.metadata?.annotations?.original_python_code;
+
+  const stringToPythonCodeDownload = () => {
+    if (!pythonOriginalCode) return;
+
+    const blob = new Blob([pythonOriginalCode], { type: "text/x-python" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${componentSpec?.name || displayName}.py`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  const handleDownloadYaml = () => {
+    downloadYamlFromComponentText(componentSpec, displayName);
+  };
+
+  const handleCopyYaml = () => {
+    copyToYaml(
+      componentSpec,
+      (message) => notify(message, "success"),
+      (message) => notify(message, "error"),
+    );
+  };
+
+  const handleDelete = useCallback(() => {
+    if (confirmDelete || !hasDeletionConfirmation) {
+      try {
+        onDelete?.();
+      } catch (error) {
+        console.error("Error deleting component:", error);
+        notify(`Error deleting component`, "error");
+      }
+    } else if (hasDeletionConfirmation) {
+      setConfirmDelete(true);
+    }
+  }, [onDelete, confirmDelete, hasDeletionConfirmation, notify]);
+
+  return (
+    <InlineStack gap="2" className={className}>
+      <TooltipButton
+        variant="outline"
+        tooltip="Download YAML"
+        onClick={handleDownloadYaml}
+      >
+        <Icon name="Download" />
+      </TooltipButton>
+
+      {pythonOriginalCode && (
+        <TooltipButton
+          variant="outline"
+          tooltip="Download Python Code"
+          onClick={stringToPythonCodeDownload}
+        >
+          <FaPython />
+        </TooltipButton>
+      )}
+
+      <TooltipButton
+        variant="outline"
+        tooltip="Copy YAML"
+        onClick={handleCopyYaml}
+      >
+        <Icon name="Clipboard" />
+      </TooltipButton>
+
+      {actions}
+
+      {onDelete && !readOnly && (
+        <TooltipButton
+          variant="destructive"
+          tooltip={
+            confirmDelete || !hasDeletionConfirmation
+              ? "Confirm Delete. This action cannot be undone."
+              : "Delete Component"
+          }
+          onClick={handleDelete}
+        >
+          <InlineStack gap="2" blockAlign="center">
+            <Icon name="Trash" />
+            {confirmDelete && hasDeletionConfirmation && (
+              <Paragraph size="xs">Confirm Delete</Paragraph>
+            )}
+          </InlineStack>
+        </TooltipButton>
+      )}
+    </InlineStack>
+  );
+};
+
+export default ActionBlock;

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

@@ -0,0 +1,65 @@
+import { type ReactNode } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { Icon } from "@/components/ui/icon";
+import { BlockStack, InlineStack } from "@/components/ui/layout";
+import { Heading } from "@/components/ui/typography";
+
+type ContentBlockProps =
+  | {
+      title: string;
+      children?: ReactNode;
+      collapsible?: false;
+      defaultOpen?: never;
+      className?: string;
+    }
+  | {
+      title: string;
+      children?: ReactNode;
+      collapsible: true;
+      defaultOpen?: boolean;
+      className?: string;
+    };
+
+export const ContentBlock = ({
+  title,
+  children,
+  collapsible,
+  defaultOpen = false,
+  className,
+}: ContentBlockProps) => {
+  if (!children) {
+    return null;
+  }
+
+  return (
+    <BlockStack className={className}>
+      <Collapsible className="w-full" defaultOpen={defaultOpen}>
+        <InlineStack blockAlign="center" gap="1">
+          <Heading level={3}>{title}</Heading>
+          {collapsible && (
+            <CollapsibleTrigger asChild>
+              <Button variant="ghost" size="sm">
+                <Icon name="ChevronsUpDown" />
+                <span className="sr-only">Toggle</span>
+              </Button>
+            </CollapsibleTrigger>
+          )}
+        </InlineStack>
+
+        {collapsible ? (
+          <CollapsibleContent className="w-full mt-1">
+            {children}
+          </CollapsibleContent>
+        ) : (
+          children
+        )}
+      </Collapsible>
+    </BlockStack>
+  );
+};

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

@@ -0,0 +1,57 @@
+import { Icon } from "@/components/ui/icon";
+import { BlockStack, InlineStack } from "@/components/ui/layout";
+import { Link } from "@/components/ui/link";
+import { Heading, Paragraph } from "@/components/ui/typography";
+import { convertGithubUrlToDirectoryUrl, isGithubUrl } from "@/utils/URL";
+
+export function LinkBlock({
+  url,
+  canonicalUrl,
+  className,
+}: {
+  url?: string;
+  canonicalUrl?: string;
+  className?: string;
+}) {
+  if (!url && !canonicalUrl) return null;
+
+  return (
+    <BlockStack className={className}>
+      <Heading level={3}>URL</Heading>
+      {url && (
+        <>
+          <URLBlock href={url} text="View raw component.yaml" />
+          <URLBlock
+            href={isGithubUrl(url) ? convertGithubUrlToDirectoryUrl(url) : url}
+            text="View directory on GitHub"
+          />
+        </>
+      )}
+      {canonicalUrl && (
+        <>
+          <URLBlock href={canonicalUrl} text="View canonical URL" />
+          <URLBlock
+            href={convertGithubUrlToDirectoryUrl(canonicalUrl)}
+            text="View canonical URL on GitHub"
+          />
+        </>
+      )}
+    </BlockStack>
+  );
+}
+
+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">
+        {text}
+      </Paragraph>
+    </Link>
+    <Icon name="ExternalLink" size="xs" className="text-muted-foreground" />
+  </InlineStack>
+);

src/components/shared/ContextPanel/Blocks/ListBlock.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;
+};