fix: show vfolder types in folder create modal based on user permission

react/src/components/FolderCreateModal.tsx

@@ -1,6 +1,7 @@
 import { useBaiSignedRequestWithPromise } from '../helper';
-import { useCurrentDomainValue } from '../hooks';
-import { useTanMutation } from '../hooks/reactQueryAlias';
+import { useCurrentDomainValue, useSuspendedBackendaiClient } from '../hooks';
+import { useCurrentUserRole } from '../hooks/backendai';
+import { useSuspenseTanQuery, useTanMutation } from '../hooks/reactQueryAlias';
 import { useCurrentProjectValue } from '../hooks/useCurrentProject';
 import BAIModal, { BAIModalProps } from './BAIModal';
 import Flex from './Flex';
@@ -9,6 +10,7 @@ import StorageSelect from './StorageSelect';
 import { App, Button, Divider, Form, Input, Radio, Switch, theme } from 'antd';
 import { createStyles } from 'antd-style';
 import { FormInstance } from 'antd/lib';
+import _ from 'lodash';
 import { Suspense, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -76,11 +78,23 @@ const FolderCreateModal: React.FC<FolderCreateModalProps> = ({
   const { message } = App.useApp();
 
   const formRef = useRef<FormInstance>(null);
+  const baiClient = useSuspendedBackendaiClient();
+  const userRole = useCurrentUserRole();
   const currentDomain = useCurrentDomainValue();
   const currentProject = useCurrentProjectValue();
 
   const baiRequestWithPromise = useBaiSignedRequestWithPromise();
 
+  const { data: allowedTypes, isLoading: isLoadingVhostInfo } =
+    useSuspenseTanQuery({
+      queryKey: ['allowedTypes', modalProps.open],
+      queryFn: () => {
+        return modalProps.open
+          ? baiClient.vfolder.list_allowed_types()
+          : undefined;
+      },
+    });
+
   const mutationToCreateFolder = useTanMutation<
     FolderCreationResponse,
     { message?: string },
@@ -135,6 +149,7 @@ const FolderCreateModal: React.FC<FolderCreateModalProps> = ({
 
   return (
     <BAIModal
+      loading={isLoadingVhostInfo}
       className={styles.modal}
       title={t('data.CreateANewStorageFolder')}
       footer={
@@ -167,6 +182,7 @@ const FolderCreateModal: React.FC<FolderCreateModalProps> = ({
         </Flex>
       }
       width={650}
+      okButtonProps={{ loading: mutationToCreateFolder.isPending }}
       onCancel={() => {
         onRequestClose();
       }}
@@ -224,8 +240,13 @@ const FolderCreateModal: React.FC<FolderCreateModalProps> = ({
           style={{ flex: 1, marginBottom: 0 }}
         >
           <Radio.Group>
-            <Radio value={'user'}>User</Radio>
-            <Radio value={'project'}>Project</Radio>
+            {_.includes(allowedTypes, 'user') ? (
+              <Radio value={'user'}>User</Radio>
+            ) : null}
+            {(userRole === 'admin' || userRole === 'superadmin') &&
+            _.includes(allowedTypes, 'group') ? (
+              <Radio value={'project'}>Project</Radio>
+            ) : null}
           </Radio.Group>
         </Form.Item>
         <Divider />

react/src/components/StorageStatusPanel.tsx

@@ -1,5 +1,6 @@
 import { addQuotaScopeTypePrefix, usageIndicatorColor } from '../helper';
 import { useCurrentDomainValue, useSuspendedBackendaiClient } from '../hooks';
+import { useCurrentUserRole } from '../hooks/backendai';
 import { useSuspenseTanQuery } from '../hooks/reactQueryAlias';
 import { useCurrentProjectValue } from '../hooks/useCurrentProject';
 import Flex from './Flex';
@@ -35,6 +36,9 @@ const StorageStatusPanel: React.FC<{
   const { token } = theme.useToken();
   const baiClient = useSuspendedBackendaiClient();
   const currentProject = useCurrentProjectValue();
+  const currentUserRole = useCurrentUserRole();
+  const isAdmin =
+    currentUserRole === 'admin' || currentUserRole === 'superadmin';
 
   const [selectedVolumeInfo, setSelectedVolumeInfo] = useState<VolumeInfo>();
   const deferredSelectedVolumeInfo = useDeferredValue(selectedVolumeInfo);
@@ -116,14 +120,15 @@ const StorageStatusPanel: React.FC<{
 
   const {
     user_resource_policy,
+    project_resource_policy,
     keypair_resource_policy,
     project_quota_scope,
     user_quota_scope,
   } = useLazyLoadQuery<StorageStatusPanelQuery>(
     graphql`
       query StorageStatusPanelQuery(
         $user_RP_name: String
-        # $project_RP_name: String!
+        $project_RP_name: String!
         $keypair_resource_policy_name: String
         $project_quota_scope_id: String!
         $user_quota_scope_id: String!
@@ -133,9 +138,10 @@ const StorageStatusPanel: React.FC<{
         user_resource_policy(name: $user_RP_name) @since(version: "23.09.6") {
           max_vfolder_count
         }
-        # project_resource_policy(name: $project_RP_name) @since(version: "23.09.1") {
-        #   max_vfolder_count
-        # }
+        project_resource_policy(name: $project_RP_name)
+          @since(version: "23.09.1") {
+          max_vfolder_count
+        }
         keypair_resource_policy(name: $keypair_resource_policy_name)
           # use max_vfolder_count in keypair_resource_policy before adding max_vfolder_count in user_resource_policy
           @deprecatedSince(version: "23.09.4") {
@@ -157,7 +163,7 @@ const StorageStatusPanel: React.FC<{
     `,
     {
       user_RP_name: user?.resource_policy,
-      // project_RP_name: currentProjectDetail?.resource_policy || "",
+      project_RP_name: currentProject?.name ?? '',
       keypair_resource_policy_name: keypair?.resource_policy,
       project_quota_scope_id: addQuotaScopeTypePrefix(
         'project',
@@ -171,7 +177,6 @@ const StorageStatusPanel: React.FC<{
         !deferredSelectedVolumeInfo?.id,
     },
   );
-
   // Support version:
   // keypair resource policy < 23.09.4
   // user resource policy, project resource policy >= 23.09.6
@@ -228,6 +233,19 @@ const StorageStatusPanel: React.FC<{
                 {t('data.ProjectFolder')}:
               </Typography.Text>
               {projectFolderCount}
+              {isAdmin &&
+              (project_resource_policy?.max_vfolder_count ||
+                project_resource_policy?.max_vfolder_count === 0) ? (
+                <>
+                  <Typography.Text type="secondary">{' / '}</Typography.Text>
+                  <Typography.Text type="secondary">
+                    {t('data.Limit')}:
+                  </Typography.Text>
+                  {project_resource_policy?.max_vfolder_count === 0
+                    ? '∞'
+                    : project_resource_policy?.max_vfolder_count}
+                </>
+              ) : null}
             </Flex>
             <Flex gap={token.marginXXS} style={{ marginRight: 30 }}>
               <Typography.Text type="secondary">

react/src/pages/VFolderListPage.tsx

@@ -40,20 +40,20 @@ const tabParam = withDefault(StringParam, 'general');
 
 const VFolderListPage: React.FC<VFolderListPageProps> = (props) => {
   const { t } = useTranslation();
+  const { token } = theme.useToken();
   const [curTabKey, setCurTabKey] = useQueryParam('tab', tabParam, {
     updateType: 'replace',
   });
-  const baiClient = useSuspendedBackendaiClient();
   const [fetchKey, updateFetchKey] = useUpdatableState('first');
-  const dataViewRef = useRef(null);
   const [isOpenCreateModal, { toggle: openCreateModal }] = useToggle(false);
   const [inviteFolderId, setInviteFolderId] = useState<string | null>(null);
   const [
     isVisibleImportFromHuggingFaceModal,
     { toggle: toggleImportFromHuggingFaceModal },
   ] = useToggle(false);
 
-  const { token } = theme.useToken();
+  const dataViewRef = useRef(null);
+  const baiClient = useSuspendedBackendaiClient();
   const enableImportFromHuggingFace =
     baiClient._config.enableImportFromHuggingFace;