Merge pull request #388 from LIT-Protocol/feat/ability-version-selection

chore(dashboard): bug fixes, update ability version selections

Author: spacesailor24

packages/apps/app-dashboard/src/components/developer-dashboard/AbilitySelectorModal.tsx

@@ -1,11 +1,14 @@
+import { useState } from 'react';
 import { AgGridReact } from 'ag-grid-react';
 import {
   ColDef,
   ICellRendererParams,
   ModuleRegistry,
   AllCommunityModule,
   RowClickedEvent,
+  RowClassParams,
 } from 'ag-grid-community';
+import { X } from 'lucide-react';
 
 import { Ability } from '@/types/developer-dashboard/appTypes';
 import {
@@ -17,22 +20,68 @@ import {
 } from '@/components/shared/ui/dialog';
 import { Button } from '@/components/shared/ui/button';
 import { theme, fonts } from '@/components/user-dashboard/connect/ui/theme';
+import { AbilityVersionSelectorModal } from './AbilityVersionSelectorModal';
 
 // Register AG Grid modules
 ModuleRegistry.registerModules([AllCommunityModule]);
 
-// Static column definitions
-const TOOL_GRID_COLUMNS: ColDef[] = [
+interface SelectedAbilityWithVersion {
+  ability: Ability;
+  version: string;
+}
+
+// Dynamic column definitions based on selected abilities
+const createToolGridColumns = (
+  selectedAbilities: Map<string, SelectedAbilityWithVersion>,
+  onAddClick: (ability: Ability) => void,
+  onRemoveClick: (packageName: string) => void,
+): ColDef[] => [
+  {
+    headerName: '',
+    field: 'packageName',
+    width: 80,
+    maxWidth: 80,
+    minWidth: 80,
+    suppressNavigable: true,
+    cellRenderer: (params: ICellRendererParams) => {
+      const isSelected = selectedAbilities.has(params.value);
+      return (
+        <div className="flex items-center justify-center h-full">
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              if (isSelected) {
+                onRemoveClick(params.value);
+              } else {
+                onAddClick(params.data);
+              }
+            }}
+            className={`px-3 py-1 text-xs font-semibold rounded transition-colors ${
+              isSelected
+                ? 'bg-gray-300 dark:bg-gray-600 text-gray-500 dark:text-gray-400 hover:bg-gray-400 dark:hover:bg-gray-500'
+                : 'text-white hover:opacity-90'
+            }`}
+            style={!isSelected ? { backgroundColor: theme.brandOrange } : undefined}
+          >
+            {isSelected ? 'Added' : 'Add'}
+          </button>
+        </div>
+      );
+    },
+  },
   {
     headerName: 'Ability Name',
     field: 'title',
     flex: 2,
     minWidth: 200,
     cellRenderer: (params: ICellRendererParams) => {
+      const isSelected = selectedAbilities.has(params.data.packageName);
       return (
         <div className="flex items-center justify-between h-full">
           <div>
-            <div className="font-medium">{params.value || params.data.packageName}</div>
+            <div className={`font-medium ${isSelected ? 'font-semibold' : ''}`}>
+              {params.value || params.data.packageName}
+            </div>
           </div>
         </div>
       );
@@ -74,11 +123,21 @@ const TOOL_GRID_COLUMNS: ColDef[] = [
     headerName: 'Version',
     field: 'activeVersion',
     flex: 1,
-    minWidth: 100,
+    minWidth: 120,
     cellRenderer: (params: ICellRendererParams) => {
+      const selected = selectedAbilities.get(params.data.packageName);
+      const displayVersion = selected ? selected.version : params.value;
+      const isSelected = !!selected;
       return (
         <div className="flex items-center h-full">
-          <span>{params.value}</span>
+          <span className={isSelected ? 'font-semibold' : ''}>
+            {displayVersion}
+            {isSelected && (
+              <span className="ml-2 text-xs" style={{ color: theme.brandOrange }}>
+                (selected)
+              </span>
+            )}
+          </span>
         </div>
       );
     },
@@ -123,28 +182,102 @@ export function AbilitySelectorModal({
   existingAbilities,
   availableAbilities,
 }: AbilitySelectorModalProps) {
-  // Filter out already added abilities
+  const [selectedAbility, setSelectedAbility] = useState<Ability | null>(null);
+  const [isVersionSelectorOpen, setIsVersionSelectorOpen] = useState(false);
+  const [selectedAbilities, setSelectedAbilities] = useState<
+    Map<string, SelectedAbilityWithVersion>
+  >(new Map());
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  // Filter out already added abilities and deleted abilities
   const filteredAbilities = availableAbilities.filter(
-    (ability) => !existingAbilities.includes(ability.packageName),
+    (ability) => !existingAbilities.includes(ability.packageName) && !ability.isDeleted,
   );
 
+  const handleAddClick = (ability: Ability) => {
+    // Open version selector modal to select
+    setSelectedAbility(ability);
+    setIsVersionSelectorOpen(true);
+  };
+
   const handleRowClick = async (event: RowClickedEvent) => {
     const ability = event.data;
     if (!ability) {
       return;
     }
 
-    await onAbilityAdd(ability);
+    // Only allow deselection via row click
+    if (selectedAbilities.has(ability.packageName)) {
+      handleRemoveSelection(ability.packageName);
+    }
+  };
+
+  const handleVersionSelect = async (version: string) => {
+    if (!selectedAbility) return;
+
+    // Add to selected abilities map
+    setSelectedAbilities((prev) => {
+      const newMap = new Map(prev);
+      newMap.set(selectedAbility.packageName, {
+        ability: selectedAbility,
+        version: version,
+      });
+      return newMap;
+    });
+
+    // Close version selector modal but keep ability selector open
+    setIsVersionSelectorOpen(false);
+    setSelectedAbility(null);
+  };
+
+  const handleRemoveSelection = (packageName: string) => {
+    setSelectedAbilities((prev) => {
+      const newMap = new Map(prev);
+      newMap.delete(packageName);
+      return newMap;
+    });
+  };
+
+  const handleAddAbilities = async () => {
+    if (selectedAbilities.size === 0) return;
+
+    setIsSubmitting(true);
+    try {
+      // Add all selected abilities in parallel
+      await Promise.all(
+        Array.from(selectedAbilities.values()).map(({ ability, version }) => {
+          const abilityWithVersion = {
+            ...ability,
+            activeVersion: version,
+          };
+          return onAbilityAdd(abilityWithVersion);
+        }),
+      );
+
+      // Clear selections but keep modal open for more selections
+      setSelectedAbilities(new Map());
+    } catch (error) {
+      console.error('Failed to add abilities:', error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleVersionSelectorClose = () => {
+    setIsVersionSelectorOpen(false);
+    setSelectedAbility(null);
   };
 
   const handleOpenChange = (open: boolean) => {
     if (!open) {
+      setSelectedAbilities(new Map());
       onClose();
     }
   };
 
-  const getRowClass = () => {
-    return 'cursor-pointer hover:bg-gray-50 dark:hover:bg-neutral-700';
+  const getRowClass = (params: RowClassParams) => {
+    const isSelected = selectedAbilities.has(params.data?.packageName);
+    return `cursor-pointer hover:bg-gray-50 dark:hover:bg-neutral-700 ${isSelected ? 'bg-orange-50 dark:bg-orange-900/10' : ''}`;
   };
 
   return (
@@ -158,9 +291,8 @@ export function AbilitySelectorModal({
             Add Abilities to App Version
           </DialogTitle>
           <DialogDescription className={`${theme.textMuted}`} style={fonts.body}>
-            Click any ability to add it immediately to your app version.
-            {existingAbilities.length > 0 &&
-              ` (${existingAbilities.length} abilities already added)`}
+            Click "Add" to select a version for an ability. Click "Added" to deselect. You can
+            select multiple abilities before adding them.
           </DialogDescription>
         </DialogHeader>
 
@@ -182,7 +314,11 @@ export function AbilitySelectorModal({
           >
             <AgGridReact
               rowData={filteredAbilities}
-              columnDefs={TOOL_GRID_COLUMNS}
+              columnDefs={createToolGridColumns(
+                selectedAbilities,
+                handleAddClick,
+                handleRemoveSelection,
+              )}
               defaultColDef={DEFAULT_COL_DEF}
               onRowClicked={handleRowClick}
               getRowClass={getRowClass}
@@ -195,12 +331,86 @@ export function AbilitySelectorModal({
           </div>
         </div>
 
-        <div className={`flex justify-end gap-2 pt-4 border-t ${theme.cardBorder} flex-shrink-0`}>
-          <Button variant="outline" onClick={onClose}>
-            Close
-          </Button>
+        {/* Selected Abilities List */}
+        {selectedAbilities.size > 0 && (
+          <div className={`flex-shrink-0 border ${theme.mainCardBorder} rounded-lg p-4`}>
+            <div className="flex items-center justify-between mb-2">
+              <h4 className={`text-sm font-semibold ${theme.text}`} style={fonts.heading}>
+                Selected Abilities ({selectedAbilities.size})
+              </h4>
+            </div>
+            <div className="space-y-2 max-h-32 overflow-y-auto">
+              {Array.from(selectedAbilities.values()).map(({ ability, version }) => (
+                <div
+                  key={ability.packageName}
+                  className={`flex items-center justify-between px-3 py-2 rounded-lg ${theme.itemBg}`}
+                >
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2">
+                      <span className={`text-sm font-medium ${theme.text} truncate`}>
+                        {ability.title || ability.packageName}
+                      </span>
+                      <span
+                        className="text-xs px-2 py-0.5 rounded"
+                        style={{ backgroundColor: theme.brandOrange, color: 'white' }}
+                      >
+                        v{version}
+                      </span>
+                    </div>
+                    <div className={`text-xs ${theme.textMuted} font-mono truncate`}>
+                      {ability.packageName}
+                    </div>
+                  </div>
+                  <button
+                    onClick={() => handleRemoveSelection(ability.packageName)}
+                    className={`ml-2 p-1 rounded hover:bg-red-100 dark:hover:bg-red-900/30`}
+                    title="Remove from selection"
+                  >
+                    <X className="w-4 h-4 text-red-600 dark:text-red-400" />
+                  </button>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        <div
+          className={`flex justify-between items-center gap-2 pt-4 border-t ${theme.cardBorder} flex-shrink-0`}
+        >
+          <div className={`text-sm ${theme.textMuted}`}>
+            {selectedAbilities.size > 0 ? (
+              <span>
+                {selectedAbilities.size} {selectedAbilities.size === 1 ? 'ability' : 'abilities'}{' '}
+                selected
+              </span>
+            ) : (
+              <span>Select abilities to add to your app version</span>
+            )}
+          </div>
+          <div className="flex gap-2">
+            <Button variant="outline" onClick={onClose} disabled={isSubmitting}>
+              Cancel
+            </Button>
+            <Button
+              onClick={handleAddAbilities}
+              disabled={selectedAbilities.size === 0 || isSubmitting}
+              style={{ backgroundColor: theme.brandOrange, ...fonts.body }}
+            >
+              {isSubmitting
+                ? 'Adding Abilities...'
+                : `Add ${selectedAbilities.size > 0 ? selectedAbilities.size : ''} ${selectedAbilities.size === 1 ? 'Ability' : 'Abilities'}`}
+            </Button>
+          </div>
         </div>
       </DialogContent>
+
+      {/* Version Selector Modal */}
+      <AbilityVersionSelectorModal
+        isOpen={isVersionSelectorOpen}
+        onClose={handleVersionSelectorClose}
+        onVersionSelect={handleVersionSelect}
+        ability={selectedAbility}
+      />
     </Dialog>
   );
 }