dumtruck/konobangu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: support server port reuse

Browse Source
This commit is contained in:
master
2025-05-31 01:59:04 +08:00
parent a676061b3e
commit ac7d1efb8d
32 changed files with 1111 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
apps/recorder/src/app/context.rs
View File

@@ -40,13 +40,13 @@ pub struct AppContext {
cache: CacheService,
mikan: MikanClient,
auth: AuthService,
graphql: GraphQLService,
storage: StorageService,
crypto: CryptoService,
working_dir: String,
environment: Environment,
message: MessageService,
task: OnceCell<TaskService>,
graphql: OnceCell<GraphQLService>,
}
impl AppContext {
@@ -65,7 +65,6 @@ impl AppContext {
let auth = AuthService::from_conf(config.auth).await?;
let mikan = MikanClient::from_config(config.mikan).await?;
let crypto = CryptoService::from_config(config.crypto).await?;
let graphql = GraphQLService::from_config_and_database(config.graphql, db.clone()).await?;
let ctx = Arc::new(AppContext {
config: config_cloned,
@@ -77,10 +76,10 @@ impl AppContext {
storage,
mikan,
working_dir: working_dir.to_string(),
graphql,
crypto,
message,
task: OnceCell::new(),
graphql: OnceCell::new(),
});
ctx.task
@@ -89,6 +88,12 @@ impl AppContext {
})
.await?;
ctx.graphql
.get_or_try_init(async || {
GraphQLService::from_config_and_ctx(config.graphql, ctx.clone()).await
})
.await?;
Ok(ctx)
}
}
@@ -119,7 +124,7 @@ impl AppContextTrait for AppContext {
&self.auth
}
fn graphql(&self) -> &GraphQLService {
&self.graphql
self.graphql.get().expect("graphql should be set")
}
fn storage(&self) -> &dyn StorageServiceTrait {
&self.storage

30
apps/recorder/src/app/core.rs
View File

@@ -1,7 +1,8 @@
use std::{net::SocketAddr, sync::Arc};
use axum::Router;
use tokio::signal;
use tokio::{net::TcpSocket, signal};
use tracing::instrument;
use super::{builder::AppBuilder, context::AppContextTrait};
use crate::{
@@ -22,14 +23,31 @@ impl App {
AppBuilder::default()
}
#[instrument(err, skip(self))]
pub async fn serve(&self) -> RecorderResult<()> {
let context = &self.context;
let config = context.config();
let listener = tokio::net::TcpListener::bind(&format!(
"{}:{}",
config.server.binding, config.server.port
))
.await?;
let listener = {
let addr: SocketAddr =
format!("{}:{}", config.server.binding, config.server.port).parse()?;
let socket = if addr.is_ipv4() {
TcpSocket::new_v4()
} else {
TcpSocket::new_v6()
}?;
socket.set_reuseaddr(true)?;
#[cfg(all(unix, not(target_os = "solaris")))]
if let Err(e) = socket.set_reuseport(true) {
tracing::warn!("Failed to set SO_REUSEPORT: {}", e);
}
socket.bind(addr)?;
socket.listen(1024)
}?;
let mut router = Router::<Arc<dyn AppContextTrait>>::new();

4
apps/recorder/src/database/service.rs
View File

@@ -10,10 +10,6 @@ use sea_orm_migration::MigratorTrait;
use super::DatabaseConfig;
use crate::{errors::RecorderResult, migrations::Migrator};
pub trait DatabaseServiceConnectionTrait {
fn get_database_connection(&self) -> &DatabaseConnection;
}
pub struct DatabaseService {
connection: DatabaseConnection,
#[cfg(all(any(test, feature = "playground"), feature = "testcontainers"))]

2
apps/recorder/src/errors/app_error.rs
View File

@@ -25,6 +25,8 @@ pub enum RecorderError {
source: Box<fancy_regex::Error>,
},
#[snafu(transparent)]
NetAddrParseError { source: std::net::AddrParseError },
#[snafu(transparent)]
RegexError { source: regex::Error },
#[snafu(transparent)]
InvalidMethodError { source: http::method::InvalidMethod },

4
apps/recorder/src/graphql/infra/transformer.rs
View File

@@ -139,7 +139,7 @@ fn add_crypto_column_output_conversion<T>(
);
}
pub fn crypto_transformer(context: &mut BuilderContext, ctx: Arc<dyn AppContextTrait>) {
pub fn add_crypto_transformers(context: &mut BuilderContext, ctx: Arc<dyn AppContextTrait>) {
add_crypto_column_input_conversion::<credential_3rd::Entity>(
context,
ctx.clone(),
@@ -150,7 +150,7 @@ pub fn crypto_transformer(context: &mut BuilderContext, ctx: Arc<dyn AppContextT
ctx.clone(),
&credential_3rd::Column::Username,
);
add_crypto_column_output_conversion::<credential_3rd::Entity>(
add_crypto_column_input_conversion::<credential_3rd::Entity>(
context,
ctx.clone(),
&credential_3rd::Column::Password,

36
apps/recorder/src/graphql/schema.rs
View File

@@ -1,21 +1,27 @@
use std::sync::Arc;
use async_graphql::dynamic::*;
use once_cell::sync::OnceCell;
use sea_orm::{DatabaseConnection, EntityTrait, Iterable};
use sea_orm::{EntityTrait, Iterable};
use seaography::{Builder, BuilderContext, FilterType, FilterTypesMapHelper};
use crate::graphql::{
infra::{
filter::{
JSONB_FILTER_NAME, SUBSCRIBER_ID_FILTER_INFO, init_custom_filter_info,
register_jsonb_input_filter_to_dynamic_schema, subscriber_id_condition_function,
use crate::{
app::AppContextTrait,
graphql::{
infra::{
filter::{
JSONB_FILTER_NAME, SUBSCRIBER_ID_FILTER_INFO, init_custom_filter_info,
register_jsonb_input_filter_to_dynamic_schema, subscriber_id_condition_function,
},
guard::{guard_entity_with_subscriber_id, guard_field_with_subscriber_id},
transformer::{
add_crypto_transformers, build_filter_condition_transformer,
build_mutation_input_object_transformer,
},
util::{get_entity_column_key, get_entity_key},
},
guard::{guard_entity_with_subscriber_id, guard_field_with_subscriber_id},
transformer::{
build_filter_condition_transformer, build_mutation_input_object_transformer,
},
util::{get_entity_column_key, get_entity_key},
views::register_subscriptions_to_schema,
},
views::register_subscriptions_to_schema,
};
pub static CONTEXT: OnceCell<BuilderContext> = OnceCell::new();
@@ -88,11 +94,13 @@ where
}
pub fn build_schema(
database: DatabaseConnection,
app_ctx: Arc<dyn AppContextTrait>,
depth: Option<usize>,
complexity: Option<usize>,
) -> Result<Schema, SchemaError> {
use crate::models::*;
let database = app_ctx.db().as_ref().clone();
init_custom_filter_info();
let context = CONTEXT.get_or_init(|| {
let mut context = BuilderContext::default();
@@ -148,6 +156,7 @@ pub fn build_schema(
&mut context,
&subscriber_tasks::Column::Job,
);
add_crypto_transformers(&mut context, app_ctx);
for column in subscribers::Column::iter() {
if !matches!(column, subscribers::Column::Id) {
restrict_filter_input_for_entity::<subscribers::Entity>(
@@ -159,6 +168,7 @@ pub fn build_schema(
}
context
});
let mut builder = Builder::new(context, database.clone());
{

11
apps/recorder/src/graphql/service.rs
View File

@@ -1,8 +1,9 @@
use std::sync::Arc;
use async_graphql::dynamic::Schema;
use sea_orm::DatabaseConnection;
use super::{build_schema, config::GraphQLConfig};
use crate::errors::RecorderResult;
use crate::{app::AppContextTrait, errors::RecorderResult};
#[derive(Debug)]
pub struct GraphQLService {
@@ -10,12 +11,12 @@ pub struct GraphQLService {
}
impl GraphQLService {
pub async fn from_config_and_database(
pub async fn from_config_and_ctx(
config: GraphQLConfig,
db: DatabaseConnection,
ctx: Arc<dyn AppContextTrait>,
) -> RecorderResult<Self> {
let schema = build_schema(
db,
ctx,
config.depth_limit.and_then(|l| l.into()),
config.complexity_limit.and_then(|l| l.into()),
)?;

6
apps/recorder/src/web/middleware/snapshots/recorder__web__middleware__request_id__tests__create_or_fetch_request_id.snap.new Normal file
View File

@@ -0,0 +1,6 @@
---
source: apps/recorder/src/web/middleware/request_id.rs
assertion_line: 126
expression: id
---
"foo-barbaz"

9
apps/webui/package.json
View File

@@ -47,10 +47,12 @@
"@radix-ui/react-toggle-group": "^1.1.9",
"@radix-ui/react-tooltip": "^1.2.6",
"@rsbuild/plugin-react": "^1.2.0",
"@tanstack/react-form": "^1.12.1",
"@tanstack/react-query": "^5.75.6",
"@tanstack/react-router": "^1.112.13",
"@tanstack/react-table": "^8.21.3",
"@tanstack/router-devtools": "^1.112.13",
"@tanstack/store": "^0.7.1",
"arktype": "^2.1.6",
"chart.js": "^4.4.8",
"class-variance-authority": "^0.7.1",
@@ -63,7 +65,7 @@
"input-otp": "^1.4.2",
"jotai": "^2.12.3",
"jotai-signal": "^0.9.0",
"lucide-react": "^0.509.0",
"lucide-react": "^0.512.0",
"oidc-client-rx": "0.1.0-alpha.9",
"react": "^19.1.0",
"react-day-picker": "9.6.0",
@@ -77,8 +79,7 @@
"tailwindcss": "^4.0.6",
"tw-animate-css": "^1.2.7",
"type-fest": "^4.40.0",
"vaul": "^1.1.2",
"zod": "^3.24.4"
"vaul": "^1.1.2"
},
"devDependencies": {
"@graphql-codegen/cli": "^5.0.6",
@@ -94,7 +95,7 @@
"@types/react": "^19.1.2",
"@types/react-dom": "^19.1.2",
"chalk": "^5.4.1",
"commander": "^13.1.0",
"commander": "^14.0.0",
"postcss": "^8.5.3"
}
}

6
apps/webui/src/components/ui/data-table-view-options.tsx
View File

@@ -23,11 +23,7 @@ export function DataTableViewOptions<TData>({
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
variant="outline"
size="sm"
className="ml-auto hidden h-8 lg:flex"
>
<Button variant="outline" size="sm" className="ml-auto h-8 flex">
<Settings2 />
Columns
</Button>

53
apps/webui/src/components/ui/form-field-errors.tsx Normal file
View File

@@ -0,0 +1,53 @@
import { StandardSchemaV1Issue } from "@tanstack/react-form";
import { AlertCircle } from "lucide-react";
import { useMemo } from "react";
interface ErrorDisplayProps {
errors?:
| string
| StandardSchemaV1Issue
| Array<string | StandardSchemaV1Issue | undefined>;
}
export function FormFieldErrors({ errors }: ErrorDisplayProps) {
const errorList = useMemo(
() =>
(Array.isArray(errors) ? errors : [errors]).filter(Boolean) as Array<
string | StandardSchemaV1Issue
>,
[errors]
);
if (!errorList.length) {
return null;
}
return (
<ul className="mt-1 space-y-1 text-sm text-destructive">
{errorList.map((error, index) => {
if (typeof error === "string") {
return (
<li key={index} className="flex items-center space-x-2">
<AlertCircle
size={16}
className="flex-shrink-0 text-destructive"
/>
<span>{error}</span>
</li>
);
}
return (
<li key={index} className="flex flex-col space-y-0.5">
<div className="flex items-center space-x-2">
<AlertCircle
size={16}
className="flex-shrink-0 text-destructive"
/>
<span>{error.message}</span>
</div>
</li>
);
})}
</ul>
);
}

2
apps/webui/src/components/ui/label.tsx
View File

@@ -3,7 +3,7 @@
import * as LabelPrimitive from "@radix-ui/react-label";
import * as React from "react";
import { cn } from "@/presentation/utils";
import { cn } from "@/presentation/utils/index";
function Label({
className,

143
apps/webui/src/components/ui/tanstack-form.tsx Normal file
View File

@@ -0,0 +1,143 @@
import { Slot } from "@radix-ui/react-slot";
import * as React from "react";
import { Label } from "@/components/ui/label";
import { cn } from "@/presentation/utils";
import {
createFormHook,
createFormHookContexts,
useStore,
} from "@tanstack/react-form";
const {
fieldContext,
formContext,
useFieldContext: useFormFieldContext,
useFormContext,
} = createFormHookContexts();
const { useAppForm, withForm } = createFormHook({
fieldContext,
formContext,
fieldComponents: {
FormLabel,
FormControl,
FormDescription,
FormMessage,
FormItem,
},
formComponents: {},
});
type FormItemContextValue = {
id: string;
};
const FormItemContext = React.createContext<FormItemContextValue>(
{} as FormItemContextValue
);
function FormItem({ className, ...props }: React.ComponentProps<"div">) {
const id = React.useId();
return (
<FormItemContext.Provider value={{ id }}>
<div
data-slot="form-item"
className={cn("grid gap-2", className)}
{...props}
/>
</FormItemContext.Provider>
);
}
const useFieldContext = () => {
const { id } = React.useContext(FormItemContext);
const { name, store, ...fieldContext } = useFormFieldContext();
const errors = useStore(store, (state) => state.meta.errors);
if (!fieldContext) {
throw new Error("useFieldContext should be used within <FormItem>");
}
return {
id,
name,
formItemId: `${id}-form-item`,
formDescriptionId: `${id}-form-item-description`,
formMessageId: `${id}-form-item-message`,
errors,
store,
...fieldContext,
};
};
function FormLabel({
className,
...props
}: React.ComponentProps<typeof Label>) {
const { formItemId, errors } = useFieldContext();
return (
<Label
data-slot="form-label"
data-error={!!errors.length}
className={cn("data-[error=true]:text-destructive", className)}
htmlFor={formItemId}
{...props}
/>
);
}
function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
const { errors, formItemId, formDescriptionId, formMessageId } =
useFieldContext();
return (
<Slot
data-slot="form-control"
id={formItemId}
aria-describedby={
errors.length
? `${formDescriptionId} ${formMessageId}`
: `${formDescriptionId}`
}
aria-invalid={!!errors.length}
{...props}
/>
);
}
function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
const { formDescriptionId } = useFieldContext();
return (
<p
data-slot="form-description"
id={formDescriptionId}
className={cn("text-muted-foreground text-sm", className)}
{...props}
/>
);
}
function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
const { errors, formMessageId } = useFieldContext();
const body = errors.length
? String(errors.at(0)?.message ?? "")
: props.children;
if (!body) return null;
return (
<p
data-slot="form-message"
id={formMessageId}
className={cn("text-destructive text-sm", className)}
{...props}
>
{body}
</p>
);
}
export { useAppForm, useFormContext, useFieldContext, withForm };

29
apps/webui/src/domains/recorder/graphql/credential3rd.ts → apps/webui/src/domains/recorder/schema/credential3rd.ts
View File

@@ -1,4 +1,9 @@
import {
Credential3rdTypeEnum,
type GetCredential3rdQuery,
} from '@/infra/graphql/gql/graphql';
import { gql } from '@apollo/client';
import { type } from 'arktype';
export const GET_CREDENTIAL_3RD = gql`
query GetCredential3rd($filters: Credential3rdFilterInput!, $orderBy: Credential3rdOrderInput, $pagination: PaginationInput) {
@@ -13,6 +18,10 @@ export const GET_CREDENTIAL_3RD = gql`
updatedAt
credentialType
}
paginationInfo {
total
pages
}
}
}
`;
@@ -52,3 +61,23 @@ export const DELETE_CREDENTIAL_3RD = gql`
credential3rdDelete(filter: $filters)
}
`;
export const Credential3rdTypedMikanSchema = type({
credentialType: `'${Credential3rdTypeEnum.Mikan}'`,
username: 'string > 0',
password: 'string > 0',
});
export type Credential3rdTypedMikan =
typeof Credential3rdTypedMikanSchema.infer;
const Credential3rdTypedSchema = Credential3rdTypedMikanSchema;
export const Credential3rdInsertSchema = type({
userAgent: 'string?',
}).and(Credential3rdTypedSchema);
export type Credential3rdInsertDto = typeof Credential3rdInsertSchema.infer;
export type Credential3rdQueryDto =
GetCredential3rdQuery['credential3rd']['nodes'][number];

0
apps/webui/src/domains/recorder/graphql/subscriptions.ts → apps/webui/src/domains/recorder/schema/subscriptions.ts
View File

14
apps/webui/src/infra/di/inject.ts
View File

@@ -1,5 +1,17 @@
import { type InjectionToken, Injector, inject } from '@outposts/injection-js';
import {
type InjectionToken,
Injector,
type Type,
inject,
} from '@outposts/injection-js';
import { useInjector } from 'oidc-client-rx/adapters/react';
import { useMemo } from 'react';
export function injectInjector(): Injector {
return inject(Injector as any as InjectionToken<Injector>);
}
export function useInject<T>(token: InjectionToken<T> | Type<T>): T {
const injector = useInjector();
return useMemo(() => injector.get(token), [injector, token]);
}

6
apps/webui/src/infra/graphql/gql/gql.ts
View File

@@ -14,7 +14,7 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
* Learn more about it here: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size
*/
type Documents = {
"\n query GetCredential3rd($filters: Credential3rdFilterInput!, $orderBy: Credential3rdOrderInput, $pagination: PaginationInput) {\n credential3rd(filters: $filters, orderBy: $orderBy, pagination: $pagination) {\n nodes {\n id\n cookies\n username\n password\n userAgent\n createdAt\n updatedAt\n credentialType\n }\n }\n }\n": typeof types.GetCredential3rdDocument,
"\n query GetCredential3rd($filters: Credential3rdFilterInput!, $orderBy: Credential3rdOrderInput, $pagination: PaginationInput) {\n credential3rd(filters: $filters, orderBy: $orderBy, pagination: $pagination) {\n nodes {\n id\n cookies\n username\n password\n userAgent\n createdAt\n updatedAt\n credentialType\n }\n paginationInfo {\n total\n pages\n }\n }\n }\n": typeof types.GetCredential3rdDocument,
"\n mutation InsertCredential3rd($data: Credential3rdInsertInput!) {\n credential3rdCreateOne(data: $data) {\n id\n cookies\n username\n password\n userAgent\n createdAt\n updatedAt\n credentialType\n }\n }\n": typeof types.InsertCredential3rdDocument,
"\n mutation UpdateCredential3rd($data: Credential3rdUpdateInput!, $filters: Credential3rdFilterInput!) {\n credential3rdUpdate(data: $data, filter: $filters) {\n id\n cookies\n username\n password\n userAgent\n createdAt\n updatedAt\n credentialType\n }\n }\n": typeof types.UpdateCredential3rdDocument,
"\n mutation DeleteCredential3rd($filters: Credential3rdFilterInput!) {\n credential3rdDelete(filter: $filters)\n }\n": typeof types.DeleteCredential3rdDocument,
@@ -25,7 +25,7 @@ type Documents = {
"\n mutation CreateSubscription($input: SubscriptionsInsertInput!) {\n subscriptionsCreateOne(data: $input) {\n id\n displayName\n sourceUrl\n enabled\n category\n }\n }\n": typeof types.CreateSubscriptionDocument,
};
const documents: Documents = {
"\n query GetCredential3rd($filters: Credential3rdFilterInput!, $orderBy: Credential3rdOrderInput, $pagination: PaginationInput) {\n credential3rd(filters: $filters, orderBy: $orderBy, pagination: $pagination) {\n nodes {\n id\n cookies\n username\n password\n userAgent\n createdAt\n updatedAt\n credentialType\n }\n }\n }\n": types.GetCredential3rdDocument,
"\n query GetCredential3rd($filters: Credential3rdFilterInput!, $orderBy: Credential3rdOrderInput, $pagination: PaginationInput) {\n credential3rd(filters: $filters, orderBy: $orderBy, pagination: $pagination) {\n nodes {\n id\n cookies\n username\n password\n userAgent\n createdAt\n updatedAt\n credentialType\n }\n paginationInfo {\n total\n pages\n }\n }\n }\n": types.GetCredential3rdDocument,
"\n mutation InsertCredential3rd($data: Credential3rdInsertInput!) {\n credential3rdCreateOne(data: $data) {\n id\n cookies\n username\n password\n userAgent\n createdAt\n updatedAt\n credentialType\n }\n }\n": types.InsertCredential3rdDocument,
"\n mutation UpdateCredential3rd($data: Credential3rdUpdateInput!, $filters: Credential3rdFilterInput!) {\n credential3rdUpdate(data: $data, filter: $filters) {\n id\n cookies\n username\n password\n userAgent\n createdAt\n updatedAt\n credentialType\n }\n }\n": types.UpdateCredential3rdDocument,
"\n mutation DeleteCredential3rd($filters: Credential3rdFilterInput!) {\n credential3rdDelete(filter: $filters)\n }\n": types.DeleteCredential3rdDocument,
@@ -53,7 +53,7 @@ export function gql(source: string): unknown;
/**
* The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function gql(source: "\n query GetCredential3rd($filters: Credential3rdFilterInput!, $orderBy: Credential3rdOrderInput, $pagination: PaginationInput) {\n credential3rd(filters: $filters, orderBy: $orderBy, pagination: $pagination) {\n nodes {\n id\n cookies\n username\n password\n userAgent\n createdAt\n updatedAt\n credentialType\n }\n }\n }\n"): (typeof documents)["\n query GetCredential3rd($filters: Credential3rdFilterInput!, $orderBy: Credential3rdOrderInput, $pagination: PaginationInput) {\n credential3rd(filters: $filters, orderBy: $orderBy, pagination: $pagination) {\n nodes {\n id\n cookies\n username\n password\n userAgent\n createdAt\n updatedAt\n credentialType\n }\n }\n }\n"];
export function gql(source: "\n query GetCredential3rd($filters: Credential3rdFilterInput!, $orderBy: Credential3rdOrderInput, $pagination: PaginationInput) {\n credential3rd(filters: $filters, orderBy: $orderBy, pagination: $pagination) {\n nodes {\n id\n cookies\n username\n password\n userAgent\n createdAt\n updatedAt\n credentialType\n }\n paginationInfo {\n total\n pages\n }\n }\n }\n"): (typeof documents)["\n query GetCredential3rd($filters: Credential3rdFilterInput!, $orderBy: Credential3rdOrderInput, $pagination: PaginationInput) {\n credential3rd(filters: $filters, orderBy: $orderBy, pagination: $pagination) {\n nodes {\n id\n cookies\n username\n password\n userAgent\n createdAt\n updatedAt\n credentialType\n }\n paginationInfo {\n total\n pages\n }\n }\n }\n"];
/**
* The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/

4
apps/webui/src/infra/graphql/gql/graphql.ts
View File

@@ -1641,7 +1641,7 @@ export type GetCredential3rdQueryVariables = Exact<{
}>;
export type GetCredential3rdQuery = { __typename?: 'Query', credential3rd: { __typename?: 'Credential3rdConnection', nodes: Array<{ __typename?: 'Credential3rd', id: number, cookies?: string | null, username?: string | null, password?: string | null, userAgent?: string | null, createdAt: string, updatedAt: string, credentialType: Credential3rdTypeEnum }> } };
export type GetCredential3rdQuery = { __typename?: 'Query', credential3rd: { __typename?: 'Credential3rdConnection', nodes: Array<{ __typename?: 'Credential3rd', id: number, cookies?: string | null, username?: string | null, password?: string | null, userAgent?: string | null, createdAt: string, updatedAt: string, credentialType: Credential3rdTypeEnum }>, paginationInfo?: { __typename?: 'PaginationInfo', total: number, pages: number } | null } };
export type InsertCredential3rdMutationVariables = Exact<{
data: Credential3rdInsertInput;
@@ -1704,7 +1704,7 @@ export type CreateSubscriptionMutationVariables = Exact<{
export type CreateSubscriptionMutation = { __typename?: 'Mutation', subscriptionsCreateOne: { __typename?: 'SubscriptionsBasic', id: number, displayName: string, sourceUrl: string, enabled: boolean, category: SubscriptionCategoryEnum } };
export const GetCredential3rdDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetCredential3rd"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filters"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Credential3rdFilterInput"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"orderBy"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Credential3rdOrderInput"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"pagination"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"PaginationInput"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"credential3rd"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filters"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filters"}}},{"kind":"Argument","name":{"kind":"Name","value":"orderBy"},"value":{"kind":"Variable","name":{"kind":"Name","value":"orderBy"}}},{"kind":"Argument","name":{"kind":"Name","value":"pagination"},"value":{"kind":"Variable","name":{"kind":"Name","value":"pagination"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"cookies"}},{"kind":"Field","name":{"kind":"Name","value":"username"}},{"kind":"Field","name":{"kind":"Name","value":"password"}},{"kind":"Field","name":{"kind":"Name","value":"userAgent"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"credentialType"}}]}}]}}]}}]} as unknown as DocumentNode<GetCredential3rdQuery, GetCredential3rdQueryVariables>;
export const GetCredential3rdDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetCredential3rd"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filters"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Credential3rdFilterInput"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"orderBy"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Credential3rdOrderInput"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"pagination"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"PaginationInput"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"credential3rd"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filters"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filters"}}},{"kind":"Argument","name":{"kind":"Name","value":"orderBy"},"value":{"kind":"Variable","name":{"kind":"Name","value":"orderBy"}}},{"kind":"Argument","name":{"kind":"Name","value":"pagination"},"value":{"kind":"Variable","name":{"kind":"Name","value":"pagination"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"cookies"}},{"kind":"Field","name":{"kind":"Name","value":"username"}},{"kind":"Field","name":{"kind":"Name","value":"password"}},{"kind":"Field","name":{"kind":"Name","value":"userAgent"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"credentialType"}}]}},{"kind":"Field","name":{"kind":"Name","value":"paginationInfo"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"total"}},{"kind":"Field","name":{"kind":"Name","value":"pages"}}]}}]}}]}}]} as unknown as DocumentNode<GetCredential3rdQuery, GetCredential3rdQueryVariables>;
export const InsertCredential3rdDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"InsertCredential3rd"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"data"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Credential3rdInsertInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"credential3rdCreateOne"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"data"},"value":{"kind":"Variable","name":{"kind":"Name","value":"data"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"cookies"}},{"kind":"Field","name":{"kind":"Name","value":"username"}},{"kind":"Field","name":{"kind":"Name","value":"password"}},{"kind":"Field","name":{"kind":"Name","value":"userAgent"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"credentialType"}}]}}]}}]} as unknown as DocumentNode<InsertCredential3rdMutation, InsertCredential3rdMutationVariables>;
export const UpdateCredential3rdDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"UpdateCredential3rd"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"data"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Credential3rdUpdateInput"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filters"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Credential3rdFilterInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"credential3rdUpdate"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"data"},"value":{"kind":"Variable","name":{"kind":"Name","value":"data"}}},{"kind":"Argument","name":{"kind":"Name","value":"filter"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filters"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"cookies"}},{"kind":"Field","name":{"kind":"Name","value":"username"}},{"kind":"Field","name":{"kind":"Name","value":"password"}},{"kind":"Field","name":{"kind":"Name","value":"userAgent"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"credentialType"}}]}}]}}]} as unknown as DocumentNode<UpdateCredential3rdMutation, UpdateCredential3rdMutationVariables>;
export const DeleteCredential3rdDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"DeleteCredential3rd"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filters"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Credential3rdFilterInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"credential3rdDelete"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filter"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filters"}}}]}]}}]} as unknown as DocumentNode<DeleteCredential3rdMutation, DeleteCredential3rdMutationVariables>;

9
apps/webui/src/infra/platform/context.ts
View File

@@ -1,5 +1,12 @@
import { DOCUMENT } from './injection';
import { PlatformService } from './platform.service';
export const providePlatform = () => {
return [{ provide: DOCUMENT, useValue: document }];
return [
{ provide: DOCUMENT, useValue: document },
{
provide: PlatformService,
useClass: PlatformService,
},
];
};

11
apps/webui/src/infra/platform/platform.service.ts Normal file
View File

@@ -0,0 +1,11 @@
import { Injectable, inject } from '@outposts/injection-js';
import { DOCUMENT } from './injection.js';
@Injectable()
export class PlatformService {
document = inject(DOCUMENT);
get userAgent(): string {
return this.document.defaultView?.navigator.userAgent || '';
}
}

29
apps/webui/src/presentation/routeTree.gen.ts
View File

@@ -34,6 +34,7 @@ import { Route as AppExploreFeedImport } from './routes/_app/_explore/feed'
import { Route as AppExploreExploreImport } from './routes/_app/_explore/explore'
import { Route as AppSubscriptionsEditSubscriptionIdImport } from './routes/_app/subscriptions/edit.$subscriptionId'
import { Route as AppSubscriptionsDetailSubscriptionIdImport } from './routes/_app/subscriptions/detail.$subscriptionId'
import { Route as AppCredential3rdDetailIdImport } from './routes/_app/credential3rd/detail.$id'
// Create/Update Routes
@@ -178,6 +179,12 @@ const AppSubscriptionsDetailSubscriptionIdRoute =
getParentRoute: () => AppSubscriptionsRouteRoute,
} as any)
const AppCredential3rdDetailIdRoute = AppCredential3rdDetailIdImport.update({
id: '/detail/$id',
path: '/detail/$id',
getParentRoute: () => AppCredential3rdRouteRoute,
} as any)
// Populate the FileRoutesByPath interface
declare module '@tanstack/react-router' {
@@ -329,6 +336,13 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof AuthOidcCallbackImport
parentRoute: typeof rootRoute
}
'/_app/credential3rd/detail/$id': {
id: '/_app/credential3rd/detail/$id'
path: '/detail/$id'
fullPath: '/credential3rd/detail/$id'
preLoaderRoute: typeof AppCredential3rdDetailIdImport
parentRoute: typeof AppCredential3rdRouteImport
}
'/_app/subscriptions/detail/$subscriptionId': {
id: '/_app/subscriptions/detail/$subscriptionId'
path: '/detail/$subscriptionId'
@@ -363,11 +377,13 @@ const AppBangumiRouteRouteWithChildren = AppBangumiRouteRoute._addFileChildren(
interface AppCredential3rdRouteRouteChildren {
AppCredential3rdCreateRoute: typeof AppCredential3rdCreateRoute
AppCredential3rdManageRoute: typeof AppCredential3rdManageRoute
AppCredential3rdDetailIdRoute: typeof AppCredential3rdDetailIdRoute
}
const AppCredential3rdRouteRouteChildren: AppCredential3rdRouteRouteChildren = {
AppCredential3rdCreateRoute: AppCredential3rdCreateRoute,
AppCredential3rdManageRoute: AppCredential3rdManageRoute,
AppCredential3rdDetailIdRoute: AppCredential3rdDetailIdRoute,
}
const AppCredential3rdRouteRouteWithChildren =
@@ -464,6 +480,7 @@ export interface FileRoutesByFullPath {
'/subscriptions/create': typeof AppSubscriptionsCreateRoute
'/subscriptions/manage': typeof AppSubscriptionsManageRoute
'/auth/oidc/callback': typeof AuthOidcCallbackRoute
'/credential3rd/detail/$id': typeof AppCredential3rdDetailIdRoute
'/subscriptions/detail/$subscriptionId': typeof AppSubscriptionsDetailSubscriptionIdRoute
'/subscriptions/edit/$subscriptionId': typeof AppSubscriptionsEditSubscriptionIdRoute
}
@@ -490,6 +507,7 @@ export interface FileRoutesByTo {
'/subscriptions/create': typeof AppSubscriptionsCreateRoute
'/subscriptions/manage': typeof AppSubscriptionsManageRoute
'/auth/oidc/callback': typeof AuthOidcCallbackRoute
'/credential3rd/detail/$id': typeof AppCredential3rdDetailIdRoute
'/subscriptions/detail/$subscriptionId': typeof AppSubscriptionsDetailSubscriptionIdRoute
'/subscriptions/edit/$subscriptionId': typeof AppSubscriptionsEditSubscriptionIdRoute
}
@@ -517,6 +535,7 @@ export interface FileRoutesById {
'/_app/subscriptions/create': typeof AppSubscriptionsCreateRoute
'/_app/subscriptions/manage': typeof AppSubscriptionsManageRoute
'/auth/oidc/callback': typeof AuthOidcCallbackRoute
'/_app/credential3rd/detail/$id': typeof AppCredential3rdDetailIdRoute
'/_app/subscriptions/detail/$subscriptionId': typeof AppSubscriptionsDetailSubscriptionIdRoute
'/_app/subscriptions/edit/$subscriptionId': typeof AppSubscriptionsEditSubscriptionIdRoute
}
@@ -545,6 +564,7 @@ export interface FileRouteTypes {
| '/subscriptions/create'
| '/subscriptions/manage'
| '/auth/oidc/callback'
| '/credential3rd/detail/$id'
| '/subscriptions/detail/$subscriptionId'
| '/subscriptions/edit/$subscriptionId'
fileRoutesByTo: FileRoutesByTo
@@ -570,6 +590,7 @@ export interface FileRouteTypes {
| '/subscriptions/create'
| '/subscriptions/manage'
| '/auth/oidc/callback'
| '/credential3rd/detail/$id'
| '/subscriptions/detail/$subscriptionId'
| '/subscriptions/edit/$subscriptionId'
id:
@@ -595,6 +616,7 @@ export interface FileRouteTypes {
| '/_app/subscriptions/create'
| '/_app/subscriptions/manage'
| '/auth/oidc/callback'
| '/_app/credential3rd/detail/$id'
| '/_app/subscriptions/detail/$subscriptionId'
| '/_app/subscriptions/edit/$subscriptionId'
fileRoutesById: FileRoutesById
@@ -672,7 +694,8 @@ export const routeTree = rootRoute
"parent": "/_app",
"children": [
"/_app/credential3rd/create",
"/_app/credential3rd/manage"
"/_app/credential3rd/manage",
"/_app/credential3rd/detail/$id"
]
},
"/_app/playground": {
@@ -744,6 +767,10 @@ export const routeTree = rootRoute
"/auth/oidc/callback": {
"filePath": "auth/oidc/callback.tsx"
},
"/_app/credential3rd/detail/$id": {
"filePath": "_app/credential3rd/detail.$id.tsx",
"parent": "/_app/credential3rd"
},
"/_app/subscriptions/detail/$subscriptionId": {
"filePath": "_app/subscriptions/detail.$subscriptionId.tsx",
"parent": "/_app/subscriptions"

246
apps/webui/src/presentation/routes/_app/credential3rd/create.tsx
View File

@@ -1,9 +1,251 @@
import { createFileRoute } from '@tanstack/react-router';
import { Button } from '@/components/ui/button';
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from '@/components/ui/card';
import { FormFieldErrors } from '@/components/ui/form-field-errors';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select';
import { useAppForm } from '@/components/ui/tanstack-form';
import { Textarea } from '@/components/ui/textarea';
import {
type Credential3rdInsertDto,
Credential3rdInsertSchema,
INSERT_CREDENTIAL_3RD,
} from '@/domains/recorder/schema/credential3rd';
import { useInject } from '@/infra/di/inject';
import {
Credential3rdTypeEnum,
type InsertCredential3rdMutation,
} from '@/infra/graphql/gql/graphql';
import { PlatformService } from '@/infra/platform/platform.service';
import type { RouteStateDataOption } from '@/infra/routes/traits';
import { useMutation } from '@apollo/client';
import { createFileRoute, useNavigate } from '@tanstack/react-router';
import { Loader2, Save } from 'lucide-react';
import { toast } from 'sonner';
export const Route = createFileRoute('/_app/credential3rd/create')({
component: CredentialCreateRouteComponent,
staticData: {
breadcrumb: { label: 'Create' },
} satisfies RouteStateDataOption,
});
function CredentialCreateRouteComponent() {
return <div>Hello "/_app/credential/create"!</div>;
const navigate = useNavigate();
const platformService = useInject(PlatformService);
const [insertCredential3rd, { loading }] = useMutation<
InsertCredential3rdMutation['credential3rdCreateOne']
>(INSERT_CREDENTIAL_3RD, {
onCompleted(data) {
toast.success('Credential created');
navigate({
to: '/credential3rd/detail/$id',
params: { id: `${data.id}` },
});
},
onError(error) {
toast.error('Failed to create credential', {
description: error.message,
});
},
});
const form = useAppForm({
defaultValues: {
credentialType: Credential3rdTypeEnum.Mikan,
username: '',
password: '',
userAgent: '',
} as Credential3rdInsertDto,
validators: {
onBlur: Credential3rdInsertSchema,
onSubmit: Credential3rdInsertSchema,
},
onSubmit: async (form) => {
if (form.value.credentialType === Credential3rdTypeEnum.Mikan) {
await insertCredential3rd({
variables: {
data: form.value,
},
});
}
},
});
return (
<div className="container mx-auto max-w-2xl py-6">
<div className="mb-6 flex items-center gap-4">
<div>
<h1 className="font-bold text-2xl">Create third-party credential</h1>
<p className="mt-1 text-muted-foreground">
Add new third-party login credential
</p>
</div>
</div>
<Card>
<CardHeader>
<CardTitle>Credential information</CardTitle>
<CardDescription className="mt-2">
Please fill in the information of the third-party platform login
credential for your subscriptions.
</CardDescription>
</CardHeader>
<CardContent>
<form
onSubmit={(e) => {
e.preventDefault();
e.stopPropagation();
form.handleSubmit();
}}
className="space-y-6"
>
<form.Field
name="credentialType"
validators={{
onChange: ({ value }) => {
if (!value) {
return 'Please select the credential type';
}
},
}}
>
{(field) => (
<div className="space-y-2">
<Label htmlFor={field.name}>Credential type *</Label>
<Select
value={field.state.value}
onValueChange={(value) =>
field.handleChange(value as Credential3rdTypeEnum)
}
>
<SelectTrigger>
<SelectValue placeholder="Select credential type" />
</SelectTrigger>
<SelectContent>
<SelectItem value={Credential3rdTypeEnum.Mikan}>
Mikan
</SelectItem>
</SelectContent>
</Select>
{field.state.meta.errors && (
<p className="text-destructive text-sm">
{field.state.meta.errors[0]?.toString()}
</p>
)}
</div>
)}
</form.Field>
<form.Field name="username">
{(field) => (
<div className="space-y-2">
<Label htmlFor={field.name}>Username *</Label>
<Input
id={field.name}
name={field.name}
value={field.state.value}
onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)}
placeholder="Please enter username"
autoComplete="off"
/>
{field.state.meta.errors && (
<FormFieldErrors errors={field.state.meta.errors} />
)}
</div>
)}
</form.Field>
{/* 密码 */}
<form.Field name="password">
{(field) => (
<div className="space-y-2">
<Label htmlFor={field.name}>Password *</Label>
<Input
id={field.name}
name={field.name}
type="password"
value={field.state.value}
onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)}
placeholder="Please enter password"
autoComplete="off"
/>
{field.state.meta.errors && (
<FormFieldErrors errors={field.state.meta.errors} />
)}
</div>
)}
</form.Field>
{/* User Agent */}
<form.Field name="userAgent">
{(field) => (
<div className="space-y-2">
<Label htmlFor={field.name}>User Agent</Label>
<Textarea
id={field.name}
name={field.name}
value={field.state.value || ''}
onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)}
rows={3}
className="resize-none"
autoComplete="off"
placeholder="Please enter User Agent (optional), leave it blank to use
the default value"
/>
<p className="text-muted-foreground text-sm">
Current user agent: {platformService.userAgent}
</p>
{field.state.meta.errors && (
<FormFieldErrors errors={field.state.meta.errors} />
)}
</div>
)}
</form.Field>
<div className="flex gap-3 pt-4">
<form.Subscribe
selector={(state) => [state.canSubmit, state.isSubmitting]}
>
{([canSubmit, isSubmitting]) => (
<Button
type="submit"
disabled={!canSubmit || loading}
className="flex-1"
>
{loading || isSubmitting ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
Creating...
</>
) : (
<>
<Save className="mr-2 h-4 w-4" />
Create credential
</>
)}
</Button>
)}
</form.Subscribe>
</div>
</form>
</CardContent>
</Card>
</div>
);
}

9
apps/webui/src/presentation/routes/_app/credential3rd/detail.$id.tsx Normal file
View File

@@ -0,0 +1,9 @@
import { createFileRoute } from '@tanstack/react-router'
export const Route = createFileRoute('/_app/credential3rd/detail/$id')({
component: RouteComponent,
})
function RouteComponent() {
return <div>Hello "/_app/credential3rd/detail/$id"!</div>
}

345
apps/webui/src/presentation/routes/_app/credential3rd/manage.tsx
View File

@@ -1,9 +1,350 @@
import { createFileRoute } from '@tanstack/react-router';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { DataTablePagination } from '@/components/ui/data-table-pagination';
import { DataTableRowActions } from '@/components/ui/data-table-row-actions';
import { DataTableViewOptions } from '@/components/ui/data-table-view-options';
import { QueryErrorView } from '@/components/ui/query-error-view';
import { Skeleton } from '@/components/ui/skeleton';
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from '@/components/ui/table';
import {
type Credential3rdQueryDto,
DELETE_CREDENTIAL_3RD,
GET_CREDENTIAL_3RD,
} from '@/domains/recorder/schema/credential3rd';
import type { GetCredential3rdQuery } from '@/infra/graphql/gql/graphql';
import type { RouteStateDataOption } from '@/infra/routes/traits';
import { useDebouncedSkeleton } from '@/presentation/hooks/use-debounded-skeleton';
import { useEvent } from '@/presentation/hooks/use-event';
import { useMutation, useQuery } from '@apollo/client';
import { createFileRoute, useNavigate } from '@tanstack/react-router';
import {
type ColumnDef,
type PaginationState,
type Row,
type SortingState,
type VisibilityState,
flexRender,
getCoreRowModel,
getPaginationRowModel,
useReactTable,
} from '@tanstack/react-table';
import { format } from 'date-fns';
import { zhCN } from 'date-fns/locale';
import { Eye, EyeOff, Plus } from 'lucide-react';
import { useMemo, useState } from 'react';
import { toast } from 'sonner';
export const Route = createFileRoute('/_app/credential3rd/manage')({
component: CredentialManageRouteComponent,
staticData: {
breadcrumb: { label: 'Manage' },
} satisfies RouteStateDataOption,
});
function CredentialManageRouteComponent() {
return <div>Hello "/_app/credential/manage"!</div>;
const navigate = useNavigate();
const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
const [sorting, setSorting] = useState<SortingState>([]);
const [pagination, setPagination] = useState<PaginationState>({
pageIndex: 0,
pageSize: 10,
});
const [showPasswords, setShowPasswords] = useState<Record<number, boolean>>(
{}
);
const { loading, error, data, refetch } = useQuery<GetCredential3rdQuery>(
GET_CREDENTIAL_3RD,
{
variables: {
filters: {},
orderBy: {
createdAt: 'DESC',
},
pagination: {
page: {
page: pagination.pageIndex,
limit: pagination.pageSize,
},
},
},
fetchPolicy: 'cache-and-network',
nextFetchPolicy: 'network-only',
}
);
const [deleteCredential] = useMutation(DELETE_CREDENTIAL_3RD, {
onCompleted: async () => {
const refetchResult = await refetch();
if (refetchResult.errors) {
toast.error(refetchResult.errors[0].message);
return;
}
toast.success('Credential deleted');
},
onError: (error) => {
toast.error('Failed to delete credential', {
description: error.message,
});
},
});
const { showSkeleton } = useDebouncedSkeleton({ loading });
const credentials = data?.credential3rd;
const handleDeleteRecord = useEvent(
(row: Row<Credential3rdQueryDto>) => async () => {
await deleteCredential({
variables: {
filters: {
id: { eq: row.original.id },
},
},
});
}
);
const togglePasswordVisibility = useEvent((id: number) => {
setShowPasswords((prev) => ({
...prev,
[id]: !prev[id],
}));
});
const columns = useMemo(() => {
const cs: ColumnDef<Credential3rdQueryDto>[] = [
{
header: 'ID',
accessorKey: 'id',
enableHiding: false,
cell: ({ row }) => {
return <div className="font-mono text-sm">{row.original.id}</div>;
},
},
{
header: 'Credential Type',
accessorKey: 'credentialType',
cell: ({ row }) => {
const type = row.original.credentialType;
return (
<Badge variant="secondary" className="capitalize">
{type}
</Badge>
);
},
},
{
header: 'Username',
accessorKey: 'username',
cell: ({ row }) => {
const username = row.original.username;
return (
<div className="whitespace-normal break-words">
{username || '-'}
</div>
);
},
},
{
header: 'Password',
accessorKey: 'password',
cell: ({ row }) => {
const password = row.original.password;
const isVisible = showPasswords[row.original.id];
if (!password) {
return <div>-</div>;
}
return (
<div className="flex items-center gap-2">
<div className="font-mono text-sm">
{isVisible ? password : '••••••••'}
</div>
<Button
variant="ghost"
size="sm"
className="h-6 w-6 p-0"
onClick={() => togglePasswordVisibility(row.original.id)}
>
{isVisible ? (
<EyeOff className="h-3 w-3" />
) : (
<Eye className="h-3 w-3" />
)}
</Button>
</div>
);
},
},
{
header: 'User Agent',
accessorKey: 'userAgent',
cell: ({ row }) => {
const userAgent = row.original.userAgent;
return (
<div className="max-w-xs truncate" title={userAgent || undefined}>
{userAgent || '-'}
</div>
);
},
},
{
header: 'Created At',
accessorKey: 'createdAt',
cell: ({ row }) => {
const createdAt = row.original.createdAt;
return (
<div className="text-sm">
{format(new Date(createdAt), 'yyyy-MM-dd HH:mm:ss')}
</div>
);
},
},
{
header: 'Updated At',
accessorKey: 'updatedAt',
cell: ({ row }) => {
const updatedAt = row.original.updatedAt;
return (
<div className="text-sm">
{format(new Date(updatedAt), 'yyyy-MM-dd HH:mm:ss', {
locale: zhCN,
})}
</div>
);
},
},
{
id: 'actions',
cell: ({ row }) => (
<DataTableRowActions
row={row}
getId={(row) => row.original.id}
showEdit
showDelete
onEdit={() => {
navigate({
to: '/credential3rd/detail/$id',
params: { id: `${row.original.id}` },
});
}}
onDelete={handleDeleteRecord(row)}
/>
),
},
];
return cs;
}, [handleDeleteRecord, navigate, showPasswords, togglePasswordVisibility]);
const table = useReactTable({
data: data?.credential3rd?.nodes ?? [],
columns,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
onPaginationChange: setPagination,
onSortingChange: setSorting,
onColumnVisibilityChange: setColumnVisibility,
pageCount: credentials?.paginationInfo?.pages,
rowCount: credentials?.paginationInfo?.total,
state: {
pagination,
sorting,
columnVisibility,
},
});
if (error) {
return <QueryErrorView message={error.message} onRetry={refetch} />;
}
return (
<div className="container mx-auto space-y-4 rounded-md">
<div className="flex items-center justify-between pt-4">
<div>
<h1 className="font-bold text-2xl">Credential 3rd Management</h1>
<p className="text-muted-foreground">
Manage your third-party platform login credentials
</p>
</div>
<Button onClick={() => navigate({ to: '/credential3rd/create' })}>
<Plus className="mr-2 h-4 w-4" />
Add Credential
</Button>
</div>
<div className="flex items-center py-2">
<DataTableViewOptions table={table} />
</div>
<div className="rounded-md border">
<Table>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => {
return (
<TableHead key={header.id}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext()
)}
</TableHead>
);
})}
</TableRow>
))}
</TableHeader>
<TableBody>
{showSkeleton &&
Array.from(new Array(pagination.pageSize)).map((_, index) => (
<TableRow key={index}>
{table.getVisibleLeafColumns().map((column) => (
<TableCell key={column.id}>
<Skeleton className="h-8" />
</TableCell>
))}
</TableRow>
))}
{!showSkeleton &&
(table.getRowModel().rows?.length ? (
table.getRowModel().rows.map((row) => (
<TableRow
key={row.id}
data-state={row.getIsSelected() && 'selected'}
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</TableCell>
))}
</TableRow>
))
) : (
<TableRow>
<TableCell
colSpan={columns.length}
className="h-24 text-center"
>
No Results
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
<DataTablePagination table={table} showSelectedRowCount={false} />
</div>
);
}

2
apps/webui/src/presentation/routes/_app/subscriptions/detail.$subscriptionId.tsx
View File

@@ -1,7 +1,7 @@
import type { GetSubscriptionDetailQuery } from '@/infra/graphql/gql/graphql';
import { useQuery } from '@apollo/client';
import { createFileRoute } from '@tanstack/react-router';
import { GET_SUBSCRIPTION_DETAIL } from '../../../../domains/recorder/graphql/subscriptions.js';
import { GET_SUBSCRIPTION_DETAIL } from '../../../../domains/recorder/schema/subscriptions.js';
export const Route = createFileRoute(
'/_app/subscriptions/detail/$subscriptionId'

86
apps/webui/src/presentation/routes/_app/subscriptions/manage.tsx
View File

@@ -1,4 +1,6 @@
import { Button } from '@/components/ui/button';
import { DataTablePagination } from '@/components/ui/data-table-pagination';
import { DataTableRowActions } from '@/components/ui/data-table-row-actions';
import { DataTableViewOptions } from '@/components/ui/data-table-view-options';
import { QueryErrorView } from '@/components/ui/query-error-view';
import { Skeleton } from '@/components/ui/skeleton';
@@ -16,7 +18,7 @@ import {
GET_SUBSCRIPTIONS,
type SubscriptionDto,
UPDATE_SUBSCRIPTIONS,
} from '@/domains/recorder/graphql/subscriptions';
} from '@/domains/recorder/schema/subscriptions';
import type {
GetSubscriptionsQuery,
SubscriptionsUpdateInput,
@@ -38,9 +40,9 @@ import {
getPaginationRowModel,
useReactTable,
} from '@tanstack/react-table';
import { Plus } from 'lucide-react';
import { useMemo, useState } from 'react';
import { toast } from 'sonner';
import { DataTableRowActions } from '../../../../components/ui/data-table-row-actions';
export const Route = createFileRoute('/_app/subscriptions/manage')({
component: SubscriptionManageRouteComponent,
@@ -63,26 +65,58 @@ function SubscriptionManageRouteComponent() {
GET_SUBSCRIPTIONS,
{
variables: {
page: {
page: pagination.pageIndex,
limit: pagination.pageSize,
pagination: {
page: {
page: pagination.pageIndex + 1,
limit: pagination.pageSize,
},
},
filters: {},
orderBy: {},
orderBy: {
updatedAt: 'DESC',
},
},
refetchWritePolicy: 'overwrite',
nextFetchPolicy: 'network-only',
}
);
const [updateSubscription] = useMutation(UPDATE_SUBSCRIPTIONS);
const [deleteSubscription] = useMutation(DELETE_SUBSCRIPTIONS);
const [updateSubscription] = useMutation(UPDATE_SUBSCRIPTIONS, {
onCompleted: async () => {
const refetchResult = await refetch();
if (refetchResult.errors) {
toast.error(refetchResult.errors[0].message);
return;
}
toast.success('Subscription updated');
},
onError: (error) => {
toast.error('Failed to update subscription', {
description: error.message,
});
},
});
const [deleteSubscription] = useMutation(DELETE_SUBSCRIPTIONS, {
onCompleted: async () => {
const refetchResult = await refetch();
if (refetchResult.errors) {
toast.error(refetchResult.errors[0].message);
return;
}
toast.success('Subscription deleted');
},
onError: (error) => {
toast.error('Failed to delete subscription', {
description: error.message,
});
},
});
const { showSkeleton } = useDebouncedSkeleton({ loading });
const subscriptions = data?.subscriptions;
const handleUpdateRecord = useEvent(
(row: Row<SubscriptionDto>) => async (data: SubscriptionsUpdateInput) => {
const result = await updateSubscription({
await updateSubscription({
variables: {
data,
filters: {
@@ -92,34 +126,14 @@ function SubscriptionManageRouteComponent() {
},
},
});
if (result.errors) {
toast.error(result.errors[0].message);
return;
}
const refetchResult = await refetch();
if (refetchResult.errors) {
toast.error(refetchResult.errors[0].message);
return;
}
toast.success('Subscription updated');
}
);
const handleDeleteRecord = useEvent(
(row: Row<SubscriptionDto>) => async () => {
const result = await deleteSubscription({
await deleteSubscription({
variables: { filters: { id: { eq: row.original.id } } },
});
if (result.errors) {
toast.error(result.errors[0].message);
return;
}
const refetchResult = await refetch();
if (refetchResult.errors) {
toast.error(refetchResult.errors[0].message);
return;
}
toast.success('Subscription deleted');
}
);
@@ -219,7 +233,17 @@ function SubscriptionManageRouteComponent() {
return (
<div className="container mx-auto space-y-4 rounded-md">
<div className="flex items-center py-4">
<div className="flex items-center justify-between pt-4">
<div>
<h1 className="font-bold text-2xl">Subscription Management</h1>
<p className="text-muted-foreground">Manage your subscription</p>
</div>
<Button onClick={() => navigate({ to: '/subscriptions/create' })}>
<Plus className="mr-2 h-4 w-4" />
Add Subscription
</Button>
</div>
<div className="flex items-center py-2">
<DataTableViewOptions table={table} />
</div>
<div className="rounded-md border">