♻️🌐 front: fix access level labels, exposed size, added translations, deleted canRemove

2024-04-21 22:10:38 +02:00
parent f23b9daee8
commit e766087a37
11 changed files with 75 additions and 56 deletions
@@ -221,10 +221,11 @@
    "components.internal-access_specific_rules_you":"(you)",
    "components.internal-manage_root_users":"Shared drive access rules",
    "components.select-users_search_users":"Search users",
-    "common.access-level_full_acess":"Full access",
+    "common.access-level_full_access":"Full access",
    "common.access-level_read":"Read",
    "common.access-level_write":"Write",
    "common.access-level_no_access":"No access",
+    "common.access-level_remove":"Remove",
    "components.dragndrop_info_move_to":"move to",
    "components.SelectorModalContent_move_to":"Move to",
    "components.SelectorModalContent_no_items":"No item selected",
@@ -194,10 +194,11 @@
    "components.internal-access_specific_rules_you": "(Vous)",
    "components.internal-manage_root_users": "Règles d'accès à l'espace de travail partagé",
    "components.select-users_search_users": "Chercher un utilisateur",
-    "common.access-level_full_acess": "Accès Total",
+    "common.access-level_full_access": "Accès Total",
    "common.access-level_read": "Lecture",
    "common.access-level_write": "Ecriture",
    "common.access-level_no_access": "Pas d'accès",
+    "common.access-level_remove":"Retirer",
    "components.dragndrop_info_move_to": "déplacé vers",
    "components.SelectorModalContent_move_to": "Déplacer vers",
    "components.SelectorModalContent_no_items": "Pas de fichier sélectionné",
@@ -194,10 +194,11 @@
    "components.internal-access_specific_rules_you":"(you)",
    "components.internal-manage_root_users":"Shared drive access rules",
    "components.select-users_search_users":"Search users",
-    "common.access-level_full_acess":"Full access",
-    "common.access-level_read":"Read",
-    "common.access-level_write":"Write",
-    "common.access-level_no_access":"No access",
+    "common.access-level_full_access":"полный контроль",
+    "common.access-level_read":"Умею читать",
+    "common.access-level_write":"Могу написать",
+    "common.access-level_no_access":"Нет доступа",
+    "common.access-level_remove":"Удалять",
    "components.dragndrop_info_move_to":"move to",
    "components.SelectorModalContent_move_to":"Move to",
    "components.SelectorModalContent_no_items":"No item selected",
@@ -210,10 +210,11 @@
    "components.internal-access_specific_rules_you": "(bạn)",
    "components.internal-manage_root_users": "Quy tắc truy cập ổ đĩa được chia sẻ",
    "components.select-users_search_users": "Tìm kiếm người dùng",
-    "common.access-level_full_acess": "Quyền truy cập đầy đủ",
+    "common.access-level_full_access": "Quyền truy cập đầy đủ",
    "common.access-level_read": "Đọc",
    "common.access-level_write": "Viết",
    "common.access-level_no_access": "Không có quyền truy cập",
+    "common.access-level_remove":"Di dời",
    "components.dragndrop_info_move_to": "di chuyển đến",
    "components.SelectorModalContent_move_to": "Di chuyển đến",
    "components.SelectorModalContent_no_items": "Không có mục nào được chọn",
@@ -1,10 +1,12 @@
 import _ from 'lodash';
 import { defaultInputClassName, errorInputClassName, ThemeName } from './input-text';

+export type SelectSize = 'md' | 'lg' | 'sm';
+
 interface InputProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
  theme?: ThemeName;
  hasError?: boolean;
-  size?: 'md' | 'lg' | 'sm';
+  size?: SelectSize;
  className?: string;
  children?: React.ReactNode;
 }
@@ -0,0 +1,55 @@
+import Select, { SelectSize } from '@atoms/input/input-select';
+import { DriveFileAccessLevel } from '@features/drive/types';
+import Languages from 'features/global/services/languages-service';
+
+type DriveFileAccessLevelOrRemove = DriveFileAccessLevel | 'remove';
+
+export function translateAccessLevel(level: DriveFileAccessLevelOrRemove) {
+  if (!level) return undefined;
+  const key = {
+      'manage': 'common.access-level_full_access',
+      'write':  'common.access-level_write',
+      'read':   'common.access-level_read',
+      'none':   'common.access-level_no_access',
+      'remove': 'common.access-level_remove',
+    }[level];
+  if (!key) throw new Error("Unknown level: " + JSON.stringify(level));
+  return Languages.t(key);
+}
+
+export const AccessLevelDropdown = ({
+  disabled,
+  level,
+  onChange,
+  hiddenLevels,
+  labelOverrides,
+  className,
+  size,
+}: {
+  disabled?: boolean;
+  level: DriveFileAccessLevel | null;
+  onChange: (level: DriveFileAccessLevel & 'remove') => void;
+  className?: string;
+  labelOverrides?: { [key: string]: string };
+  hiddenLevels?: DriveFileAccessLevelOrRemove[] | string[];
+  size?: SelectSize,
+}) => {
+  const createOption = (level: DriveFileAccessLevelOrRemove) =>
+    !hiddenLevels?.includes(level) && <option value={level}>{(labelOverrides || {})[level] || translateAccessLevel(level)}</option>;
+  return (
+    <Select
+      disabled={disabled}
+      size={size}
+      className={className + ' w-auto'}
+      theme={level === 'none' ? 'rose' : 'outline'}
+      value={level || 'none'}
+      onChange={e => onChange(e.target.value as DriveFileAccessLevel & 'remove')}
+    >
+      {createOption('manage')}
+      {createOption('write')}
+      {createOption('read')}
+      {createOption('none')}
+      {createOption('remove')}
+    </Select>
+  );
+};
@@ -26,7 +26,7 @@ export const AccessLevel = ({
      value={level || 'read'}
      onChange={e => onChange(e.target.value as DriveFileAccessLevel & 'remove')}
    >
-      {!hiddenLevels?.includes('manage') && <option value={'manage'}>{Languages.t('common.access-level_full_acess')}</option>}
+      {!hiddenLevels?.includes('manage') && <option value={'manage'}>{Languages.t('common.access-level_full_access')}</option>}
      {!hiddenLevels?.includes('read') && <option value={'read'}>{Languages.t('common.access-level_read')}</option>}
    </Select>
  );
@@ -3,7 +3,7 @@ import { useDriveItem, getPublicLink } from '@features/drive/hooks/use-drive-ite
 import { copyToClipboard } from '@features/global/utils/CopyClipboard';
 import { Input } from 'app/atoms/input/input-text';
 import { useState } from 'react';
-import { AccessLevelDropdown } from '../update-access/access-level-dropdown';
+import { AccessLevelDropdown } from '../../components/access-level-dropdown';
 import Languages from 'features/global/services/languages-service';
 import { Button } from '@atoms/button/button';
 import { LinkIcon, UserGroupIcon, CheckCircleIcon } from '@heroicons/react/outline';
@@ -1,42 +0,0 @@
-import Select from '@atoms/input/input-select';
-import { DriveFileAccessLevel } from '@features/drive/types';
-import Languages from 'features/global/services/languages-service';
-
-export const AccessLevelDropdown = ({
-  disabled,
-  level,
-  onChange,
-  canRemove,
-  hiddenLevels,
-  labelOverrides,
-  className,
-}: {
-  disabled?: boolean;
-  level: DriveFileAccessLevel | null;
-  onChange: (level: DriveFileAccessLevel & 'remove') => void;
-  canRemove?: boolean; //TODO: use hiddenLevels
-  className?: string;
-  labelOverrides?: { [key: string]: string };
-  hiddenLevels?: string[];
-}) => {
-  const createOption = (level: DriveFileAccessLevel, tKey: string) =>
-    !hiddenLevels?.includes(level) && <option value={level}>{(labelOverrides || {})[level] || Languages.t(tKey)}</option>;
-  return (
-    <Select
-      disabled={disabled}
-      className={
-        className +
-        ' w-auto'
-      }
-      theme={level === 'none' ? 'rose' : 'outline'}
-      value={level || 'none'}
-      onChange={e => onChange(e.target.value as DriveFileAccessLevel & 'remove')}
-    >
-      {createOption('manage', 'common.access-level_full_acess')}
-      {createOption('write', 'common.access-level_write')}
-      {createOption('read', 'common.access-level_read')}
-      {createOption('none', 'common.access-level_no_access')}
-      {canRemove && <option value={'remove'}>Remove</option>}
-    </Select>
-  );
-};
@@ -12,7 +12,7 @@ import {

 import { Base, Info, Subtitle } from '@atoms/text';
 import { Checkbox } from '@atoms/input/input-checkbox';
-import { AccessLevelDropdown } from './access-level-dropdown';
+import { AccessLevelDropdown } from '../../components/access-level-dropdown';
 import AlertManager from '@features/global/services/alert-manager-service';

 export const InheritAccessOptions = (props: {
@@ -55,6 +55,7 @@ export const InheritAccessOptions = (props: {
          </div>
          <div className="shrink-0 ml-2">
            <AccessLevelDropdown
+              hiddenLevels={['remove']}
              disabled={props.disabled}
              onChange={level => {
                props.item && props.onUpdate(changeCompanyAccessLevel(props.item, level === 'remove' ? false : level));
@@ -78,7 +79,6 @@ export const InheritAccessOptions = (props: {
            <AccessLevelDropdown
              disabled={props.disabled}
              hiddenLevels={['none']}
-              canRemove
              onChange={level => {
                if (level === 'remove')
                  AlertManager.confirm(
@@ -7,7 +7,7 @@ import { useUser } from '@features/users/hooks/use-user';
 import { UserType } from '@features/users/types/user';
 import { useState } from 'react';
 import SelectUsers from '../../components/select-users';
-import { AccessLevelDropdown } from './access-level-dropdown';
+import { AccessLevelDropdown } from '../../components/access-level-dropdown';
 import Languages from 'features/global/services/languages-service';
 import { changeUserAccess, getUserAccessLevel, getAllUserAccesses } from '@features/files/utils/access-info-helpers';

@@ -53,6 +53,7 @@ const UserAccessSelector = ({ id, disabled }: { id: string; disabled: boolean })
        <AccessLevelDropdown
          className="rounded-l-none"
          disabled={loading || disabled}
+          hiddenLevels={['remove']}
          level={level}
          onChange={level => setLevel(level)}
        />
@@ -82,7 +83,6 @@ const UserAccessLevel = ({
        <AccessLevelDropdown
          disabled={loading || disabled || user?.id === currentUser?.id}
          level={(item && getUserAccessLevel(item, userId)) || "none"}
-          canRemove={true}
          onChange={level => item && update(changeUserAccess(item, userId, level === 'remove' ? false : level))}
          />
      }