@gadmin2n/schematics 0.0.139 → 0.0.141

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/connections/ConnectionModal.tsx

@@ -0,0 +1,367 @@
+import { Alert, Form, Input, Modal, Select, Switch, message } from 'antd';
+import { customRequest } from 'helpers/http';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import type {
+  ConnectionAuthType,
+  IntegrationConnection,
+} from './connection.types';
+
+interface Props {
+  open: boolean;
+  connection?: IntegrationConnection | null;
+  onCancel(): void;
+  onSaved(connection: IntegrationConnection): void;
+}
+
+type ConnectionFormAuthType = ConnectionAuthType | 'TENCENT_TOF';
+
+export function ConnectionModal({
+  open,
+  connection,
+  onCancel,
+  onSaved,
+}: Props) {
+  const { t } = useTranslation('workflow');
+  const [form] = Form.useForm();
+  const [saving, setSaving] = useState(false);
+  const authType =
+    Form.useWatch<ConnectionFormAuthType>('authType', form) ?? 'NONE';
+
+  useEffect(() => {
+    if (!open) return;
+    form.resetFields();
+    form.setFieldsValue(
+      connection
+        ? {
+            ...connection,
+            authType: isTencentTofConnection(connection)
+              ? 'TENCENT_TOF'
+              : connection.authType,
+            paasId: connection.publicConfig?.paasId,
+            defaultHeaders: JSON.stringify(
+              connection.publicConfig?.defaultHeaders ?? {},
+              null,
+              2,
+            ),
+            apiKeyName: connection.publicConfig?.apiKeyName,
+            apiKeyLocation: connection.publicConfig?.apiKeyLocation ?? 'HEADER',
+          }
+        : {
+            authType: 'NONE',
+            isEnabled: true,
+            apiKeyLocation: 'HEADER',
+            defaultHeaders: '{}',
+          },
+    );
+  }, [connection, form, open]);
+
+  async function save() {
+    try {
+      const values = await form.validateFields();
+      const defaultHeaders = parseJsonObject(
+        values.defaultHeaders,
+        t('connection.defaultHeaders'),
+      );
+      const usesTencentTof = values.authType === 'TENCENT_TOF';
+      const publicConfig = {
+        defaultHeaders,
+        ...(usesTencentTof
+          ? {
+              signatureType: 'TENCENT_TOF',
+              paasId: values.paasId,
+            }
+          : values.authType === 'API_KEY'
+            ? {
+                apiKeyName: values.apiKeyName,
+                apiKeyLocation: values.apiKeyLocation,
+              }
+            : {}),
+      };
+      const secretConfig = buildSecrets(values);
+      const payload = {
+        ...(!connection && values.code ? { code: values.code } : {}),
+        name: values.name,
+        description: values.description || null,
+        baseUrl: values.baseUrl,
+        authType: usesTencentTof ? 'API_KEY' : values.authType,
+        publicConfig,
+        ...(secretConfig && { secretConfig }),
+        isEnabled: values.isEnabled,
+        ...(connection && { expectedRevision: connection.revision }),
+      };
+      setSaving(true);
+      const saved = await customRequest<IntegrationConnection>(
+        connection
+          ? `integration-connections/${encodeURIComponent(connection.code)}`
+          : 'integration-connections',
+        connection ? 'PATCH' : 'POST',
+        payload,
+      );
+      message.success(
+        connection
+          ? t('connection.updateSuccess')
+          : t('connection.createSuccess'),
+      );
+      onSaved(saved);
+    } catch (error: any) {
+      if (error?.errorFields) return;
+      message.error(error?.message ?? t('connection.saveFailed'));
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <Modal
+      open={open}
+      title={connection ? t('connection.edit') : t('connection.new')}
+      okText={connection ? t('common.save') : t('connection.createAndUse')}
+      confirmLoading={saving}
+      onOk={save}
+      onCancel={onCancel}
+      destroyOnHidden
+      width={680}
+    >
+      <Alert
+        type="info"
+        showIcon
+        message={t('connection.description')}
+        style={{ marginBottom: 18 }}
+      />
+      <Form form={form} layout="vertical">
+        <div
+          style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}
+        >
+          <Form.Item
+            name="name"
+            label={t('common.name')}
+            rules={[{ required: true }]}
+          >
+            <Input placeholder={t('connection.namePlaceholder')} />
+          </Form.Item>
+          <Form.Item
+            name="code"
+            label={t('connection.code')}
+            tooltip={t('connection.codeDescription')}
+          >
+            <Input
+              disabled={Boolean(connection)}
+              placeholder={t('connection.autoCode')}
+            />
+          </Form.Item>
+        </div>
+        <Form.Item
+          name="baseUrl"
+          label={t('connection.baseUrl')}
+          rules={[{ required: true }, { type: 'url' }]}
+        >
+          <Input placeholder="https://tickets.example.com/api" />
+        </Form.Item>
+        <div
+          style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}
+        >
+          <Form.Item
+            name="authType"
+            label={t('connection.authentication')}
+            rules={[{ required: true }]}
+          >
+            <Select
+              options={[
+                { value: 'NONE', label: t('connection.noAuth') },
+                { value: 'BEARER', label: t('connection.bearerToken') },
+                { value: 'BASIC', label: t('connection.basicAuthFull') },
+                { value: 'API_KEY', label: t('connection.apiKey') },
+                {
+                  value: 'TENCENT_TOF',
+                  label: t('connection.tencentTof'),
+                },
+              ]}
+            />
+          </Form.Item>
+          <Form.Item
+            name="isEnabled"
+            label={t('common.enabled')}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+        </div>
+
+        {connectionUsesAuthType(connection, authType) &&
+          connection?.hasSecret && (
+            <Alert
+              type="success"
+              message={t('connection.storedHint')}
+              style={{ marginBottom: 16 }}
+            />
+          )}
+        {authType === 'BEARER' && (
+          <Form.Item
+            name="token"
+            label={t('connection.bearerToken')}
+            rules={secretRules(
+              connectionUsesAuthType(connection, authType) ? connection : null,
+            )}
+          >
+            <Input.Password autoComplete="new-password" />
+          </Form.Item>
+        )}
+        {authType === 'BASIC' && (
+          <div
+            style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}
+          >
+            <Form.Item
+              name="username"
+              label={t('connection.username')}
+              rules={secretRules(
+                connectionUsesAuthType(connection, authType)
+                  ? connection
+                  : null,
+              )}
+            >
+              <Input autoComplete="off" />
+            </Form.Item>
+            <Form.Item
+              name="password"
+              label={t('connection.password')}
+              rules={secretRules(
+                connectionUsesAuthType(connection, authType)
+                  ? connection
+                  : null,
+              )}
+            >
+              <Input.Password autoComplete="new-password" />
+            </Form.Item>
+          </div>
+        )}
+        {authType === 'API_KEY' && (
+          <div
+            style={{
+              display: 'grid',
+              gridTemplateColumns: '1fr 1fr 1fr',
+              gap: 16,
+            }}
+          >
+            <Form.Item
+              name="apiKeyName"
+              label={t('connection.keyName')}
+              rules={[{ required: true }]}
+            >
+              <Input placeholder="X-API-Key" />
+            </Form.Item>
+            <Form.Item
+              name="apiKeyLocation"
+              label={t('connection.sendIn')}
+              rules={[{ required: true }]}
+            >
+              <Select options={[{ value: 'HEADER' }, { value: 'QUERY' }]} />
+            </Form.Item>
+            <Form.Item
+              name="apiKey"
+              label={t('connection.apiKey')}
+              rules={secretRules(
+                connectionUsesAuthType(connection, authType)
+                  ? connection
+                  : null,
+              )}
+            >
+              <Input.Password autoComplete="new-password" />
+            </Form.Item>
+          </div>
+        )}
+        {authType === 'TENCENT_TOF' && (
+          <div
+            style={{
+              display: 'grid',
+              gridTemplateColumns: '1fr 1fr',
+              gap: 16,
+            }}
+          >
+            <Form.Item
+              name="paasId"
+              label={t('connection.paasId')}
+              rules={[{ required: true }]}
+            >
+              <Input autoComplete="off" />
+            </Form.Item>
+            <Form.Item
+              name="paasToken"
+              label={t('connection.paasToken')}
+              rules={secretRules(
+                connectionUsesAuthType(connection, authType)
+                  ? connection
+                  : null,
+              )}
+            >
+              <Input.Password autoComplete="new-password" />
+            </Form.Item>
+          </div>
+        )}
+        <Form.Item
+          name="defaultHeaders"
+          label={t('connection.defaultHeaders')}
+          rules={[
+            {
+              validator: (_, value) =>
+                validateJson(value, t('connection.defaultHeaders')),
+            },
+          ]}
+        >
+          <Input.TextArea rows={4} spellCheck={false} />
+        </Form.Item>
+        <Form.Item name="description" label={t('common.description')}>
+          <Input.TextArea rows={2} />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+}
+
+function secretRules(connection?: IntegrationConnection | null) {
+  return connection?.hasSecret ? undefined : [{ required: true }];
+}
+
+function buildSecrets(values: Record<string, any>) {
+  if (values.authType === 'BEARER' && values.token)
+    return { token: values.token };
+  if (values.authType === 'BASIC' && values.username && values.password)
+    return { username: values.username, password: values.password };
+  if (values.authType === 'API_KEY' && values.apiKey)
+    return { apiKey: values.apiKey };
+  if (values.authType === 'TENCENT_TOF' && values.paasId && values.paasToken)
+    return { apiKey: values.paasToken };
+  return undefined;
+}
+
+function isTencentTofConnection(
+  connection?: IntegrationConnection | null,
+): boolean {
+  return connection?.publicConfig?.signatureType === 'TENCENT_TOF';
+}
+
+function connectionUsesAuthType(
+  connection: IntegrationConnection | null | undefined,
+  authType: ConnectionFormAuthType,
+): boolean {
+  if (!connection) return false;
+  if (authType === 'TENCENT_TOF') return isTencentTofConnection(connection);
+  return (
+    connection.authType === authType && !isTencentTofConnection(connection)
+  );
+}
+
+function parseJsonObject(value: string, label: string): Record<string, string> {
+  try {
+    const parsed = JSON.parse(value || '{}');
+    if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed))
+      throw new Error();
+    return parsed;
+  } catch {
+    throw new Error(`${label} must be a JSON object`);
+  }
+}
+
+async function validateJson(value: string, label: string) {
+  parseJsonObject(value, label);
+}

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/connections/connection.types.ts

@@ -0,0 +1,21 @@
+export type ConnectionAuthType = 'NONE' | 'BASIC' | 'BEARER' | 'API_KEY';
+
+export interface IntegrationConnection {
+  id: string;
+  code: string;
+  name: string;
+  description?: string | null;
+  baseUrl: string;
+  authType: ConnectionAuthType;
+  publicConfig: {
+    defaultHeaders?: Record<string, string>;
+    apiKeyName?: string;
+    apiKeyLocation?: 'HEADER' | 'QUERY';
+    signatureType?: 'TENCENT_TOF';
+    paasId?: string;
+  };
+  hasSecret: boolean;
+  isEnabled: boolean;
+  revision: number;
+  updatedAt: string;
+}

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/connections/index.tsx

@@ -0,0 +1,180 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import {
+  Button,
+  Card,
+  Empty,
+  Input,
+  Space,
+  Spin,
+  Switch,
+  Tag,
+  Typography,
+  message,
+} from 'antd';
+import {
+  ApiOutlined,
+  EditOutlined,
+  PlusOutlined,
+  ReloadOutlined,
+} from '@ant-design/icons';
+import { customRequest } from 'helpers/http';
+import { PageHeader } from 'components';
+import {
+  NESTED_CARD_PROPS,
+  PAGE_WRAPPER_STYLE,
+  SEARCH_CARD_PROPS,
+} from 'constants/layout';
+import { ConnectionModal } from './ConnectionModal';
+import type { IntegrationConnection } from './connection.types';
+import { useTranslation } from 'react-i18next';
+
+export default function ConnectionsPage() {
+  const { t } = useTranslation('workflow');
+  const [connections, setConnections] = useState<IntegrationConnection[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [query, setQuery] = useState('');
+  const [editing, setEditing] = useState<
+    IntegrationConnection | null | undefined
+  >();
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    try {
+      setConnections(
+        await customRequest<IntegrationConnection[]>(
+          `integration-connections?q=${encodeURIComponent(query)}`,
+          'GET',
+        ),
+      );
+    } catch (error: any) {
+      message.error(error?.message ?? t('connection.loadFailed'));
+    } finally {
+      setLoading(false);
+    }
+  }, [query, t]);
+
+  useEffect(() => void load(), [load]);
+
+  return (
+    <div style={PAGE_WRAPPER_STYLE}>
+      <PageHeader
+        title={t('connection.title')}
+        subtitle={t('connection.subtitle')}
+        extra={
+          <Space>
+            <Button icon={<ReloadOutlined />} onClick={load} />
+            <Button
+              type="primary"
+              icon={<PlusOutlined />}
+              onClick={() => setEditing(null)}
+            >
+              {t('connection.new')}
+            </Button>
+          </Space>
+        }
+      />
+
+      {/* Search Card */}
+      <Card {...SEARCH_CARD_PROPS}>
+        <Input.Search
+          allowClear
+          placeholder={t('connection.search')}
+          onSearch={setQuery}
+          style={{ width: 300 }}
+        />
+      </Card>
+
+      {/* Content Card */}
+      <Card>
+        {loading ? (
+          <Spin
+            size="large"
+            style={{ display: 'block', margin: '48px auto' }}
+          />
+        ) : connections.length === 0 ? (
+          <Empty description={t('connection.empty')} />
+        ) : (
+          <div
+            style={{
+              display: 'grid',
+              gridTemplateColumns: 'repeat(auto-fill, minmax(330px, 1fr))',
+              gap: 16,
+            }}
+          >
+            {connections.map((connection) => (
+              <Card
+                key={connection.code}
+                size="small"
+                hoverable
+                {...NESTED_CARD_PROPS}
+              >
+                <div
+                  style={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    gap: 12,
+                  }}
+                >
+                  <Space align="start">
+                    <ApiOutlined
+                      style={{
+                        color: 'var(--ant-color-primary)',
+                        fontSize: 20,
+                        marginTop: 3,
+                      }}
+                    />
+                    <div>
+                      <Typography.Text strong>
+                        {connection.name}
+                      </Typography.Text>
+                      <Typography.Text
+                        type="secondary"
+                        style={{ display: 'block', fontSize: 12 }}
+                      >
+                        {connection.code}
+                      </Typography.Text>
+                    </div>
+                  </Space>
+                  <Button
+                    type="text"
+                    icon={<EditOutlined />}
+                    onClick={() => setEditing(connection)}
+                  />
+                </div>
+                <Typography.Paragraph
+                  ellipsis
+                  style={{ margin: '14px 0 10px' }}
+                >
+                  {connection.baseUrl}
+                </Typography.Paragraph>
+                <Space wrap>
+                  <Tag>{connection.authType}</Tag>
+                  {connection.hasSecret && (
+                    <Tag color="green">{t('connection.secretStored')}</Tag>
+                  )}
+                  <Tag color={connection.isEnabled ? 'blue' : 'default'}>
+                    {connection.isEnabled
+                      ? t('common.enabled')
+                      : t('connection.disabled')}
+                  </Tag>
+                </Space>
+              </Card>
+            ))}
+          </div>
+        )}
+      </Card>
+      <ConnectionModal
+        open={editing !== undefined}
+        connection={editing}
+        onCancel={() => setEditing(undefined)}
+        onSaved={(saved) => {
+          setEditing(undefined);
+          setConnections((current) => [
+            saved,
+            ...current.filter((item) => item.code !== saved.code),
+          ]);
+        }}
+      />
+    </div>
+  );
+}