chore(dashboard): copilot review fixes, better types

Author: awisniew207

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

@@ -6,8 +6,9 @@ import {
   ModuleRegistry,
   AllCommunityModule,
   RowClickedEvent,
+  RowClassParams,
 } from 'ag-grid-community';
-import { CheckCircle2, X } from 'lucide-react';
+import { X } from 'lucide-react';
 
 import { Ability } from '@/types/developer-dashboard/appTypes';
 import {
@@ -32,19 +33,38 @@ interface SelectedAbilityWithVersion {
 // 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: 50,
-    maxWidth: 50,
-    minWidth: 50,
+    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">
-          {isSelected && <CheckCircle2 className="w-5 h-5" style={{ color: theme.brandOrange }} />}
+          <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>
       );
     },
@@ -174,21 +194,22 @@ export function AbilitySelectorModal({
     (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;
     }
 
-    // If already selected, deselect it
+    // Only allow deselection via row click
     if (selectedAbilities.has(ability.packageName)) {
       handleRemoveSelection(ability.packageName);
-      return;
     }
-
-    // Open version selector modal to select
-    setSelectedAbility(ability);
-    setIsVersionSelectorOpen(true);
   };
 
   const handleVersionSelect = async (version: string) => {
@@ -254,7 +275,7 @@ export function AbilitySelectorModal({
     }
   };
 
-  const getRowClass = (params: any) => {
+  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' : ''}`;
   };
@@ -270,8 +291,8 @@ export function AbilitySelectorModal({
             Add Abilities to App Version
           </DialogTitle>
           <DialogDescription className={`${theme.textMuted}`} style={fonts.body}>
-            Click any ability to select a version. Click again to deselect. You can select multiple
-            abilities before adding them.
+            Click "Add" to select a version for an ability. Click "Added" to deselect. You can
+            select multiple abilities before adding them.
           </DialogDescription>
         </DialogHeader>
 
@@ -293,7 +314,11 @@ export function AbilitySelectorModal({
           >
             <AgGridReact
               rowData={filteredAbilities}
-              columnDefs={createToolGridColumns(selectedAbilities)}
+              columnDefs={createToolGridColumns(
+                selectedAbilities,
+                handleAddClick,
+                handleRemoveSelection,
+              )}
               defaultColDef={DEFAULT_COL_DEF}
               onRowClicked={handleRowClick}
               getRowClass={getRowClass}

packages/apps/app-dashboard/src/components/developer-dashboard/ability/wrappers/AbilityVersionDetailsWrapper.tsx

@@ -5,7 +5,10 @@ import Loading from '@/components/shared/ui/Loading';
 import { StatusMessage } from '@/components/shared/ui/statusMessage';
 import { AbilityVersionDetailsView } from '../views/AbilityVersionDetailsView';
 import { Breadcrumb } from '@/components/shared/ui/Breadcrumb';
-import { EditAbilityVersionForm } from '../forms/EditAbilityVersionForm';
+import {
+  EditAbilityVersionForm,
+  EditAbilityVersionFormData,
+} from '../forms/EditAbilityVersionForm';
 import { DeleteAbilityVersionForm } from '../forms/DeleteAbilityVersionForm';
 import {
   Dialog,
@@ -67,7 +70,7 @@ export function AbilityVersionDetailsWrapper() {
     setCurrentView(mutationType as ViewType);
   };
 
-  const handleEditAbilityVersionSubmit = async (data: any) => {
+  const handleEditAbilityVersionSubmit = async (data: EditAbilityVersionFormData) => {
     setIsSubmitting(true);
     try {
       await editAbilityVersion({
@@ -76,10 +79,8 @@ export function AbilityVersionDetailsWrapper() {
         abilityVersionEdit: data,
       }).unwrap();
 
-      setTimeout(() => {
-        setCurrentView('details');
-        setIsSubmitting(false);
-      }, 1500);
+      setCurrentView('details');
+      setIsSubmitting(false);
     } catch (error) {
       console.error('Failed to update ability version:', error);
       setIsSubmitting(false);

packages/apps/app-dashboard/src/components/developer-dashboard/policy/wrappers/PolicyVersionDetailsWrapper.tsx

@@ -5,7 +5,7 @@ import Loading from '@/components/shared/ui/Loading';
 import { StatusMessage } from '@/components/shared/ui/statusMessage';
 import { PolicyVersionDetailsView } from '../views/PolicyVersionDetailsView';
 import { Breadcrumb } from '@/components/shared/ui/Breadcrumb';
-import { EditPolicyVersionForm } from '../forms/EditPolicyVersionForm';
+import { EditPolicyVersionForm, EditPolicyVersionFormData } from '../forms/EditPolicyVersionForm';
 import { DeletePolicyVersionForm } from '../forms/DeletePolicyVersionForm';
 import {
   Dialog,
@@ -69,7 +69,7 @@ export function PolicyVersionDetailsWrapper() {
     setCurrentView(mutationType as ViewType);
   };
 
-  const handleEditPolicyVersionSubmit = async (data: any) => {
+  const handleEditPolicyVersionSubmit = async (data: EditPolicyVersionFormData) => {
     setIsSubmitting(true);
     try {
       await editPolicyVersion({
@@ -78,10 +78,8 @@ export function PolicyVersionDetailsWrapper() {
         policyVersionEdit: data,
       }).unwrap();
 
-      setTimeout(() => {
-        setCurrentView('details');
-        setIsSubmitting(false);
-      }, 1500);
+      setCurrentView('details');
+      setIsSubmitting(false);
     } catch (error) {
       console.error('Failed to update policy version:', error);
       setIsSubmitting(false);