feat: display all projects in project quota setting page. (#2759)

**TR;DR:**
Added a new component 'ProjectSelectForAdminPage' to display all projects in the project quota setting page. It extends `ProjectSelect` and uses `disableDefaultFilter` props as a default.

**How to test:**
1. Endpoint: `http://10.82.230.49:8090`, Location: `/storage-settings/local:myceph`
2. Login with superadmin.
3. Click the 'For project' tab.
4. The project select shows all projects of selected domain. But top header project select is `ProjectSelect` that doesn't use `disableDefaultFilter`. So, it only shows accessible projects such as default and model-test.

**Checklist for reviewers:**
Check `ProjectSelectForAdminPage` displays all projects that include specific domain. You can check in `storage-settings/local:myceph` page.

**Changes:**

- Renamed `ProjectSelector` component to `ProjectSelect` for consistency
- Created a new `ProjectSelectForAdminPage` component that extends `ProjectSelect`
- Added `disableDefaultFilter` prop to `ProjectSelect` to allow bypassing the default project filtering
- Updated `FolderCreateModal` and `StorageHostSettingsPanel` to use the new component names
- Implemented `ProjectSelectForAdminPage` in `StorageHostSettingsPanel` to show all projects without filtering

**Rationale:**

This change introduces a more flexible `ProjectSelect` component that can be used in both regular and admin contexts. The new `ProjectSelectForAdminPage` component allows administrators to view and select from all projects, regardless of user permissions.

**Effects:**

- Regular users will see no change in behavior
- Administrators will now have access to all projects in the `StorageHostSettingsPanel`
- Improved code consistency and reusability

**Checklist:**

- [ ] Mention to the original issue
- [ ] Documentation
- [ ] Minium required manager version
- [x] Specific setting for review (eg., KB link, endpoint or how to setup)
- [x] Minimum requirements to check during review
- [ ] Test case(s) to demonstrate the difference of before/after

react/src/components/FolderCreateModal.tsx

@@ -4,7 +4,7 @@ import { useTanMutation } from '../hooks/reactQueryAlias';
 import { useCurrentProjectValue } from '../hooks/useCurrentProject';
 import BAIModal, { BAIModalProps } from './BAIModal';
 import Flex from './Flex';
-import ProjectSelector from './ProjectSelect';
+import ProjectSelect from './ProjectSelect';
 import StorageSelect from './StorageSelect';
 import { App, Button, Divider, Form, Input, Radio, Switch, theme } from 'antd';
 import { createStyles } from 'antd-style';
@@ -221,7 +221,7 @@ const FolderCreateModal: React.FC<FolderCreateModalProps> = ({
                 getFieldValue('type') === 'project' && (
                   <>
                     <Form.Item label={t('data.Project')} name={'group'}>
-                      <ProjectSelector domain={currentDomain} />
+                      <ProjectSelect domain={currentDomain} />
                     </Form.Item>
                     <Divider />
                   </>

react/src/components/ProjectSelect.tsx

@@ -16,16 +16,18 @@ type ProjectInfo = {
   projectResourcePolicy: any; // Replace 'any' with the actual type
   projectName: string;
 };
-interface Props extends SelectProps {
+export interface ProjectSelectProps extends SelectProps {
   onSelectProject?: (projectInfo: ProjectInfo) => void;
   domain: string;
   autoSelectDefault?: boolean;
+  disableDefaultFilter?: boolean;
 }
 
-const ProjectSelector: React.FC<Props> = ({
+const ProjectSelect: React.FC<ProjectSelectProps> = ({
   onSelectProject,
   domain,
   autoClearSearchValue,
+  disableDefaultFilter,
   ...selectProps
 }) => {
   const { t } = useTranslation();
@@ -86,9 +88,11 @@ const ProjectSelector: React.FC<Props> = ({
   const projects = projectsSince2403 || projectsBefore2403;
 
   // temporary filtering groups by accessible groups according to user query
-  const accessibleProjects = projects?.filter((project) =>
-    user?.groups?.map((group) => group?.id).includes(project?.id),
-  );
+  const accessibleProjects = disableDefaultFilter
+    ? projects
+    : projects?.filter((project) =>
+        user?.groups?.map((group) => group?.id).includes(project?.id),
+      );
 
   const getLabel = (key: string) =>
     ({
@@ -135,4 +139,4 @@ const ProjectSelector: React.FC<Props> = ({
   );
 };
 
-export default ProjectSelector;
+export default ProjectSelect;

react/src/components/ProjectSelectForAdminPage.tsx

@@ -0,0 +1,13 @@
+import ProjectSelect, { ProjectSelectProps } from './ProjectSelect';
+import React from 'react';
+
+interface ProjectSelectForAdminPageProps
+  extends Omit<ProjectSelectProps, 'disableDefaultFilter'> {}
+
+const ProjectSelectForAdminPage: React.FC<ProjectSelectForAdminPageProps> = ({
+  ...projectSelectProps
+}) => {
+  return <ProjectSelect {...projectSelectProps} disableDefaultFilter />;
+};
+
+export default ProjectSelectForAdminPage;

react/src/components/StorageHostSettingsPanel.tsx

@@ -2,7 +2,7 @@ import { QuotaScopeType, addQuotaScopeTypePrefix } from '../helper/index';
 import { useCurrentDomainValue, useUpdatableState } from '../hooks';
 import DomainSelector from './DomainSelector';
 import Flex from './Flex';
-import ProjectSelector from './ProjectSelect';
+import ProjectSelectForAdminPage from './ProjectSelectForAdminPage';
 import QuotaScopeCard from './QuotaScopeCard';
 import QuotaSettingModal from './QuotaSettingModal';
 import UserSelector from './UserSelector';
@@ -124,7 +124,7 @@ const StorageHostSettingsPanel: React.FC<StorageHostSettingsPanelProps> = ({
                   />
                 </Form.Item>
                 <Form.Item label={t('webui.menu.Project')}>
-                  <ProjectSelector
+                  <ProjectSelectForAdminPage
                     style={{ width: '20vw' }}
                     value={selectedProjectId}
                     disabled={!selectedDomainName}