fix: Unable to revoke shared folder permission and refactor the modify permissions modal.

react/src/components/InviteFolderPermissionSettingModal.tsx

@@ -0,0 +1,197 @@
+import {
+  baiSignedRequestWithPromise,
+  localeCompare,
+  useBaiSignedRequestWithPromise,
+} from '../helper';
+import { useSuspendedBackendaiClient } from '../hooks';
+import { useTanMutation, useTanQuery } from '../hooks/reactQueryAlias';
+import BAIModal, { BAIModalProps } from './BAIModal';
+import { App, Empty, Form, FormInstance, Select, Table } from 'antd';
+import _ from 'lodash';
+import React, { useEffect, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+
+interface Invitee {
+  perm: string;
+  shared_to: {
+    uuid: string;
+    email: string;
+  };
+  vfolder_id: string;
+}
+
+interface InviteFolderPermissionSettingModalProps extends BAIModalProps {
+  vfolderId: string | null;
+  onRequestClose: () => void;
+}
+
+const InviteFolderPermissionSettingModal: React.FC<
+  InviteFolderPermissionSettingModalProps
+> = ({ vfolderId, onRequestClose, ...baiModalProps }) => {
+  const { t } = useTranslation();
+  const { message } = App.useApp();
+  const baiClient = useSuspendedBackendaiClient();
+  const formRef = useRef<FormInstance>(null);
+  const baiRequestWithPromise = useBaiSignedRequestWithPromise();
+
+  const {
+    data: shared,
+    isFetching,
+    refetch,
+  } = useTanQuery({
+    queryKey: [
+      'baiClient.vfolder.list_invitees',
+      baiModalProps.open,
+      vfolderId,
+    ],
+    queryFn: () =>
+      baiModalProps.open
+        ? baiRequestWithPromise({
+            method: 'GET',
+            url: `/folders/_/shared${vfolderId ? `?vfolder_id=${vfolderId}` : ''}`,
+          }).then((res: { shared: Invitee }) =>
+            _.sortBy(res.shared, 'shared_to.email'),
+          )
+        : null,
+    staleTime: 0,
+  });
+
+  useEffect(() => {
+    if (baiModalProps.open) {
+      refetch();
+      formRef.current?.setFieldsValue(
+        _.fromPairs(
+          _.map(shared, (item) => [`perm-${item.shared_to.uuid}`, item.perm]),
+        ),
+      );
+    }
+  }, [baiModalProps.open, refetch, shared]);
+
+  const updatePermissions = useTanMutation({
+    mutationFn: (
+      userPermList: Array<{
+        user: string;
+        perm: string;
+      }>,
+    ) => {
+      const body = {
+        vfolder_id: vfolderId,
+        user_perm_list: userPermList,
+      };
+      if (_.isEmpty(userPermList)) {
+        return Promise.reject({ message: t('data.permission.NoChanges') });
+      }
+      return baiSignedRequestWithPromise({
+        method: 'POST',
+        url: '/folders/_/sharing',
+        body,
+        client: baiClient,
+      });
+    },
+  });
+
+  const handleOk = () => {
+    formRef.current?.validateFields().then((values) => {
+      updatePermissions.mutate(
+        _.map(
+          _.filter(
+            shared,
+            (item) => values[`perm-${item.shared_to.uuid}`] !== item.perm,
+          ),
+          (item) => ({
+            user: item.shared_to.uuid,
+            perm: formRef.current?.getFieldValue(`perm-${item.shared_to.uuid}`),
+          }),
+        ),
+        {
+          onSuccess: () => {
+            message.success(t('data.permission.PermissionModified'));
+            onRequestClose();
+          },
+          onError: (err) => {
+            message.error(
+              err?.message || t('data.permission.FailedToModifyPermission'),
+            );
+          },
+        },
+      );
+    });
+  };
+
+  return (
+    <BAIModal
+      {...baiModalProps}
+      title={t('data.explorer.ModifyPermissions')}
+      onCancel={onRequestClose}
+      onOk={handleOk}
+      confirmLoading={updatePermissions.isPending}
+      okText={t('button.Save')}
+    >
+      {_.isEmpty(shared) ? (
+        <Empty
+          description={t('data.explorer.NoSharedFolders')}
+          image={Empty.PRESENTED_IMAGE_SIMPLE}
+        />
+      ) : (
+        <Form
+          ref={formRef}
+          initialValues={_.fromPairs(
+            _.map(shared, (item) => [`perm-${item.shared_to.uuid}`, item.perm]),
+          )}
+        >
+          <Table
+            pagination={false}
+            showSorterTooltip={false}
+            loading={isFetching}
+            sortDirections={['descend', 'ascend', 'descend']}
+            dataSource={shared || []}
+            scroll={{ x: 'max-content' }}
+            rowKey={(record) => record.shared_to.uuid}
+            columns={[
+              {
+                title: '#',
+                fixed: 'left',
+                render: (text, record, index) => {
+                  ++index;
+                  return index;
+                },
+                showSorterTooltip: false,
+                rowScope: 'row',
+              },
+              {
+                title: t('data.explorer.InviteeEmail'),
+                dataIndex: ['shared_to', 'email'],
+                sorter: (a, b) =>
+                  localeCompare(a.shared_to.email, b.shared_to.email),
+              },
+              {
+                title: t('data.explorer.Permission'),
+                dataIndex: 'perm',
+                render: (text, record) => {
+                  return (
+                    <Form.Item name={`perm-${record.shared_to.uuid}`} noStyle>
+                      <Select
+                        style={{ minWidth: 130 }}
+                        options={[
+                          { label: t('data.folders.View'), value: 'ro' },
+                          { label: t('data.folders.Edit'), value: 'rw' },
+                          { label: t('data.folders.EditDelete'), value: 'wd' },
+                          {
+                            label: t('data.folders.KickOut'),
+                            value: null,
+                          },
+                        ]}
+                      />
+                    </Form.Item>
+                  );
+                },
+              },
+            ]}
+          />
+        </Form>
+      )}
+    </BAIModal>
+  );
+};
+
+export default InviteFolderPermissionSettingModal;

react/src/pages/VFolderListPage.tsx

@@ -1,9 +1,10 @@
 import Flex from '../components/Flex';
+import InviteFolderPermissionSettingModal from '../components/InviteFolderPermissionSettingModal';
 import { filterEmptyItem } from '../helper';
 import { useSuspendedBackendaiClient, useUpdatableState } from '../hooks';
 import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
 import { Alert, Button, Card, Skeleton, theme } from 'antd';
-import React, { Suspense, useEffect, useRef } from 'react';
+import React, { Suspense, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { StringParam, useQueryParam, withDefault } from 'use-query-params';
 
@@ -37,6 +38,7 @@ const VFolderListPage: React.FC<VFolderListPageProps> = (props) => {
   const baiClient = useSuspendedBackendaiClient();
   const [fetchKey, updateFetchKey] = useUpdatableState('first');
   const dataViewRef = useRef(null);
+  const [inviteFolderId, setInviteFolderId] = useState<string | null>(null);
 
   const { token } = theme.useToken();
 
@@ -50,6 +52,19 @@ const VFolderListPage: React.FC<VFolderListPageProps> = (props) => {
     };
   }, [updateFetchKey]);
 
+  useEffect(() => {
+    const handler = (event: any) => {
+      setInviteFolderId(event.detail);
+    };
+    document.addEventListener('show-invite-folder-permission-setting', handler);
+    return () => {
+      document.removeEventListener(
+        'show-invite-folder-permission-setting',
+        handler,
+      );
+    };
+  }, [setInviteFolderId]);
+
   const tabBannerText = {
     data: t('data.DialogDataFolder'),
     automount: t('data.DialogFolderStartingWithDotAutomount'),
@@ -127,6 +142,13 @@ const VFolderListPage: React.FC<VFolderListPageProps> = (props) => {
         {/* @ts-ignore  */}
         <backend-ai-data-view ref={dataViewRef} active _activeTab={curTabKey} />
       </Card>
+      <InviteFolderPermissionSettingModal
+        onRequestClose={() => {
+          setInviteFolderId(null);
+        }}
+        vfolderId={inviteFolderId}
+        open={inviteFolderId !== null}
+      />
     </Flex>
   );
 };

resources/i18n/de.json

@@ -728,7 +728,8 @@
       "DownloadNotAllowed": "Das Herunterladen von Dateien/Ordnern ist in diesem Ordner nicht gestattet.",
       "RenameAFolder": "Ordner umbenennen",
       "Filename": "Dateiname",
-      "RemoveFileExtension": "Entfernen "
+      "RemoveFileExtension": "Entfernen ",
+      "NoSharedFolders": "Keine freigegebenen Ordner"
     },
     "invitation": {
       "NoValidEmails": "Es wurden keine gültigen E-Mails eingegeben",
@@ -742,7 +743,8 @@
     },
     "permission": {
       "NoChanges": "Keine Änderungen vorgenommen",
-      "PermissionModified": "Berechtigung aktualisiert"
+      "PermissionModified": "Berechtigung aktualisiert",
+      "FailedToModifyPermission": "Die Berechtigung konnte nicht geändert werden."
     },
     "NoStorageDescriptionFound": "Keine Beschreibung.",
     "usage": {

resources/i18n/el.json

@@ -728,7 +728,8 @@
       "DownloadNotAllowed": "Η λήψη αρχείου/φακέλου δεν επιτρέπεται σε αυτόν τον φάκελο.",
       "RenameAFolder": "Μετονομασία φακέλου",
       "Filename": "Ονομα αρχείου",
-      "RemoveFileExtension": "Αφαιρώ "
+      "RemoveFileExtension": "Αφαιρώ ",
+      "NoSharedFolders": "Δεν υπάρχουν κοινόχρηστοι φάκελοι"
     },
     "invitation": {
       "NoValidEmails": "Δεν καταχωρήθηκαν έγκυρα μηνύματα ηλεκτρονικού ταχυδρομείου",
@@ -742,7 +743,8 @@
     },
     "permission": {
       "NoChanges": "Δεν έγιναν αλλαγές",
-      "PermissionModified": "Η άδεια ενημερώθηκε"
+      "PermissionModified": "Η άδεια ενημερώθηκε",
+      "FailedToModifyPermission": "Αποτυχία τροποποίησης της άδειας."
     },
     "NoStorageDescriptionFound": "Χωρίς περιγραφή.",
     "usage": {

resources/i18n/en.json

@@ -861,7 +861,8 @@
       "DownloadNotAllowed": "Downloading file/folder is not allowed in this folder.",
       "RenameAFolder": "Rename Folder",
       "Filename": "File name",
-      "RemoveFileExtension": "Remove "
+      "RemoveFileExtension": "Remove ",
+      "NoSharedFolders": "No shared folders"
     },
     "invitation": {
       "NoValidEmails": "No valid emails were entered",
@@ -875,7 +876,8 @@
     },
     "permission": {
       "NoChanges": "No changes made",
-      "PermissionModified": "Permission updated"
+      "PermissionModified": "Permission updated",
+      "FailedToModifyPermission": "Failed to modify permission."
     },
     "NoStorageDescriptionFound": "No description.",
     "DialogModelFolder": "You can serve and manage models.",

resources/i18n/es.json

@@ -314,7 +314,8 @@
       "DownloadNotAllowed": "No se permite descargar archivos/carpetas en esta carpeta.",
       "RenameAFolder": "Renombrar carpeta",
       "Filename": "Nombre del archivo",
-      "RemoveFileExtension": "Eliminar "
+      "RemoveFileExtension": "Eliminar ",
+      "NoSharedFolders": "Sin carpetas compartidas"
     },
     "folders": {
       "CannotDeleteFolder": "No se puede eliminar la carpeta montada en una o más sesiones. Por favor, termine la sesión primero.",
@@ -389,7 +390,8 @@
     },
     "permission": {
       "NoChanges": "No se han realizado cambios",
-      "PermissionModified": "Permiso actualizado"
+      "PermissionModified": "Permiso actualizado",
+      "FailedToModifyPermission": "No se pudo modificar el permiso."
     },
     "usage": {
       "Adequate": "Adecuado",

resources/i18n/fi.json

@@ -314,7 +314,8 @@
       "DownloadNotAllowed": "Tiedoston/kansion lataaminen ei ole sallittua tässä kansiossa.",
       "RenameAFolder": "Nimeä kansio uudelleen",
       "Filename": "Tiedoston nimi",
-      "RemoveFileExtension": "Poista "
+      "RemoveFileExtension": "Poista ",
+      "NoSharedFolders": "Ei jaettuja kansioita"
     },
     "folders": {
       "CannotDeleteFolder": "Yhdessä tai useammassa istunnossa asennettua kansiota ei voi poistaa. Lopeta istunto ensin.",
@@ -389,7 +390,8 @@
     },
     "permission": {
       "NoChanges": "Ei muutoksia",
-      "PermissionModified": "Lupa päivitetty"
+      "PermissionModified": "Lupa päivitetty",
+      "FailedToModifyPermission": "Luvan muokkaaminen epäonnistui."
     },
     "usage": {
       "Adequate": "Riittävästi",

resources/i18n/fr.json

@@ -728,7 +728,8 @@
       "DownloadNotAllowed": "Le téléchargement de fichiers/dossiers n'est pas autorisé dans ce dossier.",
       "RenameAFolder": "Renommer le dossier",
       "Filename": "Nom de fichier",
-      "RemoveFileExtension": "Retirer "
+      "RemoveFileExtension": "Retirer ",
+      "NoSharedFolders": "Aucun dossier partagé"
     },
     "invitation": {
       "NoValidEmails": "Aucun e-mail valide n'a été saisi",
@@ -742,7 +743,8 @@
     },
     "permission": {
       "NoChanges": "Aucune modification apportée",
-      "PermissionModified": "Autorisation mise à jour"
+      "PermissionModified": "Autorisation mise à jour",
+      "FailedToModifyPermission": "Échec de la modification de l'autorisation."
     },
     "NoStorageDescriptionFound": "Pas de description.",
     "DialogModelFolder": "Vous pouvez servir et gérer des modèles.",

resources/i18n/id.json

@@ -729,7 +729,8 @@
       "DownloadNotAllowed": "Mengunduh file/folder tidak diperbolehkan di folder ini.",
       "RenameAFolder": "Mengganti nama folder",
       "Filename": "Nama file",
-      "RemoveFileExtension": "Menghapus "
+      "RemoveFileExtension": "Menghapus ",
+      "NoSharedFolders": "Tidak ada folder bersama"
     },
     "invitation": {
       "NoValidEmails": "Tidak ada email valid yang dimasukkan",
@@ -743,7 +744,8 @@
     },
     "permission": {
       "NoChanges": "Tidak ada perubahan yang dilakukan",
-      "PermissionModified": "Izin diperbarui"
+      "PermissionModified": "Izin diperbarui",
+      "FailedToModifyPermission": "Gagal mengubah izin."
     },
     "NoStorageDescriptionFound": "Tidak ada deskripsi.",
     "DialogModelFolder": "Anda dapat melayani dan mengelola model.",