feat: view customize on run and runCases pane

frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/RunEditor.tsx

@@ -221,6 +221,7 @@ export default function RunEditor({ projectId, runId, messages, locale }: Props)
         <Button
           startContent={<Save size={16} />}
           size="sm"
+          isDisabled={!context.isProjectReporter(Number(projectId))}
           color="primary"
           isLoading={isUpdating}
           onPress={async () => {
@@ -310,7 +311,12 @@ export default function RunEditor({ projectId, runId, messages, locale }: Props)
             {(selectedKeys.size > 0 || selectedKeys === 'all') && (
               <Dropdown>
                 <DropdownTrigger>
-                  <Button size="sm" color="primary" endContent={<ChevronDown size={16} />}>
+                  <Button
+                    size="sm"
+                    isDisabled={!context.isProjectReporter(Number(projectId))}
+                    color="primary"
+                    endContent={<ChevronDown size={16} />}
+                  >
                     {messages.testCaseSelection}
                   </Button>
                 </DropdownTrigger>
@@ -351,6 +357,7 @@ export default function RunEditor({ projectId, runId, messages, locale }: Props)
           <div className="w-9/12">
             <TestCaseSelector
               cases={testcases}
+              isDisabled={!context.isProjectReporter(Number(projectId))}
               selectedKeys={selectedKeys}
               onSelectionChange={setSelectedKeys}
               onStatusChange={handleChangeStatus}

frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/TestCaseSelector.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import {
   Table,
   TableHeader,
@@ -31,6 +31,7 @@ import { RunsMessages } from '@/types/run';
 
 type Props = {
   cases: CaseType[];
+  isDisabled: boolean;
   selectedKeys: Selection;
   onSelectionChange: React.Dispatch<React.SetStateAction<Selection>>;
   onStatusChange: (changeCaseId: number, status: number) => {};
@@ -41,6 +42,7 @@ type Props = {
 
 export default function TestCaseSelector({
   cases,
+  isDisabled,
   selectedKeys,
   onSelectionChange,
   onStatusChange,
@@ -56,6 +58,22 @@ export default function TestCaseSelector({
     { name: messages.actions, uid: 'actions' },
   ];
 
+  const [disabledStatusKeys, setDisabledStatusKeys] = useState<string[]>([]);
+  const [disabledIncludeExcludeKeys, setDisabledIncludeExcludeKeys] = useState<string[]>([]);
+  useEffect(() => {
+    if (isDisabled) {
+      setDisabledStatusKeys(
+        testRunCaseStatus.map((entry) => {
+          return entry.uid;
+        })
+      );
+      setDisabledIncludeExcludeKeys(['include', 'exclude']);
+    } else {
+      setDisabledStatusKeys([]);
+      setDisabledIncludeExcludeKeys([]);
+    }
+  }, [isDisabled]);
+
   const [sortDescriptor, setSortDescriptor] = useState<SortDescriptor>({
     column: 'id',
     direction: 'ascending',
@@ -118,10 +136,10 @@ export default function TestCaseSelector({
                 <span className="w-12">{isIncluded && messages[testRunCaseStatus[cellValue].uid]}</span>
               </Button>
             </DropdownTrigger>
-            <DropdownMenu aria-label="test case actions">
+            <DropdownMenu disabledKeys={disabledStatusKeys} aria-label="test case actions">
               {testRunCaseStatus.map((runCaseStatus, index) => (
                 <DropdownItem
-                  key={index}
+                  key={runCaseStatus.uid}
                   startContent={renderStatusIcon(runCaseStatus.uid)}
                   onPress={() => onStatusChange(testCase.id, index)}
                 >
@@ -139,18 +157,28 @@ export default function TestCaseSelector({
                 <MoreVertical size={16} />
               </Button>
             </DropdownTrigger>
-            <DropdownMenu aria-label="include or exclude actions">
+            <DropdownMenu disabledKeys={disabledIncludeExcludeKeys} aria-label="include or exclude actions">
               <DropdownItem
+                key="include"
                 startContent={<CopyPlus size={16} />}
-                isDisabled={testCase.isIncluded}
-                onPress={() => onIncludeCase(testCase.id)}
+                onPress={() => {
+                  if (testCase.isIncluded) {
+                    return;
+                  }
+                  onIncludeCase(testCase.id);
+                }}
               >
                 {messages.includeInRun}
               </DropdownItem>
               <DropdownItem
+                key="exclude"
                 startContent={<CopyMinus size={16} />}
-                isDisabled={!testCase.isIncluded}
-                onPress={() => onExcludeCase(testCase.id)}
+                onPress={() => {
+                  if (!testCase.isIncluded) {
+                    return;
+                  }
+                  onExcludeCase(testCase.id);
+                }}
               >
                 {messages.excludeFromRun}
               </DropdownItem>