@shipfox/client-workflows 0.2.0

package/src/components/workflow-run-view/workflow-run-view.tsx

@@ -0,0 +1,341 @@
+import type {WorkflowRunRerunModeDto} from '@shipfox/api-workflows-dto';
+import {ApiError} from '@shipfox/client-api';
+import {QueryLoadError} from '@shipfox/client-ui';
+import {RelativeTimeProvider} from '@shipfox/react-ui/relative-time';
+import {toast} from '@shipfox/react-ui/toast';
+import {useNavigate} from '@tanstack/react-router';
+import {useEffect, useId, useRef, useState} from 'react';
+import {
+  type JobExecution,
+  resolveJobExecution,
+  type StepSourceLocation,
+} from '#core/workflow-run.js';
+import {
+  type WorkflowRunSelectionInput,
+  withoutWorkflowRunSelectionSearch,
+} from '#core/workflow-run-url-state.js';
+import {
+  useCancelWorkflowRunMutation,
+  useRerunWorkflowRunMutation,
+  useWorkflowRunAttemptQuery,
+} from '#hooks/api/workflow-runs.js';
+import {JobGraph} from '../job-graph/index.js';
+import {WorkflowRunSummary} from '../workflow-run-summary/index.js';
+import {WorkflowSourcePanel} from '../workflow-source-panel/index.js';
+import {JobCard} from './job-card.js';
+import {resolveWorkflowRunSelection} from './workflow-run-selection.js';
+import {
+  WorkflowRunNotFound,
+  WorkflowRunSkeleton,
+  WorkflowRunStaleError,
+} from './workflow-run-states.js';
+
+interface WorkflowSourceFocus {
+  stepId: string;
+  location: StepSourceLocation;
+}
+
+export interface WorkflowRunViewProps {
+  workspaceId: string;
+  projectId: string;
+  workflowRunId?: string | undefined;
+  selection?: WorkflowRunSelectionInput | undefined;
+  onSelectionChange?: ((selection: WorkflowRunSelectionInput) => void) | undefined;
+}
+
+/**
+ * Renders the run for `workflowRunId`, or a skeleton while `workflowRunId` is still unknown (the page is
+ * resolving which run to show) or the run is loading, so the page never branches on the
+ * loading state itself.
+ */
+export function WorkflowRunView({
+  workspaceId,
+  projectId,
+  workflowRunId,
+  selection,
+  onSelectionChange,
+}: WorkflowRunViewProps) {
+  const runQuery = useWorkflowRunAttemptQuery({workflowRunId, runAttempt: selection?.runAttempt});
+  const rerunMutation = useRerunWorkflowRunMutation(projectId);
+
+  return (
+    <RelativeTimeProvider>
+      <div className="flex min-h-0 min-w-0 flex-1 overflow-hidden">
+        <RunViewContent
+          workspaceId={workspaceId}
+          projectId={projectId}
+          query={runQuery}
+          rerunMutation={rerunMutation}
+          selection={selection}
+          onSelectionChange={onSelectionChange}
+        />
+      </div>
+    </RelativeTimeProvider>
+  );
+}
+
+function RunViewContent({
+  workspaceId,
+  projectId,
+  query,
+  rerunMutation,
+  selection,
+  onSelectionChange,
+}: {
+  workspaceId: string;
+  projectId: string;
+  query: ReturnType<typeof useWorkflowRunAttemptQuery>;
+  rerunMutation: ReturnType<typeof useRerunWorkflowRunMutation>;
+  selection: WorkflowRunSelectionInput | undefined;
+  onSelectionChange: ((selection: WorkflowRunSelectionInput) => void) | undefined;
+}) {
+  const navigate = useNavigate();
+  const [selectedJobId, setSelectedJobId] = useState<string | undefined>();
+  const [selectedJobExecutionId, setSelectedJobExecutionId] = useState<string | undefined>();
+  const [sourcePanelOpen, setSourcePanelOpen] = useState(false);
+  const [sourceFocus, setSourceFocus] = useState<WorkflowSourceFocus | null>(null);
+  const sourcePanelId = useId();
+  const sourceButtonRef = useRef<HTMLButtonElement>(null);
+  // The button that last opened the panel (summary or a step detail), so Escape /
+  // Close returns focus to whoever opened it.
+  const lastSourceTriggerRef = useRef<HTMLButtonElement | null>(null);
+  const selectionControlled = selection !== undefined;
+  const sourceAvailable =
+    query.data?.sourceSnapshot !== null && query.data?.sourceSnapshot !== undefined;
+  const cancelMutation = useCancelWorkflowRunMutation(query.data);
+
+  useEffect(() => {
+    if (!sourceAvailable) {
+      setSourcePanelOpen(false);
+      setSourceFocus(null);
+    }
+  }, [sourceAvailable]);
+
+  // If a refetch drops the focused step or its location, degrade to whole-workflow
+  // focus so the panel never points at an unmounted Source button.
+  useEffect(() => {
+    if (!sourceFocus) return;
+    const stillLocated = query.data?.jobs.some((job) =>
+      job.jobExecutions.some((execution) =>
+        execution.steps.some((step) => step.id === sourceFocus.stepId && step.sourceLocation),
+      ),
+    );
+    if (!stillLocated) {
+      setSourceFocus(null);
+      lastSourceTriggerRef.current = sourceButtonRef.current;
+    }
+  }, [sourceFocus, query.data]);
+
+  if (query.isPending) return <WorkflowRunSkeleton />;
+
+  // Only show the full error placeholder when nothing ever loaded. A refetch that fails after
+  // a prior success keeps the loaded run on screen (see below) instead of wiping the pane,
+  // since active-run polling can hit a transient API error.
+  if (query.isError && query.data === undefined) {
+    if (query.error instanceof ApiError && query.error.status === 404) {
+      return <WorkflowRunNotFound />;
+    }
+    return <QueryLoadError query={query} subject="workflow run" icon="pulseLine" />;
+  }
+
+  if (query.data === undefined) return <WorkflowRunSkeleton />;
+
+  const runData = query.data;
+  const resolvedSelection = selectionControlled
+    ? resolveWorkflowRunSelection({run: runData, selection})
+    : undefined;
+  const selectedJob = selectionControlled
+    ? resolvedSelection?.job
+    : (runData.jobs.find((job) => job.id === selectedJobId) ?? runData.jobs.at(0));
+  const selectedJobExecution = selectionControlled
+    ? resolvedSelection?.jobExecution
+    : selectedJob
+      ? resolveJobExecution(selectedJob, selectedJobExecutionId)
+      : undefined;
+  const selectedAttemptId = selectionControlled
+    ? (resolvedSelection?.selectedAttemptId ?? null)
+    : undefined;
+  // Explicit per-step focus wins; fall back to the URL-selected step so deep links
+  // still pre-highlight when the summary opens the whole-workflow source.
+  const highlightedLineRange =
+    sourceFocus?.location ?? resolvedSelection?.step?.sourceLocation ?? null;
+  const sourceSnapshot = runData.sourceSnapshot;
+  async function rerun(mode: WorkflowRunRerunModeDto) {
+    try {
+      const run = await rerunMutation.mutateAsync({workflowRunId: runData.id, mode});
+      toast.success('Re-run started');
+      await navigate({
+        to: '/workspaces/$wid/projects/$pid/runs/$workflowRunId',
+        params: {wid: workspaceId, pid: projectId, workflowRunId: run.id},
+        search: ((previous: Record<string, unknown>) =>
+          withoutWorkflowRunSelectionSearch(previous)) as never,
+      });
+    } catch (error) {
+      toast.error(error instanceof ApiError ? error.message : 'Could not start re-run');
+    }
+  }
+
+  function selectJob(jobId: string | undefined) {
+    if (!selectionControlled) {
+      setSelectedJobId(jobId);
+      setSelectedJobExecutionId(undefined);
+      return;
+    }
+
+    onSelectionChange?.(
+      jobId ? {jobId, runAttempt: selection?.runAttempt} : {runAttempt: selection?.runAttempt},
+    );
+  }
+
+  function selectJobExecution(jobExecutionId: string | undefined) {
+    if (!selectionControlled) {
+      setSelectedJobExecutionId(jobExecutionId);
+      return;
+    }
+    if (!selectedJob) return;
+
+    onSelectionChange?.({
+      jobId: selectedJob.id,
+      jobExecutionId,
+      runAttempt: selection?.runAttempt,
+    });
+  }
+
+  function selectAttempt(attemptId: string | undefined) {
+    if (!selectionControlled || !selectedJob || !selectedJobExecution) return;
+
+    if (!attemptId) {
+      onSelectionChange?.({
+        jobId: selectedJob.id,
+        jobExecutionId: selectedJobExecution.id,
+        runAttempt: selection?.runAttempt,
+      });
+      return;
+    }
+
+    const match = findAttemptSelection(selectedJobExecution, attemptId);
+    if (!match) return;
+
+    onSelectionChange?.({
+      jobId: selectedJob.id,
+      jobExecutionId: selectedJobExecution.id,
+      stepId: match.stepId,
+      stepAttemptId: match.attemptId,
+      runAttempt: selection?.runAttempt,
+    });
+  }
+
+  function openWholeWorkflowSource() {
+    setSourceFocus(null);
+    lastSourceTriggerRef.current = sourceButtonRef.current;
+    setSourcePanelOpen(true);
+  }
+
+  function toggleWholeWorkflowSource() {
+    if (sourcePanelOpen && sourceFocus === null) {
+      closeSourcePanel();
+      return;
+    }
+    openWholeWorkflowSource();
+  }
+
+  function openStepSource(
+    stepId: string,
+    location: StepSourceLocation,
+    trigger: HTMLButtonElement | null,
+  ) {
+    setSourceFocus({stepId, location});
+    lastSourceTriggerRef.current = trigger;
+    setSourcePanelOpen(true);
+  }
+
+  function closeSourcePanel() {
+    const trigger = lastSourceTriggerRef.current;
+    const fallbackTrigger = sourceButtonRef.current;
+    setSourcePanelOpen(false);
+    // Defer so focus lands after the panel unmounts; clear the focus only after
+    // focusing so the opener button is still expanded (force-visible) on return.
+    window.setTimeout(() => {
+      const focusTarget = trigger?.isConnected ? trigger : fallbackTrigger;
+      focusTarget?.focus();
+      setSourceFocus(null);
+    }, 0);
+  }
+
+  function cancelRun() {
+    cancelMutation.mutate(undefined, {
+      onError: (error) => {
+        toast.error(cancelErrorMessage(error));
+      },
+    });
+  }
+
+  return (
+    <>
+      <div className="flex min-w-0 flex-1 flex-col">
+        <WorkflowRunSummary
+          workspaceId={workspaceId}
+          projectId={projectId}
+          run={runData}
+          sourceAvailable={sourceAvailable}
+          sourceOpen={sourcePanelOpen && sourceFocus === null}
+          sourcePanelId={sourcePanelId}
+          sourceButtonRef={sourceButtonRef}
+          onSourceToggle={toggleWholeWorkflowSource}
+          cancelling={cancelMutation.isPending}
+          onCancel={cancelRun}
+          rerunPending={rerunMutation.isPending}
+          onRerun={(mode) => void rerun(mode)}
+          latestAttempt={runData.latestAttempt}
+        />
+        {query.isError ? <WorkflowRunStaleError query={query} /> : null}
+        <div className="min-h-0 flex-1 overflow-auto bg-background-neutral-base p-16">
+          <div className="mx-auto flex w-full max-w-[1280px] flex-col gap-16">
+            <JobGraph
+              run={runData}
+              selectedJobId={selectedJob?.id}
+              onSelectedJobChange={selectJob}
+            />
+            {selectedJob ? (
+              <JobCard
+                workspaceId={workspaceId}
+                job={selectedJob}
+                selectedJobExecution={selectedJobExecution}
+                selectedAttemptId={selectedJob.carriedOver ? undefined : selectedAttemptId}
+                onSelectedJobExecutionChange={selectJobExecution}
+                onSelectedAttemptChange={selectionControlled ? selectAttempt : undefined}
+                sourcePanelId={sourcePanelId}
+                sourceAvailable={sourceAvailable}
+                focusedSourceStepId={sourceFocus?.stepId ?? null}
+                onOpenStepSource={openStepSource}
+              />
+            ) : null}
+          </div>
+        </div>
+      </div>
+      <WorkflowSourcePanel
+        id={sourcePanelId}
+        source={sourceSnapshot}
+        open={sourcePanelOpen && sourceAvailable}
+        onClose={closeSourcePanel}
+        highlightedLineRange={highlightedLineRange}
+        scrollHighlightedIntoView
+      />
+    </>
+  );
+}
+
+function cancelErrorMessage(error: unknown): string {
+  if (error instanceof ApiError && error.code === 'run-already-finished') {
+    return 'This workflow run has already finished.';
+  }
+  return 'Could not cancel workflow run.';
+}
+
+function findAttemptSelection(jobExecution: JobExecution, attemptId: string) {
+  for (const step of jobExecution.steps) {
+    const attempt = step.attempts.find((candidate) => candidate.id === attemptId);
+    if (attempt) return {stepId: step.id, attemptId: attempt.id};
+  }
+  return undefined;
+}

package/src/components/workflow-source-panel/index.ts

@@ -0,0 +1 @@
+export * from './workflow-source-panel.js';

package/src/components/workflow-source-panel/workflow-source-panel.stories.tsx

@@ -0,0 +1,110 @@
+import {argosScreenshot} from '@argos-ci/storybook/vitest';
+import type {Meta, StoryObj} from '@storybook/react';
+import {screen, waitFor} from 'storybook/test';
+import {WorkflowSourcePanel} from './workflow-source-panel.js';
+
+const meta = {
+  title: 'Workflows/SourcePanel',
+  component: WorkflowSourcePanel,
+  parameters: {
+    layout: 'fullscreen',
+    argos: {
+      modes: {
+        light: {theme: 'light'},
+        dark: {theme: 'dark'},
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="flex min-h-screen justify-end bg-background-neutral-base">
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    id: 'workflow-source-panel',
+    open: true,
+    source: {
+      format: 'yaml',
+      content: `name: deploy-web
+on:
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm test --filter=@shipfox/client-workflows`,
+    },
+    highlightedLineRange: {startLine: 10, endLine: 11},
+    onClose: () => undefined,
+  },
+} satisfies Meta<typeof WorkflowSourcePanel>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+type WorkflowSourcePanelStoryContext = Parameters<NonNullable<Story['play']>>[0];
+
+async function captureHighlightedSourcePanel(
+  ctx: WorkflowSourcePanelStoryContext,
+  screenshotName: string,
+) {
+  await screen.findByRole('dialog', {name: 'Workflow source'});
+  await waitFor(
+    () => {
+      if (!document.querySelector('.shiki-override')) {
+        throw new Error('Shiki highlighting has not rendered yet');
+      }
+    },
+    {timeout: 10_000},
+  );
+  await argosScreenshot(ctx, screenshotName);
+}
+
+export const Playground: Story = {
+  play: async (ctx) => {
+    await captureHighlightedSourcePanel(ctx, 'Workflow Source Panel Open');
+  },
+};
+
+export const LongSource: Story = {
+  play: async (ctx) => {
+    await captureHighlightedSourcePanel(ctx, 'Workflow Source Panel Long Source');
+  },
+  args: {
+    source: {
+      format: 'yaml',
+      content: Array.from(
+        {length: 24},
+        (_, index) => `      - run: pnpm test --filter=@shipfox/package-${index + 1}`,
+      ).join('\n'),
+    },
+  },
+};
+
+export const HighlightedDeepInFile: Story = {
+  play: async (ctx) => {
+    await captureHighlightedSourcePanel(ctx, 'Workflow Source Panel Highlighted Deep In File');
+  },
+  args: {
+    source: {
+      format: 'yaml',
+      content: Array.from(
+        {length: 44},
+        (_, index) => `      - run: pnpm test --filter=@shipfox/package-${index + 1}`,
+      ).join('\n'),
+    },
+    highlightedLineRange: {startLine: 34, endLine: 36},
+    scrollHighlightedIntoView: true,
+  },
+};
+
+export const MissingSource: Story = {
+  args: {
+    open: false,
+    source: null,
+  },
+};

package/src/components/workflow-source-panel/workflow-source-panel.test.tsx

@@ -0,0 +1,96 @@
+import {render, screen, waitFor, within} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {WorkflowSourcePanel} from './workflow-source-panel.js';
+
+describe('WorkflowSourcePanel', () => {
+  test('renders workflow source in a labelled dialog', async () => {
+    renderPanel({open: true});
+
+    const dialog = await screen.findByRole('dialog', {name: 'Workflow source'});
+
+    expect(dialog).toHaveAttribute('id', 'workflow-source-panel');
+    expect(within(dialog).getByText('workflow.yaml')).toBeInTheDocument();
+    await waitFor(() => expect(dialog).toHaveTextContent('jobs:'));
+    expect(within(dialog).getByRole('button', {name: 'Copy to clipboard'})).toBeInTheDocument();
+    expect(within(dialog).getByRole('button', {name: 'Close source'})).toBeInTheDocument();
+  });
+
+  test('closes with Escape while focus is inside the sheet', async () => {
+    const user = userEvent.setup();
+    const onClose = vi.fn();
+    renderPanel({open: true, onClose});
+
+    (await screen.findByRole('button', {name: 'Close source'})).focus();
+    await user.keyboard('{Escape}');
+
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  test('closes from the close button through the sheet close path', async () => {
+    const user = userEvent.setup();
+    const onClose = vi.fn();
+    renderPanel({open: true, onClose});
+
+    await user.click(await screen.findByRole('button', {name: 'Close source'}));
+
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  test('does not expose sheet controls while closed', () => {
+    renderPanel({open: false});
+
+    expect(screen.queryByRole('dialog', {name: 'Workflow source'})).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', {name: 'Close source'})).not.toBeInTheDocument();
+  });
+
+  test('highlights the selected source line range', async () => {
+    renderPanel({
+      open: true,
+      highlightedLineRange: {startLine: 2, endLine: 3},
+    });
+
+    await screen.findByRole('dialog', {name: 'Workflow source'});
+
+    const highlightedLines = document.body.querySelectorAll('.line.highlighted-line');
+    expect(highlightedLines).toHaveLength(2);
+    expect(highlightedLines[0]).toHaveTextContent('build:');
+    expect(highlightedLines[1]).toHaveTextContent('steps: []');
+  });
+
+  test('renders source without highlighted lines when no range is provided', async () => {
+    renderPanel({open: true});
+
+    await screen.findByRole('dialog', {name: 'Workflow source'});
+
+    expect(document.body.querySelector('.line.highlighted-line')).toBeNull();
+  });
+
+  test('does not render a sheet without source content', () => {
+    renderPanel({open: true, source: null});
+
+    expect(screen.queryByRole('dialog', {name: 'Workflow source'})).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', {name: 'Close source'})).not.toBeInTheDocument();
+  });
+});
+
+function renderPanel({
+  open,
+  source = {format: 'yaml', content: 'jobs:\n  build:\n    steps: []'},
+  onClose = vi.fn(),
+  highlightedLineRange,
+}: {
+  open: boolean;
+  source?: Parameters<typeof WorkflowSourcePanel>[0]['source'];
+  onClose?: () => void;
+  highlightedLineRange?: Parameters<typeof WorkflowSourcePanel>[0]['highlightedLineRange'];
+}) {
+  return render(
+    <WorkflowSourcePanel
+      id="workflow-source-panel"
+      open={open}
+      source={source}
+      onClose={onClose}
+      highlightedLineRange={highlightedLineRange}
+    />,
+  );
+}

package/src/components/workflow-source-panel/workflow-source-panel.tsx

@@ -0,0 +1,136 @@
+import {Button} from '@shipfox/react-ui/button';
+import {
+  CodeBlock,
+  CodeBlockBody,
+  CodeBlockContent,
+  CodeBlockCopyButton,
+  CodeBlockFilename,
+  CodeBlockFiles,
+  CodeBlockHeader,
+  type CodeBlockHighlightedLineRange,
+  CodeBlockItem,
+} from '@shipfox/react-ui/code-block';
+import {Sheet, SheetClose, SheetContent, SheetTitle} from '@shipfox/react-ui/sheet';
+import {cn} from '@shipfox/react-ui/utils';
+import type {WorkflowSourceSnapshot} from '#core/workflow-run.js';
+
+const WORKFLOW_SOURCE_FILENAME = 'workflow.yaml';
+const WORKFLOW_SOURCE_CODE_THEMES = {
+  light: 'vitesse-dark',
+  dark: 'vitesse-dark',
+};
+
+export interface WorkflowSourcePanelProps {
+  id: string;
+  source: WorkflowSourceSnapshot | null;
+  open: boolean;
+  onClose: () => void;
+  highlightedLineRange?: CodeBlockHighlightedLineRange | null | undefined;
+  scrollHighlightedIntoView?: boolean | undefined;
+  className?: string | undefined;
+}
+
+export function WorkflowSourcePanel({
+  id,
+  source,
+  open,
+  onClose,
+  highlightedLineRange,
+  scrollHighlightedIntoView,
+  className,
+}: WorkflowSourcePanelProps) {
+  const sheetOpen = open && source !== null;
+
+  if (!sheetOpen) return null;
+
+  return (
+    <Sheet
+      open
+      onOpenChange={(nextOpen) => {
+        if (!nextOpen) onClose();
+      }}
+    >
+      {source ? (
+        <SheetContent
+          id={id}
+          side="right"
+          aria-describedby={undefined}
+          className={cn(
+            'w-screen max-w-none border-l-0 bg-background-contrast-base p-0 shadow-none sm:w-[min(85vw,1120px)] sm:max-w-none [&_.shadow-separator-inset]:shadow-none',
+            className,
+          )}
+        >
+          <SheetTitle className="sr-only">Workflow source</SheetTitle>
+          <WorkflowSourcePanelContent
+            source={source}
+            highlightedLineRange={highlightedLineRange}
+            scrollHighlightedIntoView={scrollHighlightedIntoView}
+          />
+        </SheetContent>
+      ) : null}
+    </Sheet>
+  );
+}
+
+function WorkflowSourcePanelContent({
+  source,
+  highlightedLineRange,
+  scrollHighlightedIntoView,
+}: {
+  source: WorkflowSourceSnapshot;
+  highlightedLineRange: CodeBlockHighlightedLineRange | null | undefined;
+  scrollHighlightedIntoView: boolean | undefined;
+}) {
+  const data = [
+    {
+      language: 'yaml',
+      filename: WORKFLOW_SOURCE_FILENAME,
+      code: source.content,
+    },
+  ];
+
+  return (
+    <CodeBlock
+      data={data}
+      className="flex size-full flex-col rounded-none bg-background-contrast-base shadow-none"
+    >
+      <CodeBlockHeader className="shrink-0 border-b border-border-contrast-base bg-background-contrast-base">
+        <CodeBlockFiles>
+          {(item) => <CodeBlockFilename value={item.filename}>{item.filename}</CodeBlockFilename>}
+        </CodeBlockFiles>
+        <CodeBlockCopyButton />
+        <SheetClose asChild>
+          <Button
+            type="button"
+            variant="transparentMuted"
+            size="sm"
+            iconLeft="close"
+            aria-label="Close source"
+          />
+        </SheetClose>
+      </CodeBlockHeader>
+      <CodeBlockBody className="flex min-h-0 flex-1 overflow-auto scrollbar">
+        {(item) => (
+          <CodeBlockItem
+            value={item.filename}
+            className={cn(
+              'min-h-full px-0 pb-0',
+              '[&>div]:rounded-none [&>div]:border-0 [&>div]:bg-background-contrast-base [&>div]:dark:bg-background-contrast-base',
+              '[&_code]:!text-sm [&_code]:!text-foreground-neutral-on-inverted [&_.line]:!text-sm [&_.line]:before:!text-sm [&_.line]:before:!text-foreground-neutral-muted',
+            )}
+          >
+            <CodeBlockContent
+              language="yaml"
+              themes={WORKFLOW_SOURCE_CODE_THEMES}
+              syntaxHighlighting
+              highlightedLineRange={highlightedLineRange}
+              scrollHighlightedIntoView={scrollHighlightedIntoView}
+            >
+              {item.code}
+            </CodeBlockContent>
+          </CodeBlockItem>
+        )}
+      </CodeBlockBody>
+    </CodeBlock>
+  );
+}