@keboola/design 2.0.1 → 3.0.0

package/src/blocks/AIKit/PlanApproval.test.tsx

@@ -1,241 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { describe, expect, it, vi } from 'vitest';
-
-import { PlanApproval } from './PlanApproval';
-
-const baseProps = {
-  title: 'Audit plan for KIO',
-  summary: 'Short summary',
-  stepCount: 8,
-};
-
-describe('<PlanApproval />', () => {
-  it('renders the pending state with status pill, step count, and approve/request actions', () => {
-    render(
-      <PlanApproval
-        {...baseProps}
-        status="pending"
-        onApprove={vi.fn()}
-        onRequestChanges={vi.fn()}
-        onClose={vi.fn()}
-      />,
-    );
-
-    expect(screen.getByText('Ready for approval')).toBeInTheDocument();
-    expect(screen.getByText('8 steps')).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Approve' })).toBeEnabled();
-    expect(screen.getByRole('button', { name: 'Request Changes' })).toBeEnabled();
-    expect(screen.getByRole('button', { name: 'Dismiss plan' })).toBeEnabled();
-  });
-
-  it('renders the approved terminal state without action buttons or close', () => {
-    render(<PlanApproval {...baseProps} status="approved" planBody={<div>Body</div>} />);
-    expect(screen.getByText('Approved')).toBeInTheDocument();
-    expect(screen.queryByRole('button', { name: 'Approve' })).not.toBeInTheDocument();
-    expect(screen.queryByRole('button', { name: 'Request Changes' })).not.toBeInTheDocument();
-    expect(screen.queryByRole('button', { name: 'Dismiss plan' })).not.toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /Show more/i })).toBeInTheDocument();
-  });
-
-  it('renders the dismissed terminal state with a Dismissed pill', () => {
-    render(<PlanApproval {...baseProps} status="dismissed" />);
-    expect(screen.getByText('Dismissed')).toBeInTheDocument();
-    expect(screen.queryByRole('button', { name: 'Approve' })).not.toBeInTheDocument();
-  });
-
-  it('renders the changes-requested terminal state with a Changes Requested pill', () => {
-    render(<PlanApproval {...baseProps} status="changes-requested" />);
-    expect(screen.getByText('Changes Requested')).toBeInTheDocument();
-    expect(screen.queryByRole('button', { name: 'Approve' })).not.toBeInTheDocument();
-  });
-
-  it('singularizes the step count when stepCount is 1', () => {
-    render(<PlanApproval {...baseProps} stepCount={1} status="pending" />);
-    expect(screen.getByText('1 step')).toBeInTheDocument();
-  });
-
-  it('omits the step count label when stepCount is missing or zero', () => {
-    const { rerender } = render(<PlanApproval title="t" summary="s" status="pending" />);
-    expect(screen.queryByText(/step/)).not.toBeInTheDocument();
-    rerender(<PlanApproval title="t" summary="s" stepCount={0} status="pending" />);
-    expect(screen.queryByText(/step/)).not.toBeInTheDocument();
-  });
-
-  it('toggles the plan body when Show more / Show less is clicked', async () => {
-    const user = userEvent.setup();
-    render(
-      <PlanApproval
-        {...baseProps}
-        status="pending"
-        planBody={<div data-testid="plan-body">Whole plan</div>}
-      />,
-    );
-
-    expect(screen.queryByTestId('plan-body')).not.toBeInTheDocument();
-
-    await user.click(screen.getByRole('button', { name: /Show more/i }));
-    expect(screen.getByTestId('plan-body')).toBeInTheDocument();
-
-    await user.click(screen.getByRole('button', { name: /Show less/i }));
-    expect(screen.queryByTestId('plan-body')).not.toBeInTheDocument();
-  });
-
-  it('hides the Show more toggle when no plan body is provided', () => {
-    render(<PlanApproval {...baseProps} status="pending" />);
-    expect(screen.queryByRole('button', { name: /Show more/i })).not.toBeInTheDocument();
-  });
-
-  it('calls onApprove when the Approve button is clicked', async () => {
-    const onApprove = vi.fn();
-    const user = userEvent.setup();
-    render(<PlanApproval {...baseProps} status="pending" onApprove={onApprove} />);
-
-    await user.click(screen.getByRole('button', { name: 'Approve' }));
-    expect(onApprove).toHaveBeenCalledTimes(1);
-  });
-
-  it('calls onClose when the close button is clicked', async () => {
-    const onClose = vi.fn();
-    const user = userEvent.setup();
-    render(<PlanApproval {...baseProps} status="pending" onClose={onClose} />);
-
-    await user.click(screen.getByRole('button', { name: 'Dismiss plan' }));
-    expect(onClose).toHaveBeenCalledTimes(1);
-  });
-
-  it('opens the change-request textarea and submits trimmed reason via onRequestChanges', async () => {
-    const onRequestChanges = vi.fn();
-    const user = userEvent.setup();
-    render(
-      <PlanApproval
-        {...baseProps}
-        status="pending"
-        defaultExpanded
-        planBody={<div>Body</div>}
-        onRequestChanges={onRequestChanges}
-      />,
-    );
-
-    await user.click(screen.getByRole('button', { name: 'Request Changes' }));
-
-    const textarea = screen.getByLabelText('What would you like to change in the plan?');
-    expect(textarea).toBeInTheDocument();
-
-    await user.click(screen.getByRole('button', { name: 'Send change request' }));
-    expect(onRequestChanges).not.toHaveBeenCalled();
-
-    await user.type(textarea, '  please add a rollback step  ');
-    await user.click(screen.getByRole('button', { name: 'Send change request' }));
-
-    expect(onRequestChanges).toHaveBeenCalledTimes(1);
-    expect(onRequestChanges).toHaveBeenCalledWith('please add a rollback step');
-  });
-
-  it('disables Approve while composing a change request and re-enables on Cancel', async () => {
-    const onApprove = vi.fn();
-    const user = userEvent.setup();
-    render(
-      <PlanApproval
-        {...baseProps}
-        status="pending"
-        onApprove={onApprove}
-        onRequestChanges={vi.fn()}
-      />,
-    );
-
-    expect(screen.getByRole('button', { name: 'Approve' })).toBeEnabled();
-    await user.click(screen.getByRole('button', { name: 'Request Changes' }));
-    expect(screen.getByRole('button', { name: 'Approve' })).toBeDisabled();
-    expect(screen.getByRole('button', { name: 'Cancel' })).toBeEnabled();
-
-    await user.click(screen.getByRole('button', { name: 'Cancel' }));
-    expect(screen.getByRole('button', { name: 'Approve' })).toBeEnabled();
-    expect(screen.getByRole('button', { name: 'Request Changes' })).toBeInTheDocument();
-  });
-
-  it('auto-expands when Request Changes is clicked from the collapsed state', async () => {
-    const user = userEvent.setup();
-    render(
-      <PlanApproval
-        {...baseProps}
-        status="pending"
-        planBody={<div data-testid="plan-body">Body</div>}
-        onRequestChanges={vi.fn()}
-      />,
-    );
-
-    expect(screen.queryByTestId('plan-body')).not.toBeInTheDocument();
-    await user.click(screen.getByRole('button', { name: 'Request Changes' }));
-    expect(screen.getByTestId('plan-body')).toBeInTheDocument();
-  });
-
-  it('disables all interactive controls while submitting', () => {
-    render(
-      <PlanApproval
-        {...baseProps}
-        status="pending"
-        isSubmitting
-        onApprove={vi.fn()}
-        onRequestChanges={vi.fn()}
-        onClose={vi.fn()}
-      />,
-    );
-
-    expect(screen.getByRole('button', { name: 'Approve' })).toBeDisabled();
-    expect(screen.getByRole('button', { name: 'Request Changes' })).toBeDisabled();
-    expect(screen.getByRole('button', { name: 'Dismiss plan' })).toBeDisabled();
-  });
-
-  it('submits change request on Enter and inserts a newline on Shift+Enter', async () => {
-    const onRequestChanges = vi.fn();
-    const user = userEvent.setup();
-    render(
-      <PlanApproval
-        {...baseProps}
-        status="pending"
-        defaultExpanded
-        planBody={<div>Body</div>}
-        onRequestChanges={onRequestChanges}
-      />,
-    );
-
-    await user.click(screen.getByRole('button', { name: 'Request Changes' }));
-    const textarea = screen.getByLabelText('What would you like to change in the plan?');
-    await user.type(textarea, 'add rollback{Shift>}{Enter}{/Shift}step');
-    expect((textarea as HTMLTextAreaElement).value).toBe('add rollback\nstep');
-
-    fireEvent.keyDown(textarea, { key: 'Enter' });
-    expect(onRequestChanges).toHaveBeenCalledWith('add rollback\nstep');
-  });
-
-  it('respects controlled isExpanded and notifies onExpandToggle', async () => {
-    const onExpandToggle = vi.fn();
-    const user = userEvent.setup();
-    const { rerender } = render(
-      <PlanApproval
-        {...baseProps}
-        status="pending"
-        isExpanded={false}
-        onExpandToggle={onExpandToggle}
-        planBody={<div data-testid="plan-body">Body</div>}
-      />,
-    );
-
-    expect(screen.queryByTestId('plan-body')).not.toBeInTheDocument();
-    await user.click(screen.getByRole('button', { name: /Show more/i }));
-    expect(onExpandToggle).toHaveBeenCalledWith(true);
-    expect(screen.queryByTestId('plan-body')).not.toBeInTheDocument();
-
-    rerender(
-      <PlanApproval
-        {...baseProps}
-        status="pending"
-        isExpanded
-        onExpandToggle={onExpandToggle}
-        planBody={<div data-testid="plan-body">Body</div>}
-      />,
-    );
-    expect(screen.getByTestId('plan-body')).toBeInTheDocument();
-  });
-});

package/src/blocks/AIKit/PlanApproval.tsx

@@ -1,363 +0,0 @@
-import { type FormEvent, type KeyboardEvent, type ReactNode, useState } from 'react';
-
-import { Badge } from '../../components/Badge';
-import { Button } from '../../components/Button';
-import { Tooltip } from '../../components/Tooltip';
-import { ChevronDown, Send, X } from '../../icons';
-import { cn } from '../../utils';
-import { Textarea } from '../Textarea';
-
-type PlanApprovalStatus = 'pending' | 'approved' | 'dismissed' | 'changes-requested';
-
-type PlanApprovalProps = {
-  status: PlanApprovalStatus;
-  title: string;
-  summary?: ReactNode;
-  stepCount?: number;
-  planBody?: ReactNode;
-
-  defaultExpanded?: boolean;
-  isExpanded?: boolean;
-  onExpandToggle?: (next: boolean) => void;
-
-  onApprove?: () => void;
-  onRequestChanges?: (reason: string) => void;
-  onClose?: () => void;
-  isSubmitting?: boolean;
-  approveTooltip?: ReactNode;
-
-  pendingPillLabel?: string;
-  approvedPillLabel?: string;
-  dismissedPillLabel?: string;
-  changesRequestedPillLabel?: string;
-  approveLabel?: string;
-  requestChangesLabel?: string;
-  cancelLabel?: string;
-  showMoreLabel?: string;
-  showLessLabel?: string;
-  closeLabel?: string;
-  changeRequestPlaceholder?: string;
-  changeRequestSubmitLabel?: string;
-  stepCountLabel?: (count: number) => string;
-
-  className?: string;
-};
-
-const defaultStepCountLabel = (count: number) => `${count} step${count === 1 ? '' : 's'}`;
-
-const StatusPill = ({
-  status,
-  pendingLabel,
-  approvedLabel,
-  dismissedLabel,
-  changesRequestedLabel,
-}: {
-  status: PlanApprovalStatus;
-  pendingLabel: string;
-  approvedLabel: string;
-  dismissedLabel: string;
-  changesRequestedLabel: string;
-}) => {
-  if (status === 'approved') {
-    return (
-      <Badge color="green" variant="pill" className="tw-normal-case tw-tracking-normal">
-        {approvedLabel}
-      </Badge>
-    );
-  }
-  if (status === 'dismissed') {
-    return (
-      <Badge color="gray" variant="pill" className="tw-normal-case tw-tracking-normal">
-        {dismissedLabel}
-      </Badge>
-    );
-  }
-  if (status === 'changes-requested') {
-    return (
-      <Badge color="blue" variant="pill" className="tw-normal-case tw-tracking-normal">
-        {changesRequestedLabel}
-      </Badge>
-    );
-  }
-  return (
-    <Badge color="green" variant="pill" className="tw-normal-case tw-tracking-normal">
-      {pendingLabel}
-    </Badge>
-  );
-};
-
-const ExpandToggle = ({
-  isExpanded,
-  onToggle,
-  showMoreLabel,
-  showLessLabel,
-}: {
-  isExpanded: boolean;
-  onToggle: () => void;
-  showMoreLabel: string;
-  showLessLabel: string;
-}) => (
-  <button
-    type="button"
-    onClick={onToggle}
-    aria-expanded={isExpanded}
-    className="tailwindcss-preflight tw-inline-flex tw-cursor-pointer tw-items-center tw-gap-1 tw-bg-transparent tw-p-0 tw-text-sm tw-font-medium tw-text-secondary-500 hover:tw-text-secondary-600 focus-visible:tw-outline focus-visible:tw-outline-2 focus-visible:tw-outline-offset-2 focus-visible:tw-outline-secondary-500"
-  >
-    <span>{isExpanded ? showLessLabel : showMoreLabel}</span>
-    <ChevronDown
-      className={cn('tw-size-5 tw-transition-transform', isExpanded && 'tw-rotate-180')}
-    />
-  </button>
-);
-
-export const PlanApproval = ({
-  status,
-  title,
-  summary,
-  stepCount,
-  planBody,
-
-  defaultExpanded = false,
-  isExpanded: isExpandedProp,
-  onExpandToggle,
-
-  onApprove,
-  onRequestChanges,
-  onClose,
-  isSubmitting = false,
-  approveTooltip,
-
-  pendingPillLabel = 'Ready for approval',
-  approvedPillLabel = 'Approved',
-  dismissedPillLabel = 'Dismissed',
-  changesRequestedPillLabel = 'Changes Requested',
-  approveLabel = 'Approve',
-  requestChangesLabel = 'Request Changes',
-  cancelLabel = 'Cancel',
-  showMoreLabel = 'Show more',
-  showLessLabel = 'Show less',
-  closeLabel = 'Dismiss plan',
-  changeRequestPlaceholder = 'What would you like to change in the plan?',
-  changeRequestSubmitLabel = 'Send change request',
-  stepCountLabel = defaultStepCountLabel,
-
-  className,
-}: PlanApprovalProps) => {
-  const [uncontrolledExpanded, setUncontrolledExpanded] = useState(defaultExpanded);
-  const isExpanded = isExpandedProp ?? uncontrolledExpanded;
-  const [isRequestingChanges, setIsRequestingChanges] = useState(false);
-  const [changeRequest, setChangeRequest] = useState('');
-
-  const isPending = status === 'pending';
-  const showActions = isPending && (onApprove || onRequestChanges);
-  const showClose = isPending && Boolean(onClose);
-  const canShowPlanBody = planBody != null;
-  const trimmedChangeRequest = changeRequest.trim();
-  const canSubmitChangeRequest = trimmedChangeRequest.length > 0 && !isSubmitting;
-
-  const toggleExpanded = () => {
-    const next = !isExpanded;
-    if (isExpandedProp === undefined) {
-      setUncontrolledExpanded(next);
-    }
-    onExpandToggle?.(next);
-  };
-
-  const handleOpenRequestChanges = () => {
-    setIsRequestingChanges(true);
-    if (!isExpanded) {
-      toggleExpanded();
-    }
-  };
-
-  const handleCancelChangeRequest = () => {
-    setIsRequestingChanges(false);
-    setChangeRequest('');
-  };
-
-  const handleSubmitChangeRequest = (event?: FormEvent) => {
-    event?.preventDefault();
-    if (!canSubmitChangeRequest) return;
-    onRequestChanges?.(trimmedChangeRequest);
-  };
-
-  const handleTextareaKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
-    if (event.key === 'Enter' && !event.shiftKey) {
-      event.preventDefault();
-      handleSubmitChangeRequest();
-    }
-  };
-
-  return (
-    <section
-      aria-label={title}
-      className={cn(
-        'tw-flex tw-w-full tw-max-w-[800px] tw-flex-col tw-overflow-hidden tw-rounded-xl tw-border tw-border-solid tw-border-border tw-bg-neutral-50',
-        className,
-      )}
-      data-testid="plan-approval-root"
-      data-plan-status={status}
-    >
-      <div className="tw-flex tw-items-start tw-gap-2 tw-pl-4 tw-pr-2 tw-pt-4">
-        <div className="tw-flex tw-min-w-0 tw-flex-1 tw-flex-col tw-gap-2 tw-pb-4">
-          <div className="tw-flex tw-items-center tw-gap-3">
-            <StatusPill
-              status={status}
-              pendingLabel={pendingPillLabel}
-              approvedLabel={approvedPillLabel}
-              dismissedLabel={dismissedPillLabel}
-              changesRequestedLabel={changesRequestedPillLabel}
-            />
-            {stepCount != null && stepCount > 0 && (
-              <span className="tw-text-xs tw-leading-4 tw-text-neutral-500">
-                {stepCountLabel(stepCount)}
-              </span>
-            )}
-          </div>
-          <p className="tw-m-0 tw-text-base tw-font-semibold tw-leading-6 tw-text-neutral-800">
-            {title}
-          </p>
-        </div>
-        {showClose && (
-          <Button
-            argo
-            variant="outline"
-            size="icon-sm"
-            aria-label={closeLabel}
-            onClick={onClose}
-            disabled={isSubmitting}
-            data-testid="plan-close-button"
-          >
-            <X className="tw-size-4" />
-          </Button>
-        )}
-      </div>
-
-      {summary != null && (
-        <div
-          className={cn(
-            'tw-whitespace-pre-wrap tw-border-0 tw-border-t tw-border-solid tw-border-neutral-100 tw-px-4 tw-pt-4 tw-text-sm tw-text-neutral-700',
-            isExpanded && canShowPlanBody ? 'tw-pb-4' : 'tw-pb-2',
-          )}
-        >
-          {summary}
-        </div>
-      )}
-
-      {isExpanded && canShowPlanBody && (
-        <div className="tw-max-h-[400px] tw-overflow-y-auto tw-border-0 tw-border-t tw-border-solid tw-border-neutral-100 tw-bg-white tw-p-4 tw-text-sm tw-text-neutral-700">
-          {planBody}
-        </div>
-      )}
-
-      {isRequestingChanges && isPending && (
-        <form
-          onSubmit={handleSubmitChangeRequest}
-          className="tw-border-0 tw-border-t tw-border-solid tw-border-neutral-100 tw-bg-white tw-px-4 tw-py-3"
-          aria-label={requestChangesLabel}
-        >
-          <div className="tw-relative">
-            <Textarea
-              value={changeRequest}
-              onValueChange={setChangeRequest}
-              placeholder={changeRequestPlaceholder}
-              maxRows={4}
-              autoFocus
-              onKeyDown={handleTextareaKeyDown}
-              containerClassName="tw-pr-12"
-              disabled={isSubmitting}
-              aria-label={changeRequestPlaceholder}
-              data-testid="plan-change-request-input"
-            />
-            <Button
-              argo
-              type="submit"
-              variant="invisible"
-              size="icon-sm"
-              aria-label={changeRequestSubmitLabel}
-              disabled={!canSubmitChangeRequest}
-              className="tw-absolute tw-right-2 tw-top-1/2 tw--translate-y-1/2 [&_svg]:tw-text-secondary-500 not-disabled:hover:[&_svg]:tw-text-secondary-600"
-              data-testid="plan-change-request-submit"
-            >
-              <Send className="tw-size-4" />
-            </Button>
-          </div>
-        </form>
-      )}
-
-      <div
-        className={cn(
-          'tw-flex tw-items-center tw-border-0 tw-border-t tw-border-solid tw-border-neutral-100 tw-bg-white tw-px-4 tw-py-3',
-          canShowPlanBody ? 'tw-justify-between' : 'tw-justify-end',
-        )}
-      >
-        {canShowPlanBody && (
-          <ExpandToggle
-            isExpanded={isExpanded}
-            onToggle={toggleExpanded}
-            showMoreLabel={showMoreLabel}
-            showLessLabel={showLessLabel}
-          />
-        )}
-
-        {showActions && (
-          <div className="tw-flex tw-items-center tw-gap-2">
-            {isRequestingChanges ? (
-              <Button
-                argo
-                variant="outline"
-                size="small"
-                onClick={handleCancelChangeRequest}
-                disabled={isSubmitting}
-                data-testid="plan-cancel-button"
-              >
-                {cancelLabel}
-              </Button>
-            ) : (
-              onRequestChanges && (
-                <Button
-                  argo
-                  variant="outline"
-                  size="small"
-                  onClick={handleOpenRequestChanges}
-                  disabled={isSubmitting}
-                  data-testid="plan-request-changes-button"
-                >
-                  {requestChangesLabel}
-                </Button>
-              )
-            )}
-            {onApprove &&
-              (approveTooltip ? (
-                <Tooltip tooltip={approveTooltip} placement="top" triggerAsChild>
-                  <Button
-                    argo
-                    variant="primary"
-                    size="small"
-                    onClick={onApprove}
-                    disabled={isSubmitting || isRequestingChanges}
-                    data-testid="plan-approve-button"
-                  >
-                    {approveLabel}
-                  </Button>
-                </Tooltip>
-              ) : (
-                <Button
-                  argo
-                  variant="primary"
-                  size="small"
-                  onClick={onApprove}
-                  disabled={isSubmitting || isRequestingChanges}
-                  data-testid="plan-approve-button"
-                >
-                  {approveLabel}
-                </Button>
-              ))}
-          </div>
-        )}
-      </div>
-    </section>
-  );
-};
-
-export type { PlanApprovalStatus, PlanApprovalProps };

package/src/blocks/AIKit/PlanRewritingIndicator.test.tsx

@@ -1,17 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { describe, expect, it } from 'vitest';
-
-import { PlanRewritingIndicator } from './PlanRewritingIndicator';
-
-describe('<PlanRewritingIndicator />', () => {
-  it('renders the default label', () => {
-    render(<PlanRewritingIndicator />);
-    expect(screen.getByText('Rewriting the plan...')).toBeInTheDocument();
-    expect(screen.getByTestId('plan-rewriting-indicator')).toBeInTheDocument();
-  });
-
-  it('renders a custom label', () => {
-    render(<PlanRewritingIndicator label="Updating plan..." />);
-    expect(screen.getByText('Updating plan...')).toBeInTheDocument();
-  });
-});

package/src/blocks/AIKit/PlanRewritingIndicator.tsx

@@ -1,20 +0,0 @@
-import { Loader2 } from '../../icons';
-
-type PlanRewritingIndicatorProps = {
-  label?: string;
-};
-
-export const PlanRewritingIndicator = ({
-  label = 'Rewriting the plan...',
-}: PlanRewritingIndicatorProps) => (
-  <div
-    className="tw-flex tw-items-center tw-gap-2"
-    role="status"
-    data-testid="plan-rewriting-indicator"
-  >
-    <Loader2 className="tw-size-4 tw-animate-spin tw-text-secondary-500" />
-    <span className="tw-text-sm tw-italic tw-text-secondary-500">{label}</span>
-  </div>
-);
-
-export type { PlanRewritingIndicatorProps };