Automated cherry pick of #1363: feat: add application filter in authorize modal

core/src/service/api-creator.ts

@@ -276,6 +276,37 @@ export function enhanceAPI<T extends FN>(apiFn: T, config?: APIConfig) {
   });
 }
 
+/**
+ * get load function which can call directly with partial query
+ * @param service api function
+ * @param required required params, service will not be called if any of these is null or undefined
+ * @param initial initial params
+ * @returns if required params is all valid, return service result, otherwise return void;
+ */
+export function usePaging<T extends FN>({
+  service,
+  required,
+  initial,
+}: {
+  service: T;
+  required: Partial<Parameters<T>[0]>;
+  initial?: Partial<Parameters<T>[0]>;
+}) {
+  const staticQuery = React.useRef({ pageNo: 1, pageSize: DEFAULT_PAGESIZE, ...initial });
+
+  return React.useCallback(
+    (query?: Partial<Parameters<T>[0]>) => {
+      staticQuery.current = { ...staticQuery.current, ...query };
+      const full = { ...required, ...staticQuery.current };
+      const isReady = Object.keys(required).every((k) => full[k] !== null && full[k] !== undefined);
+      if (isReady) {
+        return service(full);
+      }
+    },
+    [required, service],
+  );
+}
+
 export function apiCreator<T extends FN>(apiConfig: APIConfig) {
   const apiFn = genRequest<T>(apiConfig);
   return enhanceAPI<typeof apiFn>(apiFn);

shell/app/common/components/authorize-member-modal.tsx

@@ -13,18 +13,18 @@
 
 import routeInfoStore from 'core/stores/route';
 import { MemberScope } from 'app/common/stores/member-scope';
-import { getApps } from 'common/services';
+import { getAppList } from 'common/services';
 import appMemberStore from 'common/stores/application-member';
 import i18n from 'i18n';
 import { map, compact, isEmpty } from 'lodash';
-import { Modal, Select, Table, Button } from 'core/nusi';
+import { Modal, Select, Table, Button, Input } from 'core/nusi';
 import orgMemberStore from 'common/stores/org-member';
 import projectMemberStore from 'common/stores/project-member';
 import sysMemberStore from 'common/stores/sys-member';
 import React from 'react';
-import { useTempPaging } from './use-hooks';
 import { useEffectOnce } from 'react-use';
 import mspProjectMember from 'common/stores/msp-project-member';
+import { usePaging } from 'core/service';
 
 const { Option } = Select;
 
@@ -48,20 +48,26 @@ export const AuthorizeMemberModal = ({ type, member, closeModal }: IProps) => {
   const { getRoleMap } = appMemberStore.effects; // 应用授权，只查询项目的角色
   const roleMap = appMemberStore.useStore((s) => s.roleMap);
   const { params } = routeInfoStore.getState((s) => s);
-
-  const [list, paging, loading, load, clear] = useTempPaging<IApplication>({
-    service: getApps,
-    basicParams: { projectId: params.projectId, memberID: member && member.userId },
+  const load = usePaging({
+    service: getAppList.fetch,
+    required: {
+      memberID: member?.userId,
+      projectId: params.projectId,
+    },
   });
 
+  const [data, loading] = getAppList.useState();
+
   useEffectOnce(() => {
     getRoleMap({ scopeType: MemberScope.APP });
-    if (member) {
-      load();
-    }
-    return () => clear();
+    load({ pageNo: 1 });
   });
 
+  if (!data) {
+    return null;
+  }
+  const { list, paging } = data;
+
   const pagination = {
     total: paging.total,
     current: paging.pageNo,
@@ -125,7 +131,13 @@ export const AuthorizeMemberModal = ({ type, member, closeModal }: IProps) => {
       ]}
       width={600}
     >
-      <Table loading={loading} rowKey={'userId'} pagination={pagination} columns={columns} dataSource={list} />
+      <Input.Search
+        onSearch={(q) => load({ q })}
+        className="mb-3"
+        allowClear
+        placeholder={i18n.t('project:search by application name')}
+      />
+      <Table loading={loading} rowKey={'id'} pagination={pagination} columns={columns} dataSource={list} />
     </Modal>
   );
 };

shell/app/common/services/index.ts

@@ -13,18 +13,15 @@
 
 import agent from 'agent';
 import { MemberScope } from 'common/stores/member-scope';
+import { apiCreator } from 'core/service';
 
-interface IPlatformUser {
-  avatar: string;
-  email: string;
-  id: string;
-  locked: boolean;
-  name: string;
-  nick: string;
-  phone: string;
-  lastLoginAt: string;
-  pwdExpireAt: string;
-}
+const apis = {
+  getApps: {
+    api: '/api/applications',
+  },
+};
+
+export const getAppList = apiCreator<(p: APPLICATION.GetAppList) => IPagingResp<IApplication>>(apis.getApps);
 
 interface IPlatformUser {
   avatar: string;