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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boarteam/boar-pack-users-frontend",
-  "version": "2.4.1",
+  "version": "2.5.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.0",
+    "@boarteam/boar-pack-common-frontend": "^2.8.1",
     "@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": "bff974a7a00f6c4d66ffbb035f36ce9e5a7496f9"
+  "gitHead": "79fe5a34f9a9bd6e1e3e010f7a64b3b82c9e19b5"
 }

package/src/components/Settings/NotificationsSettings.tsx

@@ -0,0 +1,206 @@
+import { ProDescriptions } from "@ant-design/pro-components";
+import { Button, Card, message, Space, Typography } from "antd";
+import React, { useContext } from "react";
+import { useIntl } from "umi";
+import apiClient from "@@api/apiClient";
+import { EventSettingsDto, TelegramSettingsUpdateDto } from "@@api/generated";
+import { SettingsContext } from "../../components/Settings/settingsContext";
+
+const { Title, Text, Paragraph } = Typography;
+
+const isBoolean = (value: any) => {
+  return [true, false].includes(value)
+}
+
+async function onSaveTelegramSettings(row: TelegramSettingsUpdateDto) {
+  apiClient.telegraf.setTelegramSettings({
+    requestBody: row,
+  }).catch(e => {
+    console.error(e);
+  });
+}
+
+async function onSaveEventSettings(row: EventSettingsDto) {
+  apiClient.settings.setEventSettings({
+    requestBody: row,
+  }).catch(e => {
+    console.error(e);
+  });
+}
+
+export const NotificationsSettings: React.FC = () => {
+  const [loading, setLoading] = React.useState<boolean>(false);
+  const [settingsChanging, setSettingsChanging] = React.useState<boolean>(false);
+  const [messageApi, contextHolder] = message.useMessage();
+  const intl = useIntl();
+  const settingsContext = useContext(SettingsContext);
+
+  const testSettings = async () => {
+    setLoading(true);
+    try {
+      await apiClient.telegraf.testTelegraf();
+      messageApi.success(intl.formatMessage({ id: 'pages.notifications.testSuccess' }));
+    } catch (e) {
+      console.error(e);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <Card>
+      <div>
+        <Title level={3}>Introduction</Title>
+        <Paragraph>
+          This service allows you to receive important event notifications through Telegram. You'll be able to stay
+          informed about system usage and health.
+        </Paragraph>
+
+        <Title level={4}>Creation of Telegram Bot</Title>
+        <Paragraph>
+          <ol>
+            <li>Register your bot by sending the command <Text copyable={true} code>/newbot</Text> to <a
+              href="https://t.me/BotFather" target="_blank" rel="noreferrer"
+            >@BotFather</a> and follow the
+              instructions.
+            </li>
+            <li>Copy the bot token provided by @BotFather and paste it in the "Telegram Bot Access Token" field.</li>
+            <li>Add your bot to the group you wish to send notifications to.</li>
+          </ol>
+        </Paragraph>
+
+        <Title level={4}>Telegram Notifications Setup</Title>
+
+        <Title level={5}>Option 1: Personal Notifications</Title>
+        <Paragraph>
+          <ol>
+            <li>Send the command <Text code copyable={true}>/getid</Text> to the bot named <a
+              href="https://t.me/myidbot" target="_blank" rel="noreferrer"
+            >@myidbot</a> in your Telegram messenger.
+            </li>
+            <li>Copy the chat ID returned by the bot and paste it in the designated "Telegram Chat ID" field.</li>
+          </ol>
+        </Paragraph>
+
+        <Title level={5}>Option 2: Notifications for Telegram Groups</Title>
+        <Paragraph>
+          <ol>
+            <li>Add the bot named <a
+              href="https://t.me/myidbot" target="_blank" rel="noreferrer"
+            >@myidbot</a> to your Telegram group.</li>
+            <li>Send the command <Text code copyable={true}>/getgroupid</Text> to @myidbot within the group chat.
+            </li>
+            <li>Copy the group ID returned by the bot and paste it in the designated "Telegram Chat ID" field.</li>
+          </ol>
+        </Paragraph>
+      </div>
+
+      <Space direction={'vertical'} size={"middle"}>
+        <ProDescriptions<TelegramSettingsUpdateDto>
+          bordered={true}
+          size={'small'}
+          formProps={{
+            onValuesChange: async (changedValues) => {
+              if (Object.keys(changedValues).some(key => isBoolean(changedValues[key]))) {
+                setSettingsChanging(true);
+                await onSaveTelegramSettings(changedValues);
+                setSettingsChanging(false);
+              }
+            }
+          }}
+          columns={[
+            {
+              title: 'Telegram notifications enabled',
+              dataIndex: 'enabled',
+              valueType: 'switch',
+              span: 4,
+              mode: 'update',
+              fieldProps: {
+                loading: settingsChanging,
+              },
+            },
+            {
+              title: 'Telegram Bot Access Token',
+              dataIndex: 'botToken',
+              valueType: 'password',
+              span: 4,
+            },
+            {
+              title: 'Telegram Chat ID',
+              dataIndex: 'chatId',
+              valueType: 'text',
+              span: 4,
+            },
+          ]}
+          request={async () => {
+            return {
+              success: true,
+              data: await apiClient.telegraf.getTelegramSettings()
+            }
+          }}
+          editable={{
+            onSave: async (key, row) => {
+              setSettingsChanging(true);
+              await onSaveTelegramSettings(row);
+              setSettingsChanging(false);
+            },
+            actionRender: (row, config, dom) => {
+              if (config.recordKey === 'enabled') {
+                return [];
+              }
+
+              return [dom.save, dom.cancel];
+            }
+          }}
+        />
+        {settingsContext.columns.length > 0 && (
+          <ProDescriptions<EventSettingsDto>
+            title='Events'
+            bordered={true}
+            size={'small'}
+            formProps={{
+              onValuesChange: async (changedValues) => {
+                if (Object.keys(changedValues).some(key => isBoolean(changedValues[key]))) {
+                  setSettingsChanging(true);
+                  await onSaveEventSettings(changedValues);
+                  setSettingsChanging(false);
+                }
+              }
+            }}
+            columns={[
+              ...settingsContext.columns.map(column => ({
+                ...column,
+                fieldProps: {
+                  loading: settingsChanging,
+                  ...column.fieldProps,
+                },
+              })),
+            ]}
+            request={async () => {
+              return {
+                success: true,
+                data: await apiClient.settings.getEventSettings()
+              }
+            }}
+            editable={{
+              onSave: async (key, row) => {
+                setSettingsChanging(true);
+                await onSaveEventSettings(row);
+                setSettingsChanging(false);
+              },
+              actionRender: () => {
+                return [];
+              }
+            }}
+          />
+        )}
+        <Button
+          type="primary"
+          loading={loading}
+          onClick={testSettings}
+        >Send test message</Button>
+      </Space>
+      {contextHolder}
+    </Card>
+  )
+}

package/src/components/Settings/settingsContext.tsx

@@ -0,0 +1,9 @@
+import { createContext } from "react";
+import { ProDescriptionsItemProps } from "@ant-design/pro-descriptions";
+import { TelegramSettingsUpdateDto } from "@@api/generated";
+
+type TSettingsContext = {
+  columns: ProDescriptionsItemProps<TelegramSettingsUpdateDto, 'text'>[]
+}
+
+export const SettingsContext = createContext<TSettingsContext | undefined>(undefined);

package/src/pages/Settings/index.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { useIntl } from "@umijs/max";
+import { NotificationsSettings } from "../../components/Settings/NotificationsSettings";
+import { PageContainer } from "@ant-design/pro-components";
+import { useTabs } from "@boarteam/boar-pack-common-frontend";
+
+enum Tabs {
+  notifications = 'notifications',
+}
+
+const Settings: React.FC = () => {
+  const [activeTab, setActiveTab] = useTabs<Tabs>(Tabs.notifications);
+  const intl = useIntl();
+
+  const tabList = [
+    {
+      key: Tabs.notifications,
+      tab: intl.formatMessage({ id: 'pages.settings.notifications' }),
+    },
+  ];
+
+  return (
+    <PageContainer
+      tabList={tabList}
+      tabActiveKey={activeTab}
+      onTabChange={(key) => {
+        setActiveTab(key as Tabs);
+      }}
+    >
+      {activeTab === Tabs.notifications ? <NotificationsSettings /> : null}
+    </PageContainer>
+  )
+}
+
+export default Settings;

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

@@ -6,11 +6,15 @@ import type { BaseHttpRequest } from './core/BaseHttpRequest';
 import type { OpenAPIConfig } from './core/OpenAPI';
 import { NodeHttpRequest } from './core/NodeHttpRequest';
 import { EventLogsService } from './services/EventLogsService';
+import { SettingsService } from './services/SettingsService';
+import { TelegrafService } from './services/TelegrafService';
 import { TokensService } from './services/TokensService';
 import { UsersService } from './services/UsersService';
 type HttpRequestConstructor = new (config: OpenAPIConfig) => BaseHttpRequest;
 export class ApiClient {
     public readonly eventLogs: EventLogsService;
+    public readonly settings: SettingsService;
+    public readonly telegraf: TelegrafService;
     public readonly tokens: TokensService;
     public readonly users: UsersService;
     public readonly request: BaseHttpRequest;
@@ -27,6 +31,8 @@ export class ApiClient {
             ENCODE_PATH: config?.ENCODE_PATH,
         });
         this.eventLogs = new EventLogsService(this.request);
+        this.settings = new SettingsService(this.request);
+        this.telegraf = new TelegrafService(this.request);
         this.tokens = new TokensService(this.request);
         this.users = new UsersService(this.request);
     }

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

@@ -15,10 +15,13 @@ export { EventLogCreateDto } from './models/EventLogCreateDto';
 export { EventLogTimelineDto } from './models/EventLogTimelineDto';
 export type { EventLogTimelineQueryDto } from './models/EventLogTimelineQueryDto';
 export { EventLogUpdateDto } from './models/EventLogUpdateDto';
+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 { PermissionDto } from './models/PermissionDto';
+export type { TelegramSettingsDto } from './models/TelegramSettingsDto';
+export type { TelegramSettingsUpdateDto } from './models/TelegramSettingsUpdateDto';
 export type { Token } from './models/Token';
 export type { TokenCreateDto } from './models/TokenCreateDto';
 export type { TokenUpdateDto } from './models/TokenUpdateDto';
@@ -28,5 +31,7 @@ export { UserCreateDto } from './models/UserCreateDto';
 export { UserUpdateDto } from './models/UserUpdateDto';
 
 export { EventLogsService } from './services/EventLogsService';
+export { SettingsService } from './services/SettingsService';
+export { TelegrafService } from './services/TelegrafService';
 export { TokensService } from './services/TokensService';
 export { UsersService } from './services/UsersService';

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

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

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

@@ -0,0 +1,10 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export type TelegramSettingsDto = {
+    enabled: boolean;
+    botToken: string | null;
+    chatId: string | null;
+};
+

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

@@ -0,0 +1,10 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export type TelegramSettingsUpdateDto = {
+    enabled?: boolean;
+    botToken?: string;
+    chatId?: string;
+};
+

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

@@ -0,0 +1,36 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+import type { EventSettingsDto } from '../models/EventSettingsDto';
+import type { CancelablePromise } from '../core/CancelablePromise';
+import type { BaseHttpRequest } from '../core/BaseHttpRequest';
+export class SettingsService {
+    constructor(public readonly httpRequest: BaseHttpRequest) {}
+    /**
+     * @returns EventSettingsDto
+     * @throws ApiError
+     */
+    public getEventSettings(): CancelablePromise<EventSettingsDto> {
+        return this.httpRequest.request({
+            method: 'GET',
+            url: '/settings/events',
+        });
+    }
+    /**
+     * @returns any
+     * @throws ApiError
+     */
+    public setEventSettings({
+        requestBody,
+    }: {
+        requestBody: EventSettingsDto,
+    }): CancelablePromise<any> {
+        return this.httpRequest.request({
+            method: 'PATCH',
+            url: '/settings/events',
+            body: requestBody,
+            mediaType: 'application/json',
+        });
+    }
+}

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

@@ -0,0 +1,47 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+import type { TelegramSettingsDto } from '../models/TelegramSettingsDto';
+import type { TelegramSettingsUpdateDto } from '../models/TelegramSettingsUpdateDto';
+import type { CancelablePromise } from '../core/CancelablePromise';
+import type { BaseHttpRequest } from '../core/BaseHttpRequest';
+export class TelegrafService {
+    constructor(public readonly httpRequest: BaseHttpRequest) {}
+    /**
+     * @returns TelegramSettingsDto
+     * @throws ApiError
+     */
+    public getTelegramSettings(): CancelablePromise<TelegramSettingsDto> {
+        return this.httpRequest.request({
+            method: 'GET',
+            url: '/telegraf/telegram',
+        });
+    }
+    /**
+     * @returns any
+     * @throws ApiError
+     */
+    public setTelegramSettings({
+        requestBody,
+    }: {
+        requestBody: TelegramSettingsUpdateDto,
+    }): CancelablePromise<any> {
+        return this.httpRequest.request({
+            method: 'PATCH',
+            url: '/telegraf/telegram',
+            body: requestBody,
+            mediaType: 'application/json',
+        });
+    }
+    /**
+     * @returns any
+     * @throws ApiError
+     */
+    public testTelegraf(): CancelablePromise<any> {
+        return this.httpRequest.request({
+            method: 'POST',
+            url: '/telegraf/test',
+        });
+    }
+}