@boarteam/boar-pack-users-frontend 2.5.0 → 2.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boarteam/boar-pack-users-frontend",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "description": "Users frontend package for Boar Pack",
   "repository": "git@github.com:boarteam/boar-pack.git",
   "author": "Andrew Balakirev <balakirev.andrey@gmail.com>",
@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "@ant-design/plots": "^2.3.2",
-    "@boarteam/boar-pack-common-frontend": "^2.8.1",
+    "@boarteam/boar-pack-common-frontend": "^2.9.0",
     "@fortawesome/fontawesome-svg-core": "^6.6.0",
     "@fortawesome/free-brands-svg-icons": "^6.6.0",
     "@umijs/max": "^4.1.10",
@@ -34,5 +34,5 @@
     "build": "tsc --project tsconfig.build.json",
     "yalc:push": "yalc push"
   },
-  "gitHead": "79fe5a34f9a9bd6e1e3e010f7a64b3b82c9e19b5"
+  "gitHead": "e6e2920ef9786ec27cc616c35796f64f6183a3f5"
 }

package/src/components/Users/PermissionsList.tsx

@@ -0,0 +1,140 @@
+import React, { useState } from "react";
+import { User, UserCreateDto } from "@@api/generated";
+import { Alert, Card, Switch, Table, Typography, Space } from "antd";
+import apiClient from "@@api/apiClient";
+import { useAccess } from "umi";
+
+const { Title } = Typography;
+
+export type PermissionItemConfig = {
+  key: string;
+  title: string;
+  icon?: React.ReactNode;
+};
+
+export type PermissionGroupConfig = {
+  title: string;
+  icon?: React.ReactNode;
+  permissions: PermissionItemConfig[];
+};
+
+export type PermissionsConfig = Array<PermissionItemConfig | PermissionGroupConfig>;
+
+interface PermissionsListProps {
+  user: User;
+  permissionsConfig: PermissionsConfig;
+}
+
+export const PermissionsList: React.FC<PermissionsListProps> = ({
+  user,
+  permissionsConfig,
+}) => {
+  const [permissionsSet, setPermissionsSet] = useState<Set<string>>(
+    new Set(user.permissions as string[])
+  );
+  const [loading, setLoading] = useState(false);
+  const { canManageAll } = useAccess() || {};
+
+  const togglePermission = (permission: string) => {
+    setLoading(true);
+    const newPermissionsSet = new Set(permissionsSet);
+    if (permissionsSet.has(permission)) {
+      newPermissionsSet.delete(permission);
+    } else {
+      newPermissionsSet.add(permission);
+    }
+    setPermissionsSet(newPermissionsSet);
+    apiClient.users
+      .updateOneBaseUsersControllerUser({
+        id: user.id,
+        requestBody: {
+          permissions: Array.from(newPermissionsSet),
+        }
+      })
+      .then((user) => {
+        setPermissionsSet(new Set(user.permissions as string[]));
+      })
+      .catch(e => {
+        console.error(e);
+        setPermissionsSet(permissionsSet);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  }
+
+  const renderSwitch = (permission: string) => {
+    const disabledSwitch = user.role === UserCreateDto.role.ADMIN || !canManageAll;
+    const isGranted = user.role === UserCreateDto.role.ADMIN || permissionsSet.has(permission);
+
+    return (
+      <Switch
+        checked={isGranted}
+        onChange={() => togglePermission(permission)}
+        disabled={disabledSwitch}
+      />
+    );
+  }
+
+  const buildTableDataSource = () => {
+    return permissionsConfig.map((item, index) => {
+      if ('permissions' in item) {
+        // It's a group with children
+        return {
+          key: `group-${index}`,
+          permission: <Space>{item.icon}<strong>{item.title}</strong></Space>,
+          children: item.permissions.map(childItem => ({
+            key: childItem.key,
+            permission: childItem.title,
+            granted: renderSwitch(childItem.key)
+          }))
+        };
+      } else {
+        // It's an individual permission
+        return {
+          key: item.key,
+          permission: item.icon
+            ? <Space>{item.icon}<strong>{item.title}</strong></Space>
+            : item.title,
+          granted: renderSwitch(item.key)
+        };
+      }
+    });
+  };
+
+  return (
+    <Card>
+      <Title level={5}>Permissions for {user.name}</Title>
+      {user.role === UserCreateDto.role.ADMIN && (
+        <Alert
+          message="Admin can perform any action, in order to change permissions, change user role."
+          type="info"
+          showIcon
+          style={{ marginBottom: '16px' }}
+        />
+      ) || null}
+      <Table
+        loading={loading}
+        expandable={{
+          defaultExpandAllRows: true,
+          expandIcon: () => null,
+        }}
+        size="small"
+        showHeader={false}
+        columns={[
+          {
+            title: 'Permission',
+            dataIndex: 'permission',
+            width: '400px',
+          },
+          {
+            title: 'Granted',
+            dataIndex: 'granted',
+          }
+        ]}
+        dataSource={buildTableDataSource()}
+        pagination={false}
+      />
+    </Card>
+  );
+};

package/src/components/Users/UsersTable.tsx

@@ -0,0 +1,87 @@
+import { Table, isRecordNew, Operators } from "@boarteam/boar-pack-common-frontend";
+import apiClient from "@@api/apiClient";
+import { User, UserCreateDto, UserUpdateDto } from "@@api/generated";
+import { useUsersColumns } from "./useUsersColumns";
+import pick from "lodash/pick";
+import { PermissionsConfig, PermissionsList } from "./PermissionsList";
+import { useAccess, useModel } from "umi";
+
+function entityToDto(entity: User) {
+  return pick(entity, [
+    'name',
+    'email',
+    'role',
+    'pass'
+  ]);
+}
+
+type TUserFilterParams = {
+  name?: string,
+  email?: string,
+  role?: string,
+}
+
+export const UsersTable = ({
+  permissionsConfig = [],
+  userPageUrlPrefix = '/admin/users',
+}: {
+  permissionsConfig?: PermissionsConfig;
+  userPageUrlPrefix?: string | null;
+}) => {
+  const columns = useUsersColumns({
+    userPageUrlPrefix,
+  });
+  const { canManageAll } = useAccess() || {};
+  const { initialState } = useModel('@@initialState');
+  const { currentUser } = initialState || {};
+
+  return (
+    <Table<User, UserCreateDto, UserUpdateDto, TUserFilterParams>
+      getAll={params => {
+        const fields = params.fields?.[0] || '';
+        params.fields = [[fields, 'permissions'].join(',')];
+        return apiClient.users.getManyBaseUsersControllerUser(params);
+      }}
+      onCreate={params => apiClient.users.createOneBaseUsersControllerUser(params)}
+      onUpdate={params => apiClient.users.updateOneBaseUsersControllerUser(params)}
+      onDelete={params => apiClient.users.deleteOneBaseUsersControllerUser(params)}
+      entityToCreateDto={entityToDto}
+      entityToUpdateDto={entityToDto}
+      pathParams={{}}
+      columns={columns}
+      idColumnName='id'
+      searchableColumns={[
+        {
+          field: 'name',
+          operator: Operators.containsLow,
+        },
+        {
+          field: 'email',
+          operator: Operators.containsLow,
+        },
+        {
+          field: 'role',
+          operator: Operators.containsLow,
+        }
+      ]}
+      expandable={{
+        // hide expandable icon for new records which are not saved yet, since you can't set permissions for them
+        rowExpandable: record => !isRecordNew(record),
+        expandedRowRender: record => <PermissionsList
+          user={record}
+          permissionsConfig={permissionsConfig}
+        />,
+      }}
+      viewOnly={!canManageAll}
+      editable={{
+        actionRender: (row, config, dom) => {
+          if (row.id === currentUser?.id) {
+            return [dom.save, dom.cancel];
+          }
+
+          return [dom.save, dom.delete, dom.cancel];
+        }
+      }}
+    ></Table>
+  );
+}

package/src/components/Users/useUsersColumns.tsx

@@ -0,0 +1,132 @@
+import { Link, useIntl } from "@umijs/max";
+import { ProColumns } from "@ant-design/pro-components";
+import { EditOutlined, UserOutlined } from "@ant-design/icons";
+import { Password } from "@boarteam/boar-pack-common-frontend";
+import { useAccess, useModel } from "umi";
+import { Tooltip } from "antd";
+import { User } from "@@api/generated";
+import safetyRun from "@boarteam/boar-pack-common-frontend/src/tools/safetyRun";
+import apiClient from "@@api/apiClient";
+
+export const useUsersColumns = ({
+  userPageUrlPrefix = '/admin/users',
+}: {
+  userPageUrlPrefix?: string | null;
+}): ProColumns<User>[] => {
+  const intl = useIntl();
+  const { initialState } = useModel('@@initialState');
+  const { currentUser } = initialState || {};
+  const { canManageAll } = useAccess() || {};
+
+  const onLoginAsUser = (userId: string) => {
+    safetyRun(apiClient.authentication.loginAsUser({
+      userId,
+    })
+      .then(() => {
+        window.location.href = '/';
+      }));
+  }
+
+  const columns: ProColumns<User>[] = [
+    {
+      title: intl.formatMessage({ id: 'pages.users.name' }),
+      dataIndex: 'name',
+      width: '20%',
+      formItemProps: {
+        rules: [
+          {
+            required: true,
+          }
+        ]
+      },
+      fieldProps: {
+        autoComplete: 'one-time-code', // disable browser autocomplete
+      },
+      render(text, record) {
+        return userPageUrlPrefix ? <Link to={`${userPageUrlPrefix}/${record.id}`}>{text}</Link> : text;
+      }
+    },
+    {
+      title: intl.formatMessage({ id: 'pages.users.email' }),
+      dataIndex: 'email',
+      valueType: 'text',
+      formItemProps: {
+        rules: [
+          {
+            required: true,
+          }
+        ]
+      },
+      fieldProps: {
+        autoComplete: 'one-time-code', // disable browser autocomplete
+      },
+      editable: (v, record) => record.id !== currentUser?.id,
+    },
+    {
+      title: intl.formatMessage({ id: 'pages.users.password' }),
+      dataIndex: 'pass',
+      width: '20%',
+      valueType: 'password',
+      renderFormItem() {
+        return <Password />;
+      },
+      fieldProps: {
+        autoComplete: 'one-time-code', // disable browser autocomplete
+      },
+    },
+    {
+      title: intl.formatMessage({ id: 'pages.users.role' }),
+      dataIndex: 'role',
+      width: '15%',
+      valueType: 'select',
+      valueEnum: {
+        admin: {
+          text: intl.formatMessage({ id: 'pages.users.roles.admin' }),
+        },
+        user: {
+          text: intl.formatMessage({ id: 'pages.users.roles.user' }),
+        },
+      },
+      formItemProps: {
+        rules: [
+          {
+            required: true,
+          }
+        ]
+      },
+      editable: (v, record) => record.id !== currentUser?.id,
+    },
+  ];
+
+  if (canManageAll) {
+    columns.push({
+      title: intl.formatMessage({ id: 'table.actions' }),
+      valueType: 'option',
+      render: (text, record, _, action) => [
+        <a
+          key="editable"
+          onClick={() => {
+            action?.startEditable?.(record.id);
+          }}
+        >
+          <EditOutlined />
+        </a>,
+        <Tooltip
+          title={'Login as user'}
+          key="loginAsUser"
+        >
+          <a
+            onClick={() => {
+              onLoginAsUser(record.id);
+            }}
+          >
+            <UserOutlined />
+          </a>
+        </Tooltip>
+      ],
+    });
+  }
+
+
+  return columns;
+};

package/src/components/index.tsx

@@ -7,4 +7,7 @@ export * from './EventLogs/useEventLogsColumns';
 export * from './Tokens/TokensTable';
 export * from './Tokens/MyTokensTable';
 export * from './Tokens/useTokensColumns';
+export * from './Users/UsersTable';
+export * from './Users/useUsersColumns';
+export * from './Users/PermissionsList';
 export {default as UserAgentDisplay} from './EventLogs/UserAgentDisplay';

package/src/tools/api-client/generated/ApiClient.ts

@@ -5,6 +5,7 @@
 import type { BaseHttpRequest } from './core/BaseHttpRequest';
 import type { OpenAPIConfig } from './core/OpenAPI';
 import { NodeHttpRequest } from './core/NodeHttpRequest';
+import { AuthenticationService } from './services/AuthenticationService';
 import { EventLogsService } from './services/EventLogsService';
 import { SettingsService } from './services/SettingsService';
 import { TelegrafService } from './services/TelegrafService';
@@ -12,6 +13,7 @@ import { TokensService } from './services/TokensService';
 import { UsersService } from './services/UsersService';
 type HttpRequestConstructor = new (config: OpenAPIConfig) => BaseHttpRequest;
 export class ApiClient {
+    public readonly authentication: AuthenticationService;
     public readonly eventLogs: EventLogsService;
     public readonly settings: SettingsService;
     public readonly telegraf: TelegrafService;
@@ -30,6 +32,7 @@ export class ApiClient {
             HEADERS: config?.HEADERS,
             ENCODE_PATH: config?.ENCODE_PATH,
         });
+        this.authentication = new AuthenticationService(this.request);
         this.eventLogs = new EventLogsService(this.request);
         this.settings = new SettingsService(this.request);
         this.telegraf = new TelegrafService(this.request);

package/src/tools/api-client/generated/index.ts

@@ -19,6 +19,8 @@ export type { EventSettingsDto } from './models/EventSettingsDto';
 export type { GetManyEventLogResponseDto } from './models/GetManyEventLogResponseDto';
 export type { GetManyTokenResponseDto } from './models/GetManyTokenResponseDto';
 export type { GetManyUserResponseDto } from './models/GetManyUserResponseDto';
+export type { LocalAuthLoginDto } from './models/LocalAuthLoginDto';
+export type { LocalAuthTokenDto } from './models/LocalAuthTokenDto';
 export type { PermissionDto } from './models/PermissionDto';
 export type { TelegramSettingsDto } from './models/TelegramSettingsDto';
 export type { TelegramSettingsUpdateDto } from './models/TelegramSettingsUpdateDto';
@@ -30,6 +32,7 @@ export { User } from './models/User';
 export { UserCreateDto } from './models/UserCreateDto';
 export { UserUpdateDto } from './models/UserUpdateDto';
 
+export { AuthenticationService } from './services/AuthenticationService';
 export { EventLogsService } from './services/EventLogsService';
 export { SettingsService } from './services/SettingsService';
 export { TelegrafService } from './services/TelegrafService';

package/src/tools/api-client/generated/models/LocalAuthLoginDto.ts

@@ -0,0 +1,9 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export type LocalAuthLoginDto = {
+    email: string;
+    password: string;
+};
+

package/src/tools/api-client/generated/models/LocalAuthTokenDto.ts

@@ -0,0 +1,8 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export type LocalAuthTokenDto = {
+    accessToken: string;
+};
+

package/src/tools/api-client/generated/services/AuthenticationService.ts

@@ -0,0 +1,104 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+import type { LocalAuthLoginDto } from '../models/LocalAuthLoginDto';
+import type { LocalAuthTokenDto } from '../models/LocalAuthTokenDto';
+import type { CancelablePromise } from '../core/CancelablePromise';
+import type { BaseHttpRequest } from '../core/BaseHttpRequest';
+export class AuthenticationService {
+    constructor(public readonly httpRequest: BaseHttpRequest) {}
+    /**
+     * @returns LocalAuthTokenDto
+     * @throws ApiError
+     */
+    public login({
+        requestBody,
+    }: {
+        requestBody: LocalAuthLoginDto,
+    }): CancelablePromise<LocalAuthTokenDto> {
+        return this.httpRequest.request({
+            method: 'POST',
+            url: '/auth/login',
+            body: requestBody,
+            mediaType: 'application/json',
+        });
+    }
+    /**
+     * @returns LocalAuthTokenDto
+     * @throws ApiError
+     */
+    public token(): CancelablePromise<LocalAuthTokenDto> {
+        return this.httpRequest.request({
+            method: 'POST',
+            url: '/auth/token',
+        });
+    }
+    /**
+     * @returns any
+     * @throws ApiError
+     */
+    public loginGoogle(): CancelablePromise<any> {
+        return this.httpRequest.request({
+            method: 'GET',
+            url: '/auth/google',
+        });
+    }
+    /**
+     * @returns any
+     * @throws ApiError
+     */
+    public loginGoogleCallback(): CancelablePromise<any> {
+        return this.httpRequest.request({
+            method: 'GET',
+            url: '/auth/google/callback',
+        });
+    }
+    /**
+     * @returns any
+     * @throws ApiError
+     */
+    public loginMs(): CancelablePromise<any> {
+        return this.httpRequest.request({
+            method: 'GET',
+            url: '/auth/ms',
+        });
+    }
+    /**
+     * @returns any
+     * @throws ApiError
+     */
+    public loginMsCallback(): CancelablePromise<any> {
+        return this.httpRequest.request({
+            method: 'GET',
+            url: '/auth/ms/callback',
+        });
+    }
+    /**
+     * @returns any
+     * @throws ApiError
+     */
+    public logout(): CancelablePromise<any> {
+        return this.httpRequest.request({
+            method: 'POST',
+            url: '/auth/logout',
+        });
+    }
+    /**
+     * @returns LocalAuthTokenDto
+     * @throws ApiError
+     */
+    public loginAsUser({
+        userId,
+    }: {
+        userId: string,
+    }): CancelablePromise<LocalAuthTokenDto> {
+        return this.httpRequest.request({
+            method: 'POST',
+            url: '/auth-manage/login-as-user/{userId}',
+            path: {
+                'userId': userId,
+            },
+        });
+    }
+}