Add translations

Update Name of DashboardListPage

Author: zhuje

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

@@ -13,7 +13,7 @@ const queryClient = new QueryClient({
   },
 });
 
-const MonitoringDashboardListPage: FC = () => {
+const DashboardListPage: FC = () => {
   return (
     <QueryParamProvider adapter={ReactRouter5Adapter}>
       <QueryClientProvider client={queryClient}>
@@ -23,4 +23,4 @@ const MonitoringDashboardListPage: FC = () => {
   );
 };
 
-export default MonitoringDashboardListPage;
+export default DashboardListPage;

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

@@ -42,13 +42,6 @@ interface DashboardRowFilters {
   'project-filter'?: string;
 }
 
-const DASHBOARD_COLUMNS = [
-  { label: 'Dashboard', key: 'name' as keyof DashboardRow, index: 0 },
-  { label: 'Project', key: 'project' as keyof DashboardRow, index: 1 },
-  { label: 'Created on', key: 'created' as keyof DashboardRow, index: 2 },
-  { label: 'Last Modified', key: 'modified' as keyof DashboardRow, index: 3 },
-];
-
 const sortDashboardData = (
   data: DashboardRow[],
   sortBy: keyof DashboardRow | undefined,
@@ -101,10 +94,18 @@ const DashboardsTable: React.FunctionComponent<DashboardsTableProps> = ({
   const pagination = useDataViewPagination({ perPage: perPageOptions[0].value });
   const { page, perPage } = pagination;
 
-  const sortByIndex = useMemo(
-    () => DASHBOARD_COLUMNS.findIndex((item) => item.key === sortBy),
-    [sortBy],
+  const DASHBOARD_COLUMNS = useMemo(
+    () => [
+      { label: t('Dashboard'), key: 'name' as keyof DashboardRow, index: 0 },
+      { label: t('Project'), key: 'project' as keyof DashboardRow, index: 1 },
+      { label: t('Created on'), key: 'created' as keyof DashboardRow, index: 2 },
+      { label: t('Last Modified'), key: 'modified' as keyof DashboardRow, index: 3 },
+    ],
+    [t],
   );
+  const sortByIndex = useMemo(() => {
+    return DASHBOARD_COLUMNS.findIndex((item) => item.key === sortBy);
+  }, [DASHBOARD_COLUMNS, sortBy]);
 
   const getSortParams = (columnIndex: number): ThProps['sort'] => ({
     sortBy: {
@@ -195,11 +196,15 @@ const DashboardsTable: React.FunctionComponent<DashboardsTableProps> = ({
         pagination={<PaginationTool />}
         filters={
           <DataViewFilters onChange={(_e, values) => onSetFilters(values)} values={filters}>
-            <DataViewTextFilter filterId="name" title="Name" placeholder="Filter by name" />
+            <DataViewTextFilter
+              filterId="name"
+              title={t('Name')}
+              placeholder={t('Filter by name')}
+            />
             <DataViewTextFilter
               filterId="project-filter"
-              title="Project"
-              placeholder="Filter by project"
+              title={t('Project')}
+              placeholder={t('Filter by project')}
             />
           </DataViewFilters>
         }

web/src/components/dashboards/perses/project/ProjectBar.tsx

@@ -20,15 +20,13 @@ export const ProjectBar: FC<ProjectBarProps> = ({ setActiveProject, activeProjec
           onSelect={(event, newProject) => {
             const params = new URLSearchParams();
             if (newProject === '') {
-              const url = `${getDashboardsListUrl(perspective)}?${params.toString()}`;
-              navigate(url);
               setActiveProject(null);
             } else {
               params.set('project', newProject);
-              const url = `${getDashboardsListUrl(perspective)}?${params.toString()}`;
-              navigate(url);
               setActiveProject(newProject);
             }
+            const url = `${getDashboardsListUrl(perspective)}?${params.toString()}`;
+            navigate(url);
           }}
           selected={activeProject || ''}
           shortCut={KEYBOARD_SHORTCUTS.focusNamespaceDropdown}