fix: OU-1195 coderabbit suggestions

Author: zhuje

web/locales/en/plugin__monitoring-plugin.json

@@ -170,9 +170,11 @@
   "Dashboard name": "Dashboard name",
   "Renaming...": "Renaming...",
   "Rename": "Rename",
+  "Duplicate Dashboard": "Duplicate Dashboard",
   "Loading...": "Loading...",
   "Failed to load project permissions. Please refresh the page and try again.": "Failed to load project permissions. Please refresh the page and try again.",
   "Select namespace": "Select namespace",
+  "No namespace found for \"{{filter}}\"": "No namespace found for \"{{filter}}\"",
   "Duplicate": "Duplicate",
   "this dashboard": "this dashboard",
   "Permanently delete dashboard?": "Permanently delete dashboard?",
@@ -197,7 +199,7 @@
   "Rename dashboard": "Rename dashboard",
   "Duplicate dashboard": "Duplicate dashboard",
   "Delete dashboard": "Delete dashboard",
-  "You don't have permissions to dashboard actions": "You don't have permissions to dashboard actions",
+  "You don't have permissions for dashboard actions": "You don't have permissions for dashboard actions",
   "Dashboard": "Dashboard",
   "Project": "Project",
   "Created on": "Created on",

web/src/components/dashboards/perses/dashboard-action-modals.tsx

@@ -304,7 +304,7 @@ export const DuplicateActionModal = ({ dashboard, isOpen, onClose }: ActionModal
       ouiaId="DuplicateModal"
       aria-labelledby="duplicate-modal"
     >
-      <ModalHeader title="Duplicate Dashboard" labelId="duplicate-modal-title" />
+      <ModalHeader title={t('Duplicate Dashboard')} labelId="duplicate-modal-title" />
       {permissionsLoading ? (
         <ModalBody style={{ textAlign: 'center', padding: '2rem' }}>
           {t('Loading...')} <Spinner aria-label="Duplicate Dashboard Modal Loading" />
@@ -373,10 +373,11 @@ export const DuplicateActionModal = ({ dashboard, isOpen, onClose }: ActionModal
                           initialOptions={projectOptions}
                           placeholder={t('Select namespace')}
                           noOptionsFoundMessage={(filter) =>
-                            t(`No namespace found for "${filter}"`)
+                            t('No namespace found for "{{filter}}"', { filter })
                           }
                           onClearSelection={() => {
                             setSelectedProject(null);
+                            form.setValue('projectName', '');
                           }}
                           onSelect={onProjectSelect}
                           isCreatable={false}

web/src/components/dashboards/perses/dashboard-create-dialog.tsx

@@ -145,6 +145,7 @@ export const DashboardCreateDialog: React.FunctionComponent = () => {
     if (isModalOpen) {
       setDashboardName('');
       setFormErrors({});
+      setSelectedProject(null);
     }
   };
 
@@ -156,29 +157,25 @@ export const DashboardCreateDialog: React.FunctionComponent = () => {
     setSelectedProject(selection);
   };
 
-  const CreateBtn = () => {
-    return (
-      <Button
-        variant="primary"
-        onClick={handleModalToggle}
-        isDisabled={disabled}
-        data-test={persesDashboardDataTestIDs.createDashboardButtonToolbar}
-      >
-        {permissionsLoading ? t('Loading...') : t('Create')}
-      </Button>
-    );
-  };
+  const createBtn = (
+    <Button
+      variant="primary"
+      onClick={handleModalToggle}
+      isDisabled={disabled}
+      data-test={persesDashboardDataTestIDs.createDashboardButtonToolbar}
+    >
+      {permissionsLoading ? t('Loading...') : t('Create')}
+    </Button>
+  );
 
   return (
     <>
       {disabled ? (
         <Tooltip content={t("You don't have permissions to create dashboards")}>
-          <span style={{ cursor: 'not-allowed' }}>
-            <CreateBtn />
-          </span>
+          <span style={{ cursor: 'not-allowed' }}> {createBtn}</span>
         </Tooltip>
       ) : (
-        <CreateBtn />
+        createBtn
       )}
       <Modal
         variant={ModalVariant.small}

web/src/components/dashboards/perses/dashboard-list.tsx

@@ -81,7 +81,7 @@ const DashboardActionsCell = React.memo(
 
     if (disabled || loading) {
       return (
-        <Tooltip content={t("You don't have permissions to dashboard actions")}>
+        <Tooltip content={t("You don't have permissions for dashboard actions")}>
           <div>
             <ActionsColumn items={emptyActions} isDisabled={true} />
           </div>
@@ -293,7 +293,7 @@ const DashboardsTable: React.FunctionComponent<DashboardsTableProps> = ({
   const emptyRowActions = useMemo(
     () => [
       {
-        title: t("You don't have permissions to dashboard actions"),
+        title: t("You don't have permissions for dashboard actions"),
         onClick: () => {},
       },
     ],

web/src/components/dashboards/perses/hooks/useEditableProjects.ts

@@ -33,7 +33,7 @@ const getEditableProjects = (
   persesUserPermissions: PersesUserPermissions,
   allAvailableProjects: string[],
 ): string[] => {
-  const editableProjectNames: string[] = [];
+  const editableProjectNames = new Set<string>();
   Object.entries(persesUserPermissions).forEach(([projectName, permissions]) => {
     const hasDashboardPermissions = permissions.some((permission) => {
       const allActions = permission.actions.includes('*');
@@ -47,16 +47,14 @@ const getEditableProjects = (
     });
 
     if (hasDashboardPermissions) {
-      // Handle wildcard permissions to all projects
       if (projectName === '*') {
-        editableProjectNames.push(...allAvailableProjects);
-      } else if (projectName !== '*') {
-        // Handle specific project permissions
-        editableProjectNames.push(projectName);
+        allAvailableProjects.forEach((p) => editableProjectNames.add(p));
+      } else {
+        editableProjectNames.add(projectName);
       }
     }
   });
-  return editableProjectNames;
+  return Array.from(editableProjectNames);
 };
 
 export const useEditableProjects = () => {

web/src/components/dashboards/perses/perses-client.ts

@@ -28,7 +28,7 @@ export const fetchPersesProjects = (): Promise<ProjectResource[]> => {
 };
 
 export interface PersesPermission {
-  scopes: string;
+  scopes: string[];
   actions: string[];
 }