@gadmin2n/schematics 0.0.147 → 0.0.148

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

@@ -4,28 +4,31 @@ import {
   Card,
   Empty,
   Input,
+  Popconfirm,
   Space,
-  Spin,
+  Table,
   Tag,
+  Tooltip,
   Typography,
   message,
+  type TableColumnsType,
 } from 'antd';
 import {
-  ApiOutlined,
+  DeleteOutlined,
   EditOutlined,
   PlusOutlined,
   ReloadOutlined,
 } from '@ant-design/icons';
 import { PageHeader } from 'components';
-import {
-  NESTED_CARD_PROPS,
-  PAGE_WRAPPER_STYLE,
-  SEARCH_CARD_PROPS,
-} from 'constants/layout';
+import { PAGE_WRAPPER_STYLE, SEARCH_CARD_PROPS } from 'constants/layout';
 import { ConnectionModal } from './ConnectionModal';
 import type { IntegrationConnection } from './connection.types';
-import { fetchConnections } from './connectionsApi';
+import { deleteConnection, fetchConnections } from './connectionsApi';
 import { useTranslation } from 'react-i18next';
+import {
+  formatWorkflowUtcDate,
+  formatWorkflowUtcDateTime,
+} from '../utils/workflowDateTime';
 import '../workflow-ui.css';
 import './connections.css';
 
@@ -51,6 +54,137 @@ export default function ConnectionsPage() {
 
   useEffect(() => void load(), [load]);
 
+  async function removeConnection(connection: IntegrationConnection) {
+    try {
+      await deleteConnection(connection.code);
+      setConnections((current) =>
+        current.filter((item) => item.code !== connection.code),
+      );
+      message.success(t('connection.deleteSuccess'));
+    } catch (error: any) {
+      message.error(error?.message ?? t('connection.deleteFailed'));
+    }
+  }
+
+  const columns: TableColumnsType<IntegrationConnection> = [
+    {
+      title: t('common.name'),
+      dataIndex: 'name',
+      key: 'name',
+      width: 220,
+      render: (name: string, connection) => (
+        <div>
+          <Typography.Link onClick={() => setEditing(connection)}>
+            {name}
+          </Typography.Link>
+          <Typography.Text
+            type="secondary"
+            className="workflow-connection-table__code"
+          >
+            {connection.code}
+          </Typography.Text>
+        </div>
+      ),
+    },
+    {
+      title: t('common.description'),
+      dataIndex: 'description',
+      key: 'description',
+      width: 240,
+      render: (description?: string | null) => (
+        <Typography.Text
+          type="secondary"
+          ellipsis={{ tooltip: description || t('connection.noDescription') }}
+        >
+          {description || t('connection.noDescription')}
+        </Typography.Text>
+      ),
+    },
+    {
+      title: t('connection.baseUrl'),
+      dataIndex: 'baseUrl',
+      key: 'baseUrl',
+      width: 280,
+      render: (baseUrl: string) => (
+        <Typography.Text
+          ellipsis={{ tooltip: baseUrl }}
+          className="workflow-connection-table__url"
+        >
+          {baseUrl}
+        </Typography.Text>
+      ),
+    },
+    {
+      title: t('connection.authentication'),
+      key: 'authentication',
+      width: 210,
+      render: (_, connection) => (
+        <Space wrap size={[4, 4]}>
+          <Tag>{connectionAuthLabel(connection, t)}</Tag>
+          {connection.hasSecret && (
+            <Tag color="green">{t('connection.secretStored')}</Tag>
+          )}
+        </Space>
+      ),
+    },
+    {
+      title: t('list.status'),
+      dataIndex: 'isEnabled',
+      key: 'isEnabled',
+      width: 100,
+      render: (isEnabled: boolean) => (
+        <Tag color={isEnabled ? 'blue' : 'default'}>
+          {isEnabled ? t('common.enabled') : t('connection.disabled')}
+        </Tag>
+      ),
+    },
+    {
+      title: t('list.updatedAt'),
+      dataIndex: 'updatedAt',
+      key: 'updatedAt',
+      width: 150,
+      render: (updatedAt: string) => (
+        <Tooltip title={formatWorkflowUtcDateTime(updatedAt)}>
+          <span>{formatWorkflowUtcDate(updatedAt)}</span>
+        </Tooltip>
+      ),
+    },
+    {
+      title: t('list.actions'),
+      key: 'actions',
+      width: 120,
+      render: (_, connection) => (
+        <Space>
+          <Tooltip title={t('connection.openAndEdit')}>
+            <Button
+              size="small"
+              icon={<EditOutlined />}
+              aria-label={t('connection.openAria', { name: connection.name })}
+              onClick={() => setEditing(connection)}
+            />
+          </Tooltip>
+          <Popconfirm
+            title={t('connection.deleteConfirm', { name: connection.name })}
+            description={t('connection.deleteDescription')}
+            okText={t('common.delete')}
+            cancelText={t('common.cancel')}
+            okButtonProps={{ danger: true }}
+            onConfirm={() => removeConnection(connection)}
+          >
+            <Button
+              size="small"
+              danger
+              icon={<DeleteOutlined />}
+              aria-label={t('connection.deleteAria', {
+                name: connection.name,
+              })}
+            />
+          </Popconfirm>
+        </Space>
+      ),
+    },
+  ];
+
   return (
     <div className="workflow-page-stack" style={PAGE_WRAPPER_STYLE}>
       <PageHeader
@@ -84,105 +218,28 @@ export default function ConnectionsPage() {
 
       {/* Content Card */}
       <Card>
-        {loading ? (
-          <Spin
-            size="large"
-            style={{ display: 'block', margin: '48px auto' }}
-          />
-        ) : connections.length === 0 ? (
-          <Empty description={t('connection.empty')}>
-            <Button
-              type="primary"
-              icon={<PlusOutlined />}
-              onClick={() => setEditing(null)}
-            >
-              {t('connection.new')}
-            </Button>
-          </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}
-                className="workflow-connection-card"
-                role="button"
-                tabIndex={0}
-                aria-label={t('connection.openAria', {
-                  name: connection.name,
-                })}
-                onClick={() => setEditing(connection)}
-                onKeyDown={(event) => {
-                  if (event.key === 'Enter' || event.key === ' ') {
-                    event.preventDefault();
-                    setEditing(connection);
-                  }
-                }}
-              >
-                <div className="workflow-connection-card__header">
-                  <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>
-                  <Tag color={connection.isEnabled ? 'blue' : 'default'}>
-                    {connection.isEnabled
-                      ? t('common.enabled')
-                      : t('connection.disabled')}
-                  </Tag>
-                </div>
-                <Typography.Paragraph
-                  type="secondary"
-                  ellipsis={{ rows: 2 }}
-                  className="workflow-connection-card__description"
+        <Table
+          rowKey="code"
+          loading={loading}
+          columns={columns}
+          dataSource={connections}
+          pagination={false}
+          scroll={{ x: 'max-content' }}
+          size="small"
+          locale={{
+            emptyText: (
+              <Empty description={t('connection.empty')}>
+                <Button
+                  type="primary"
+                  icon={<PlusOutlined />}
+                  onClick={() => setEditing(null)}
                 >
-                  {connection.description || t('connection.noDescription')}
-                </Typography.Paragraph>
-                <Typography.Paragraph
-                  ellipsis={{ rows: 1, tooltip: connection.baseUrl }}
-                  className="workflow-connection-card__url"
-                >
-                  {connection.baseUrl}
-                </Typography.Paragraph>
-                <div className="workflow-connection-card__footer">
-                  <Space wrap size={[4, 4]}>
-                    <Tag>{connectionAuthLabel(connection, t)}</Tag>
-                    {connection.hasSecret && (
-                      <Tag color="green">{t('connection.secretStored')}</Tag>
-                    )}
-                  </Space>
-                  <span className="workflow-connection-card__action">
-                    <EditOutlined />
-                    {t('connection.openAndEdit')}
-                  </span>
-                </div>
-              </Card>
-            ))}
-          </div>
-        )}
+                  {t('connection.new')}
+                </Button>
+              </Empty>
+            ),
+          }}
+        />
       </Card>
       <ConnectionModal
         open={editing !== undefined}

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

@@ -283,13 +283,14 @@ export default function WorkflowListPage() {
     {
       title: t('list.runs'),
       key: 'runs',
-      width: 160,
+      width: 190,
       render: (_: any, record: Workflow) => {
         const runs = record.runs || {
           pending: 0,
           running: 0,
           completed: 0,
           failed: 0,
+          cancelled: 0,
         };
         const go = (status: string) =>
           navigate(
@@ -321,6 +322,12 @@ export default function WorkflowListPage() {
               label={t('list.failed')}
               onClick={() => go('FAILED')}
             />
+            <RunDot
+              count={runs.cancelled}
+              color="#8c8c8c"
+              label={t('list.cancelled')}
+              onClick={() => go('CANCELLED')}
+            />
           </Space>
         );
       },

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/instance-detail.test.tsx

@@ -0,0 +1,26 @@
+import { describe, expect, it } from 'vitest';
+import { getStepStatus, shouldShowNodeError } from './instance-detail';
+
+describe('Workflow instance cancellation display', () => {
+  it('does not present a cancelled node as an error', () => {
+    const cancelledError = {
+      message: 'Workflow cancelled',
+      stack: 'CancelledFailure: Workflow cancelled',
+    };
+
+    expect(
+      shouldShowNodeError({ status: 'CANCELLED', error: cancelledError }),
+    ).toBe(false);
+    expect(getStepStatus('CANCELLED')).toBe('wait');
+  });
+
+  it('keeps failure details visible for failed nodes', () => {
+    expect(
+      shouldShowNodeError({
+        status: 'FAILED',
+        error: { message: 'Request failed' },
+      }),
+    ).toBe(true);
+    expect(getStepStatus('FAILED')).toBe('error');
+  });
+});

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

@@ -75,6 +75,9 @@ interface InstanceDetail {
   context: any;
   result: any;
   temporalRunId: string | null;
+  cancellationRequestedAt: string | null;
+  cancellationRequestedBy: string | null;
+  cancellationReason: string | null;
   startedAt: string | null;
   finishedAt: string | null;
   creator: string;
@@ -102,7 +105,7 @@ function formatDuration(start: string | null, end: string | null): string {
   return rem > 0 ? `${m}m ${rem}s` : `${m}m`;
 }
 
-function getStepStatus(
+export function getStepStatus(
   status: string,
 ): 'wait' | 'process' | 'finish' | 'error' {
   switch (status) {
@@ -113,12 +116,18 @@ function getStepStatus(
     case 'FAILED':
       return 'error';
     case 'CANCELLED':
-      return 'error';
+      return 'wait';
     default:
       return 'wait';
   }
 }
 
+export function shouldShowNodeError(
+  execution: Pick<NodeExecution, 'status' | 'error'>,
+): boolean {
+  return execution.status === 'FAILED' && Boolean(execution.error);
+}
+
 export default function WorkflowInstanceDetailPage() {
   const { t } = useTranslation('workflow');
   const { instanceId } = useParams<{ instanceId: string }>();
@@ -370,6 +379,23 @@ export default function WorkflowInstanceDetailPage() {
           <Descriptions.Item label="Duration">
             {formatDuration(data.startedAt, data.finishedAt)}
           </Descriptions.Item>
+          {data.cancellationRequestedAt && (
+            <>
+              <Descriptions.Item
+                label={t('instanceDetail.cancellationRequestedBy')}
+              >
+                {data.cancellationRequestedBy || '—'}
+              </Descriptions.Item>
+              <Descriptions.Item
+                label={t('instanceDetail.cancellationRequestedAt')}
+              >
+                {formatWorkflowUtcDateTime(data.cancellationRequestedAt)}
+              </Descriptions.Item>
+              <Descriptions.Item label={t('instanceDetail.cancellationReason')}>
+                {data.cancellationReason || '—'}
+              </Descriptions.Item>
+            </>
+          )}
           {data.retryOfInstanceId && (
             <Descriptions.Item label={t('instanceDetail.retrySource')}>
               <Button
@@ -562,7 +588,7 @@ export default function WorkflowInstanceDetailPage() {
                             Duration:{' '}
                             {formatDuration(ne.startedAt, ne.finishedAt)}
                           </span>
-                          {ne.error && (
+                          {shouldShowNodeError(ne) && (
                             <div style={{ color: '#ff4d4f', marginTop: 4 }}>
                               Error:{' '}
                               {typeof ne.error === 'object'
@@ -679,7 +705,7 @@ export default function WorkflowInstanceDetailPage() {
                     </div>
                   )}
 
-                {selectedExecution.error && (
+                {shouldShowNodeError(selectedExecution) && (
                   <div style={{ marginBottom: 12 }}>
                     <Text strong style={{ fontSize: 12, color: '#ff4d4f' }}>
                       Error:
@@ -747,7 +773,9 @@ export default function WorkflowInstanceDetailPage() {
                                   ? 'blue'
                                   : selectedExecution.status === 'FAILED'
                                     ? 'red'
-                                    : 'gold'
+                                    : selectedExecution.status === 'CANCELLED'
+                                      ? 'default'
+                                      : 'gold'
                             }
                           >
                             {selectedExecution.status}
@@ -832,7 +860,7 @@ export default function WorkflowInstanceDetailPage() {
                             </div>
                           )}
 
-                        {selectedExecution.error && (
+                        {shouldShowNodeError(selectedExecution) && (
                           <div style={{ marginBottom: 12 }}>
                             <Text
                               strong

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/node-instances/node-config.css

@@ -321,6 +321,19 @@
   line-height: 1.5;
 }
 
+.db-execute-config__sql-head {
+  min-height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.db-execute-config__sql-head .ant-tag {
+  margin-inline-end: 0;
+  font-size: 11px;
+}
+
 .callable-input-parameters__row {
   display: grid;
   min-width: 0;
@@ -865,22 +878,6 @@
   margin-top: -8px;
 }
 
-.workflow-node-panel__footer {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 12px 16px;
-  border-top: 1px solid var(--ant-color-border-secondary);
-  background: var(--ant-color-bg-container);
-  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
-}
-
-.workflow-node-panel__save-template {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
 @media (max-width: 900px) {
   .workflow-node-panel--editor {
     width: min(420px, 52vw) !important;

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/node-instances/node-instance-show.css

@@ -0,0 +1,185 @@
+.node-instance-show__header,
+.node-instance-show__header-main,
+.node-instance-show__title-row,
+.node-instance-show__section-heading {
+  display: flex;
+  align-items: center;
+}
+
+.node-instance-show__header {
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.node-instance-show__header-main {
+  min-width: 0;
+  gap: 8px;
+}
+
+.node-instance-show__heading {
+  min-width: 0;
+}
+
+.node-instance-show__title-row {
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.node-instance-show__title-row .ant-typography {
+  margin: 0;
+}
+
+.node-instance-show__section-heading {
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.node-instance-show__section-heading .ant-typography {
+  margin: 0;
+}
+
+.node-instance-show__section-heading h5.ant-typography {
+  font-size: var(--workflow-content-title-size, 18px);
+  line-height: 28px;
+}
+
+.node-instance-show__summary-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  overflow: hidden;
+  border: 1px solid var(--ant-color-border-secondary);
+  border-radius: 10px;
+  background: var(--ant-color-fill-quaternary);
+}
+
+.node-instance-show__summary-item {
+  min-width: 0;
+  padding: 16px 18px;
+  border-right: 1px solid var(--ant-color-border-secondary);
+  border-bottom: 1px solid var(--ant-color-border-secondary);
+}
+
+.node-instance-show__summary-item:nth-child(3n) {
+  border-right: 0;
+}
+
+.node-instance-show__summary-item:nth-last-child(-n + 3) {
+  border-bottom: 0;
+}
+
+.node-instance-show__summary-item > .ant-typography:first-child {
+  display: block;
+  margin-bottom: 6px;
+  font-size: 12px;
+}
+
+.node-instance-show__summary-item > div {
+  min-height: 24px;
+  overflow-wrap: anywhere;
+}
+
+.node-instance-show__description {
+  display: grid;
+  grid-template-columns: 120px minmax(0, 1fr);
+  gap: 16px;
+  margin-top: 16px;
+  padding: 16px 18px;
+  border: 1px solid var(--ant-color-border-secondary);
+  border-radius: 10px;
+}
+
+.node-instance-show__configuration {
+  max-width: 960px;
+  padding: 20px;
+  border: 1px solid var(--ant-color-border-secondary);
+  border-radius: 10px;
+  background: var(--ant-color-fill-quaternary);
+}
+
+.node-instance-show__empty {
+  margin: 0;
+  padding: 28px 0;
+  border: 1px dashed var(--ant-color-border-secondary);
+  border-radius: 10px;
+  background: var(--ant-color-fill-quaternary);
+}
+
+.node-instance-show__references-loading {
+  display: flex;
+  min-height: 112px;
+  align-items: center;
+  justify-content: center;
+}
+
+.node-instance-show__workflow-link.ant-btn {
+  height: auto;
+  padding: 0;
+  white-space: normal;
+  text-align: left;
+}
+
+.node-instance-show__loading,
+.node-instance-show__not-found {
+  min-height: calc(100vh - 160px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.node-instance-show__not-found {
+  flex-direction: column;
+  gap: 16px;
+}
+
+@media (max-width: 900px) {
+  .node-instance-show__summary-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .node-instance-show__summary-item,
+  .node-instance-show__summary-item:nth-child(3n) {
+    border-right: 1px solid var(--ant-color-border-secondary);
+    border-bottom: 1px solid var(--ant-color-border-secondary);
+  }
+
+  .node-instance-show__summary-item:nth-child(2n) {
+    border-right: 0;
+  }
+
+  .node-instance-show__summary-item:nth-last-child(-n + 2) {
+    border-bottom: 0;
+  }
+}
+
+@media (max-width: 600px) {
+  .node-instance-show__header,
+  .node-instance-show__section-heading {
+    align-items: flex-start;
+  }
+
+  .node-instance-show__summary-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .node-instance-show__summary-item,
+  .node-instance-show__summary-item:nth-child(2n),
+  .node-instance-show__summary-item:nth-child(3n) {
+    border-right: 0;
+    border-bottom: 1px solid var(--ant-color-border-secondary);
+  }
+
+  .node-instance-show__summary-item:last-child {
+    border-bottom: 0;
+  }
+
+  .node-instance-show__description {
+    grid-template-columns: 1fr;
+    gap: 6px;
+  }
+
+  .node-instance-show__configuration {
+    padding: 16px;
+  }
+}