feat: add collapsible component and integrate it into OrganizationStrategy for improved UI

2025-12-06 19:46:44 +03:00 · 2025-06-15 13:08:39 +05:30
parent 1be53bfa87
commit 42314ab0e3
4 changed files with 78 additions and 20 deletions
--- a/bun.lock
+++ b/bun.lock
@@ -10,6 +10,7 @@
        "@octokit/rest": "^21.1.1",
        "@radix-ui/react-avatar": "^1.1.9",
        "@radix-ui/react-checkbox": "^1.3.1",
+        "@radix-ui/react-collapsible": "^1.1.11",
        "@radix-ui/react-dialog": "^1.1.13",
        "@radix-ui/react-dropdown-menu": "^2.1.14",
        "@radix-ui/react-label": "^2.1.6",
@@ -282,6 +283,8 @@

    "@radix-ui/react-checkbox": ["@radix-ui/react-checkbox@1.3.2", "", { "dependencies": { "@radix-ui/primitive": "1.1.2", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-presence": "1.1.4", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-previous": "1.1.1", "@radix-ui/react-use-size": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-yd+dI56KZqawxKZrJ31eENUwqc1QSqg4OZ15rybGjF2ZNwMO+wCyHzAVLRp9qoYJf7kYy0YpZ2b0JCzJ42HZpA=="],

+    "@radix-ui/react-collapsible": ["@radix-ui/react-collapsible@1.1.11", "", { "dependencies": { "@radix-ui/primitive": "1.1.2", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-presence": "1.1.4", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-2qrRsVGSCYasSz1RFOorXwl0H7g7J1frQtgpQgYrt+MOidtPAINHn9CPovQXb83r8ahapdx3Tu0fa/pdFFSdPg=="],
+
    "@radix-ui/react-collection": ["@radix-ui/react-collection@1.1.7", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw=="],

    "@radix-ui/react-compose-refs": ["@radix-ui/react-compose-refs@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg=="],
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
    "@octokit/rest": "^21.1.1",
    "@radix-ui/react-avatar": "^1.1.9",
    "@radix-ui/react-checkbox": "^1.3.1",
+    "@radix-ui/react-collapsible": "^1.1.11",
    "@radix-ui/react-dialog": "^1.1.13",
    "@radix-ui/react-dropdown-menu": "^2.1.14",
    "@radix-ui/react-label": "^2.1.6",
--- a/src/components/config/OrganizationStrategy.tsx
+++ b/src/components/config/OrganizationStrategy.tsx
@@ -1,10 +1,10 @@
-import React from "react";
+import React, { useState } from "react";
 import { Card } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { Badge } from "@/components/ui/badge";
-import { Info, GitBranch, FolderTree, Package, Star, Building2, User } from "lucide-react";
+import { Info, GitBranch, FolderTree, Package, Star, Building2, User, ChevronDown, ChevronUp } from "lucide-react";
 import {
  Tooltip,
  TooltipContent,
@@ -12,6 +12,11 @@ import {
  TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";

 export type MirrorStrategy = "preserve" | "single-org" | "flat-user";

@@ -74,7 +79,12 @@ const StrategyVisualizer: React.FC<{
  starredReposOrg?: string;
  githubUsername?: string;
  giteaUsername?: string;
-}> = ({ strategy, destinationOrg, starredReposOrg, githubUsername = "you", giteaUsername = "you" }) => {
+}> = ({ strategy, destinationOrg, starredReposOrg, githubUsername, giteaUsername }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const displayGithubUsername = githubUsername || "<username>";
+  const displayGiteaUsername = giteaUsername || "<username>";
+  const isGithubPlaceholder = !githubUsername;
+  const isGiteaPlaceholder = !giteaUsername;
  const renderPreserveStructure = () => (
    <div className="flex items-center justify-between gap-8 p-6">
      <div className="flex-1">
@@ -82,7 +92,7 @@ const StrategyVisualizer: React.FC<{
        <div className="space-y-2">
          <div className="flex items-center gap-2 p-2 bg-gray-50 dark:bg-gray-800 rounded">
            <User className="h-4 w-4" />
-            <span className="text-sm">{githubUsername}/my-repo</span>
+            <span className={cn("text-sm", isGithubPlaceholder && "text-muted-foreground italic")}>{displayGithubUsername}/my-repo</span>
          </div>
          <div className="flex items-center gap-2 p-2 bg-gray-50 dark:bg-gray-800 rounded">
            <Building2 className="h-4 w-4" />
@@ -104,7 +114,7 @@ const StrategyVisualizer: React.FC<{
        <div className="space-y-2">
          <div className="flex items-center gap-2 p-2 bg-blue-50 dark:bg-blue-950/30 rounded">
            <User className="h-4 w-4 text-blue-600 dark:text-blue-400" />
-            <span className="text-sm">{giteaUsername}/my-repo</span>
+            <span className={cn("text-sm", isGiteaPlaceholder && "text-muted-foreground italic")}>{displayGiteaUsername}/my-repo</span>
          </div>
          <div className="flex items-center gap-2 p-2 bg-blue-50 dark:bg-blue-950/30 rounded">
            <Building2 className="h-4 w-4 text-blue-600 dark:text-blue-400" />
@@ -126,7 +136,7 @@ const StrategyVisualizer: React.FC<{
        <div className="space-y-2">
          <div className="flex items-center gap-2 p-2 bg-gray-50 dark:bg-gray-800 rounded">
            <User className="h-4 w-4" />
-            <span className="text-sm">{githubUsername}/my-repo</span>
+            <span className={cn("text-sm", isGithubPlaceholder && "text-muted-foreground italic")}>{displayGithubUsername}/my-repo</span>
          </div>
          <div className="flex items-center gap-2 p-2 bg-gray-50 dark:bg-gray-800 rounded">
            <Building2 className="h-4 w-4" />
@@ -170,7 +180,7 @@ const StrategyVisualizer: React.FC<{
        <div className="space-y-2">
          <div className="flex items-center gap-2 p-2 bg-gray-50 dark:bg-gray-800 rounded">
            <User className="h-4 w-4" />
-            <span className="text-sm">{githubUsername}/my-repo</span>
+            <span className={cn("text-sm", isGithubPlaceholder && "text-muted-foreground italic")}>{displayGithubUsername}/my-repo</span>
          </div>
          <div className="flex items-center gap-2 p-2 bg-gray-50 dark:bg-gray-800 rounded">
            <Building2 className="h-4 w-4" />
@@ -192,11 +202,11 @@ const StrategyVisualizer: React.FC<{
        <div className="space-y-2">
          <div className="flex items-center gap-2 p-2 bg-green-50 dark:bg-green-950/30 rounded">
            <User className="h-4 w-4 text-green-600 dark:text-green-400" />
-            <span className="text-sm">{giteaUsername}/my-repo</span>
+            <span className={cn("text-sm", isGiteaPlaceholder && "text-muted-foreground italic")}>{displayGiteaUsername}/my-repo</span>
          </div>
          <div className="flex items-center gap-2 p-2 bg-green-50 dark:bg-green-950/30 rounded">
            <User className="h-4 w-4 text-green-600 dark:text-green-400" />
-            <span className="text-sm">{giteaUsername}/team-repo</span>
+            <span className={cn("text-sm", isGiteaPlaceholder && "text-muted-foreground italic")}>{displayGiteaUsername}/team-repo</span>
          </div>
          <div className="flex items-center gap-2 p-2 bg-green-50 dark:bg-green-950/30 rounded">
            <Building2 className="h-4 w-4 text-green-600 dark:text-green-400" />
@@ -209,17 +219,30 @@ const StrategyVisualizer: React.FC<{

  return (
    <div className="mt-4">
-      <Card className="overflow-hidden">
-        <div className="bg-muted/50 p-3 border-b">
-          <h4 className="text-sm font-medium flex items-center gap-2">
-            <Package className="h-4 w-4" />
-            Repository Mapping Preview
-          </h4>
-        </div>
-        {strategy === "preserve" && renderPreserveStructure()}
-        {strategy === "single-org" && renderSingleOrg()}
-        {strategy === "flat-user" && renderFlatUser()}
-      </Card>
+      <Collapsible open={isOpen} onOpenChange={setIsOpen}>
+        <Card className="overflow-hidden">
+          <CollapsibleTrigger className="w-full">
+            <div className="bg-muted/50 p-3 border-b hover:bg-muted/70 transition-colors cursor-pointer">
+              <h4 className="text-sm font-medium flex items-center justify-between">
+                <span className="flex items-center gap-2">
+                  <Package className="h-4 w-4" />
+                  Repository Mapping Preview
+                </span>
+                {isOpen ? (
+                  <ChevronUp className="h-4 w-4 text-muted-foreground" />
+                ) : (
+                  <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                )}
+              </h4>
+            </div>
+          </CollapsibleTrigger>
+          <CollapsibleContent>
+            {strategy === "preserve" && renderPreserveStructure()}
+            {strategy === "single-org" && renderSingleOrg()}
+            {strategy === "flat-user" && renderFlatUser()}
+          </CollapsibleContent>
+        </Card>
+      </Collapsible>
    </div>
  );
 };
--- a/src/components/ui/collapsible.tsx
+++ b/src/components/ui/collapsible.tsx
@@ -0,0 +1,31 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  )
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }