opensource/certimate
3
0
Fork 0
mirror of https://github.com/certimate-go/certimate.git synced 2026-09-24 23:10:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(ui): clean code

Browse Source
This commit is contained in:
Fu Diwei
2025-07-22 16:40:56 +08:00
parent a09be88920
commit 0dc3cb79bd
249 changed files with 1059 additions and 1108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/App.tsx
+7
View File
@@ -85,6 +85,9 @@ const RootApp = () => {
screenXLMax: 96 * 16 - 1,
screenXXL: 96 * 16,
screenXXLMin: 96 * 16,
padding: 16,
paddingXS: 8,
paddingXXS: 6,
},
components: {
Layout: {
@@ -92,6 +95,10 @@ const RootApp = () => {
bodyBg: "transparent",
siderBg: "transparent",
},
Dropdown: {
...antdTheme?.components?.Dropdown,
paddingBlock: 9,
},
},
}}
>
ui/src/components/AppDocument.tsx
+3 -4
View File
@@ -1,15 +1,14 @@
import { memo } from "react";
import { useTranslation } from "react-i18next";
import { IconBook } from "@tabler/icons-react";
import { Typography } from "antd";
import { APP_DOCUMENT_URL } from "@/domain/app";
export type AppDocumentLinkButtonProps = {
export interface AppDocumentLinkButtonProps {
className?: string;
style?: React.CSSProperties;
showIcon?: boolean;
};
}
const AppDocumentLinkButton = (props: AppDocumentLinkButtonProps) => {
const { className, style, showIcon = true } = props;
@@ -35,5 +34,5 @@ const AppDocumentLinkButton = (props: AppDocumentLinkButtonProps) => {
};
export default {
LinkButton: memo(AppDocumentLinkButton),
LinkButton: AppDocumentLinkButton,
};
ui/src/components/AppLocale.tsx
+9 -10
View File
@@ -1,5 +1,4 @@
import { memo } from "react";
import { useTranslation } from "react-i18next";
import { useTranslation } from "react-i18next";
import { IconLanguage, type IconProps } from "@tabler/icons-react";
import { Dropdown, type DropdownProps, Typography } from "antd";
@@ -26,10 +25,10 @@ export const useAppLocaleMenuItems = () => {
return items;
};
export type AppLocaleDropdownProps = {
export interface AppLocaleDropdownProps {
children?: React.ReactNode;
trigger?: DropdownProps["trigger"];
};
}
const AppLocaleDropdown = (props: AppLocaleDropdownProps) => {
const { children, trigger = ["click"] } = props;
@@ -43,7 +42,7 @@ const AppLocaleDropdown = (props: AppLocaleDropdownProps) => {
);
};
export type AppLocaleIconProps = IconProps;
export interface AppLocaleIconProps extends IconProps {}
const AppLocaleIcon = (props: AppLocaleIconProps) => {
const { i18n } = useTranslation();
@@ -57,11 +56,11 @@ const AppLocaleIcon = (props: AppLocaleIconProps) => {
);
};
export type AppLocaleLinkButtonProps = {
export interface AppLocaleLinkButtonProps {
className?: string;
style?: React.CSSProperties;
showIcon?: boolean;
};
}
const AppLocaleLinkButton = (props: AppLocaleLinkButtonProps) => {
const { className, style, showIcon = true } = props;
@@ -82,7 +81,7 @@ const AppLocaleLinkButton = (props: AppLocaleLinkButtonProps) => {
};
export default {
Dropdown: memo(AppLocaleDropdown),
Icon: memo(AppLocaleIcon),
LinkButton: memo(AppLocaleLinkButton),
Dropdown: AppLocaleDropdown,
Icon: AppLocaleIcon,
LinkButton: AppLocaleLinkButton,
};
ui/src/components/AppTheme.tsx
+9 -10
View File
@@ -1,5 +1,4 @@
import { memo } from "react";
import { useTranslation } from "react-i18next";
import { useTranslation } from "react-i18next";
import { IconMoon, type IconProps, IconSun, IconSunMoon } from "@tabler/icons-react";
import { Dropdown, type DropdownProps, Typography } from "antd";
@@ -35,10 +34,10 @@ export const useAppThemeMenuItems = () => {
return items;
};
export type AppThemeDropdownProps = {
export interface AppThemeDropdownProps {
children?: React.ReactNode;
trigger?: DropdownProps["trigger"];
};
}
const AppThemeDropdown = (props: AppThemeDropdownProps) => {
const { children, trigger = ["click"] } = props;
@@ -52,7 +51,7 @@ const AppThemeDropdown = (props: AppThemeDropdownProps) => {
);
};
export type AppThemeIconProps = IconProps;
export interface AppThemeIconProps extends IconProps {}
const AppThemeIcon = (props: AppThemeIconProps) => {
const { theme } = useBrowserTheme();
@@ -60,11 +59,11 @@ const AppThemeIcon = (props: AppThemeIconProps) => {
return theme === "dark" ? <IconMoon {...props} /> : <IconSun {...props} />;
};
export type AppThemeLinkButtonProps = {
export interface AppThemeLinkButtonProps {
className?: string;
style?: React.CSSProperties;
showIcon?: boolean;
};
}
const AppThemeLinkButton = (props: AppThemeLinkButtonProps) => {
const { className, style, showIcon = true } = props;
@@ -86,7 +85,7 @@ const AppThemeLinkButton = (props: AppThemeLinkButtonProps) => {
};
export default {
Dropdown: memo(AppThemeDropdown),
Icon: memo(AppThemeIcon),
LinkButton: memo(AppThemeLinkButton),
Dropdown: AppThemeDropdown,
Icon: AppThemeIcon,
LinkButton: AppThemeLinkButton,
};
ui/src/components/AppVersion.tsx
+6 -7
View File
@@ -1,13 +1,12 @@
import { memo } from "react";
import { Badge, Typography } from "antd";
import { APP_DOWNLOAD_URL, APP_VERSION } from "@/domain/app";
import { useVersionChecker } from "@/hooks";
export type AppVersionLinkButtonProps = {
export interface AppVersionLinkButtonProps {
className?: string;
style?: React.CSSProperties;
};
}
const AppVersionLinkButton = ({ className, style }: AppVersionLinkButtonProps) => {
return (
@@ -19,11 +18,11 @@ const AppVersionLinkButton = ({ className, style }: AppVersionLinkButtonProps) =
);
};
export type AppVersionBadgeProps = {
export interface AppVersionBadgeProps {
className?: string;
style?: React.CSSProperties;
children?: React.ReactNode;
};
}
const AppVersionBadge = ({ className, style, children }: AppVersionBadgeProps) => {
const { hasNewVersion } = useVersionChecker();
@@ -41,6 +40,6 @@ const AppVersionBadge = ({ className, style, children }: AppVersionBadgeProps) =
};
export default {
LinkButton: memo(AppVersionLinkButton),
Badge: memo(AppVersionBadge),
LinkButton: AppVersionLinkButton,
Badge: AppVersionBadge,
};
ui/src/components/DrawerForm.tsx
+3 -3
View File
@@ -1,6 +1,6 @@
import { useTranslation } from "react-i18next";
import { useControllableValue } from "ahooks";
import { Button, Drawer, type DrawerProps, Form, type FormProps, type ModalProps, Space } from "antd";
import { Button, Drawer, type DrawerProps, Flex, Form, type FormProps, type ModalProps } from "antd";
import { useAntdForm, useTriggerElement } from "@/hooks";
@@ -109,14 +109,14 @@ const DrawerForm = <T extends NonNullable<unknown> = any>({
<Drawer
{...mergedDrawerProps}
footer={
<Space className="w-full justify-end">
<Flex justify="end" gap="small">
<Button {...cancelButtonProps} onClick={handleCancelClick}>
{cancelText ?? t("common.button.cancel")}
</Button>
<Button {...okButtonProps} type="primary" loading={formPending} onClick={handleOkClick}>
{okText ?? t("common.button.ok")}
</Button>
</Space>
</Flex>
}
forceRender
open={open}
ui/src/components/Empty.tsx
+2 -2
View File
@@ -3,14 +3,14 @@ import { Typography, theme } from "antd";
import Show from "./Show";
export type EmptyProps = {
export interface EmptyProps {
className?: string;
style?: React.CSSProperties;
title?: React.ReactNode;
description?: React.ReactNode;
extra?: React.ReactNode;
icon?: React.ReactNode;
};
}
const Empty = (props: EmptyProps) => {
const { t } = useTranslation();
ui/src/components/ModalForm.tsx
+1 -1
View File
@@ -122,7 +122,7 @@ const ModalForm = <T extends NonNullable<unknown> = any>({
onOk={handleOkClick}
onCancel={handleCancelClick}
>
<div className="pb-2 pt-4">
<div className="pt-4 pb-2">
<Form className={className} style={style} {...mergedFormProps} form={formInst}>
{children}
</Form>
ui/src/components/MultipleInput.tsx
+5 -5
View File
@@ -2,10 +2,10 @@
import { useTranslation } from "react-i18next";
import { IconCircleArrowDown, IconCircleArrowUp, IconCircleMinus, IconCirclePlus } from "@tabler/icons-react";
import { useControllableValue } from "ahooks";
import { Button, Input, type InputProps, type InputRef, Space } from "antd";
import { Button, Input, type InputProps, type InputRef } from "antd";
import { produce } from "immer";
export type MultipleInputProps = Omit<InputProps, "count" | "defaultValue" | "showCount" | "value" | "onChange" | "onPressEnter" | "onClear"> & {
export interface MultipleInputProps extends Omit<InputProps, "count" | "defaultValue" | "showCount" | "value" | "onChange" | "onPressEnter" | "onClear"> {
allowClear?: boolean;
defaultValue?: string[];
maxCount?: number;
@@ -17,7 +17,7 @@ export type MultipleInputProps = Omit<InputProps, "count" | "defaultValue" | "sh
onValueCreate?: (index: number) => void;
onValueRemove?: (index: number) => void;
onValueSort?: (oldIndex: number, newIndex: number) => void;
};
}
const MultipleInput = ({
allowClear = false,
@@ -124,7 +124,7 @@ const MultipleInput = ({
{t("common.button.add")}
</Button>
) : (
<Space className="w-full" direction="vertical" size="small">
<div className="flex flex-col gap-2">
{Array.from(value).map((element, index) => {
const allowUp = index > 0;
const allowDown = index < value.length - 1;
@@ -154,7 +154,7 @@ const MultipleInput = ({
/>
);
})}
</Space>
</div>
);
};
ui/src/components/MultipleSplitValueInput.tsx
+28 -25
View File
@@ -10,10 +10,10 @@ import MultipleInput from "./MultipleInput";
type SplitOptions = {
removeEmpty?: boolean;
trim?: boolean;
trimSpace?: boolean;
};
export type MultipleSplitValueInputProps = Omit<InputProps, "count" | "defaultValue" | "showCount" | "value" | "onChange"> & {
export interface MultipleSplitValueInputProps extends Omit<InputProps, "count" | "defaultValue" | "showCount" | "value" | "onChange"> {
defaultValue?: string;
maxCount?: number;
minCount?: number;
@@ -25,13 +25,14 @@ export type MultipleSplitValueInputProps = Omit<InputProps, "count" | "defaultVa
splitOptions?: SplitOptions;
value?: string[];
onChange?: (value: string) => void;
};
}
const DEFAULT_SEPARATOR = ";";
const MultipleSplitValueInput = ({
className,
style,
size,
separator: delimiter = DEFAULT_SEPARATOR,
disabled,
maxCount,
@@ -56,7 +57,7 @@ const MultipleSplitValueInput = ({
initialValues: { value: value?.split(delimiter) },
onSubmit: (values) => {
const temp = values.value ?? [];
if (splitOptions.trim) {
if (splitOptions.trimSpace) {
temp.map((e) => e.trim());
}
if (splitOptions.removeEmpty) {
@@ -81,27 +82,29 @@ const MultipleSplitValueInput = ({
};
return (
<Space.Compact className={className} style={{ width: "100%", ...style }}>
<Input {...props} disabled={disabled} placeholder={placeholder} value={value} onChange={handleChange} onClear={handleClear} />
<ModalForm
{...formProps}
layout="vertical"
form={formInst}
modalProps={{ destroyOnHidden: true }}
title={modalTitle}
trigger={
<Button disabled={disabled}>
<IconList size="1.25em" />
</Button>
}
validateTrigger="onSubmit"
width={modalWidth}
>
<Form.Item name="value" noStyle>
<MultipleInput minCount={minCount} maxCount={maxCount} placeholder={placeholderInModal ?? placeholder} showSortButton={showSortButton} />
</Form.Item>
</ModalForm>
</Space.Compact>
<div className={className} style={style}>
<Space.Compact className="w-full">
<Input {...props} disabled={disabled} placeholder={placeholder} size={size} value={value} onChange={handleChange} onClear={handleClear} />
<ModalForm
{...formProps}
layout="vertical"
form={formInst}
modalProps={{ destroyOnHidden: true }}
title={modalTitle}
trigger={
<Button className="px-2" disabled={disabled} size={size}>
<IconList size="1.25em" />
</Button>
}
validateTrigger="onSubmit"
width={modalWidth}
>
<Form.Item name="value" noStyle>
<MultipleInput minCount={minCount} maxCount={maxCount} placeholder={placeholderInModal ?? placeholder} showSortButton={showSortButton} />
</Form.Item>
</ModalForm>
</Space.Compact>
</div>
);
};
ui/src/components/Show.tsx
+2 -2
View File
@@ -1,8 +1,8 @@
export type ShowProps = {
export interface ShowProps {
when: boolean;
children: React.ReactNode;
fallback?: React.ReactNode;
};
}
const Show = ({ when, children, fallback }: ShowProps) => {
return when ? children : fallback;
ui/src/components/TextFileInput.tsx
+14 -13
View File
@@ -1,10 +1,9 @@
import { type ChangeEvent, useRef } from "react";
import { useTranslation } from "react-i18next";
import { IconFileImport } from "@tabler/icons-react";
import { Button, type ButtonProps, Input, Space, type UploadProps } from "antd";
import { Button, type ButtonProps, Input, type UploadProps } from "antd";
import { type TextAreaProps } from "antd/es/input/TextArea";
import { mergeCls } from "@/utils/css";
import { readFileContent } from "@/utils/file";
export interface TextFileInputProps extends Omit<TextAreaProps, "onChange"> {
@@ -34,17 +33,19 @@ const TextFileInput = ({ className, style, accept, disabled, readOnly, uploadTex
};
return (
<Space className={mergeCls("w-full", className)} style={style} direction="vertical" size="small">
<Input.TextArea {...props} disabled={disabled} readOnly={readOnly} onChange={(e) => onChange?.(e.target.value)} />
{!readOnly && (
<>
<Button {...uploadButtonProps} block disabled={disabled} icon={<IconFileImport size="1.25em" />} onClick={handleButtonClick}>
{uploadText ?? t("common.text.import_from_file")}
</Button>
<input ref={fileInputRef} type="file" style={{ display: "none" }} accept={accept} onChange={handleFileChange} />
</>
)}
</Space>
<div className={className} style={style}>
<div className="flex flex-col items-center gap-2">
<Input.TextArea {...props} disabled={disabled} readOnly={readOnly} onChange={(e) => onChange?.(e.target.value)} />
{!readOnly && (
<>
<Button {...uploadButtonProps} block disabled={disabled} icon={<IconFileImport size="1.25em" />} onClick={handleButtonClick}>
{uploadText ?? t("common.text.import_from_file")}
</Button>
<input ref={fileInputRef} type="file" style={{ display: "none" }} accept={accept} onChange={handleFileChange} />
</>
)}
</div>
</div>
);
};
ui/src/components/access/AccessEditDrawer.tsx
+24 -11
View File
@@ -1,7 +1,7 @@
import { useRef, useState } from "react";
import { useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { useControllableValue } from "ahooks";
import { App, Button, Drawer, Space } from "antd";
import { App, Button, Drawer, Flex } from "antd";
import { type AccessModel } from "@/domain/access";
import { useTriggerElement, useZustandShallowSelector } from "@/hooks";
@@ -10,7 +10,7 @@ import { getErrMsg } from "@/utils/error";
import AccessForm, { type AccessFormInstance, type AccessFormProps } from "./AccessForm";
export type AccessEditDrawerProps = {
export interface AccessEditDrawerProps {
action: AccessFormProps["action"];
data?: AccessFormProps["initialValues"];
loading?: boolean;
@@ -19,7 +19,7 @@ export type AccessEditDrawerProps = {
usage?: AccessFormProps["usage"];
onOpenChange?: (open: boolean) => void;
afterSubmit?: (record: AccessModel) => void;
};
}
const AccessEditDrawer = ({ action, data, loading, trigger, usage, afterSubmit, ...props }: AccessEditDrawerProps) => {
const { t } = useTranslation();
@@ -39,6 +39,11 @@ const AccessEditDrawer = ({ action, data, loading, trigger, usage, afterSubmit,
const formRef = useRef<AccessFormInstance>(null);
const [formPending, setFormPending] = useState(false);
const [footerShow, setFooterShow] = useState(!!data?.provider);
useEffect(() => {
setFooterShow(!!data?.provider);
}, [data?.provider]);
const handleOkClick = async () => {
setFormPending(true);
try {
@@ -84,6 +89,10 @@ const AccessEditDrawer = ({ action, data, loading, trigger, usage, afterSubmit,
setOpen(false);
};
const handleFormValuesChange: AccessFormProps["onValuesChange"] = (values) => {
setFooterShow(!!values.provider);
};
return (
<>
{triggerEl}
@@ -93,12 +102,16 @@ const AccessEditDrawer = ({ action, data, loading, trigger, usage, afterSubmit,
closable={!formPending}
destroyOnHidden
footer={
<Space className="w-full justify-end">
<Button onClick={handleCancelClick}>{t("common.button.cancel")}</Button>
<Button loading={formPending} type="primary" onClick={handleOkClick}>
{action === "edit" ? t("common.button.save") : t("common.button.submit")}
</Button>
</Space>
footerShow ? (
<Flex justify="end" gap="small">
<Button onClick={handleCancelClick}>{t("common.button.cancel")}</Button>
<Button loading={formPending} type="primary" onClick={handleOkClick}>
{action === "edit" ? t("common.button.save") : t("common.button.submit")}
</Button>
</Flex>
) : (
false
)
}
loading={loading}
maskClosable={!formPending}
@@ -107,7 +120,7 @@ const AccessEditDrawer = ({ action, data, loading, trigger, usage, afterSubmit,
width={720}
onClose={() => setOpen(false)}
>
<AccessForm ref={formRef} initialValues={data} action={action === "create" ? "create" : "edit"} usage={usage} />
<AccessForm ref={formRef} initialValues={data} action={action === "create" ? "create" : "edit"} usage={usage} onValuesChange={handleFormValuesChange} />
</Drawer>
</>
);
ui/src/components/access/AccessEditModal.tsx
+18 -8
View File
@@ -1,4 +1,4 @@
import { useRef, useState } from "react";
import { useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { useControllableValue } from "ahooks";
import { App, Modal } from "antd";
@@ -10,7 +10,7 @@ import { getErrMsg } from "@/utils/error";
import AccessForm, { type AccessFormInstance, type AccessFormProps } from "./AccessForm";
export type AccessEditModalProps = {
export interface AccessEditModalProps {
action: AccessFormProps["action"];
data?: AccessFormProps["initialValues"];
loading?: boolean;
@@ -19,7 +19,7 @@ export type AccessEditModalProps = {
trigger?: React.ReactNode;
onOpenChange?: (open: boolean) => void;
afterSubmit?: (record: AccessModel) => void;
};
}
const AccessEditModal = ({ action, data, loading, trigger, usage, afterSubmit, ...props }: AccessEditModalProps) => {
const { t } = useTranslation();
@@ -39,6 +39,11 @@ const AccessEditModal = ({ action, data, loading, trigger, usage, afterSubmit, .
const formRef = useRef<AccessFormInstance>(null);
const [formPending, setFormPending] = useState(false);
const [footerShow, setFooterShow] = useState(!!data?.provider);
useEffect(() => {
setFooterShow(!!data?.provider);
}, [data?.provider]);
const handleOkClick = async () => {
setFormPending(true);
try {
@@ -84,14 +89,20 @@ const AccessEditModal = ({ action, data, loading, trigger, usage, afterSubmit, .
setOpen(false);
};
const handleFormValuesChange: AccessFormProps["onValuesChange"] = (values) => {
setFooterShow(!!values.provider);
};
return (
<>
{triggerEl}
<Modal
styles={{
content: {
body: {
maxHeight: "calc(80vh - 64px)",
paddingTop: "1em",
paddingBottom: "1em",
overflowX: "hidden",
overflowY: "auto",
},
@@ -102,17 +113,16 @@ const AccessEditModal = ({ action, data, loading, trigger, usage, afterSubmit, .
closable
confirmLoading={formPending}
destroyOnHidden
footer={footerShow ? undefined : false}
loading={loading}
okText={action === "edit" ? t("common.button.save") : t("common.button.submit")}
open={open}
title={t(`access.action.${action}`)}
title={t(`access.action.${action}.modal.title`)}
width={480}
onOk={handleOkClick}
onCancel={handleCancelClick}
>
<div className="pt-4 pb-2">
<AccessForm ref={formRef} initialValues={data} action={action === "create" ? "create" : "edit"} usage={usage} />
</div>
<AccessForm ref={formRef} initialValues={data} action={action === "create" ? "create" : "edit"} usage={usage} onValuesChange={handleFormValuesChange} />
</Modal>
</>
);
ui/src/components/access/AccessForm.tsx
+20 -43
View File
@@ -87,9 +87,9 @@ import AccessFormZeroSSLConfig from "./AccessFormZeroSSLConfig";
type AccessFormFieldValues = Partial<MaybeModelRecord<AccessModel>>;
type AccessFormActions = "create" | "edit";
type AccessFormUsages = "both-dns-hosting" | "ca-only" | "notification-only";
type AccessFormUsages = "dns" | "hosting" | "dns-hosting" | "ca" | "notification";
export type AccessFormProps = {
export interface AccessFormProps {
className?: string;
style?: React.CSSProperties;
action: AccessFormActions;
@@ -97,13 +97,13 @@ export type AccessFormProps = {
initialValues?: AccessFormFieldValues;
usage?: AccessFormUsages;
onValuesChange?: (values: AccessFormFieldValues) => void;
};
}
export type AccessFormInstance = {
export interface AccessFormInstance {
getFieldsValue: () => ReturnType<FormInstance<AccessFormFieldValues>["getFieldsValue"]>;
resetFields: FormInstance<AccessFormFieldValues>["resetFields"];
validateFields: FormInstance<AccessFormFieldValues>["validateFields"];
};
}
const AccessForm = forwardRef<AccessFormInstance, AccessFormProps>(({ className, style, action, disabled, initialValues, usage, onValuesChange }, ref) => {
const { t } = useTranslation();
@@ -113,14 +113,7 @@ const AccessForm = forwardRef<AccessFormInstance, AccessFormProps>(({ className,
.string(t("access.form.name.placeholder"))
.min(1, t("access.form.name.placeholder"))
.max(64, t("common.errmsg.string_max", { max: 64 })),
provider: z.nativeEnum(ACCESS_PROVIDERS, {
message:
usage === "ca-only"
? t("access.form.certificate_authority.placeholder")
: usage === "notification-only"
? t("access.form.notification_channel.placeholder")
: t("access.form.provider.placeholder"),
}),
provider: z.enum(ACCESS_PROVIDERS, t("access.form.provider.placeholder")),
config: z.any(),
reserve: z.string().nullish(),
});
@@ -132,39 +125,23 @@ const AccessForm = forwardRef<AccessFormInstance, AccessFormProps>(({ className,
const providerFilter = useMemo(() => {
switch (usage) {
case "both-dns-hosting":
case "dns":
return (record: AccessProvider) => record.usages.includes(ACCESS_USAGES.DNS);
case "hosting":
return (record: AccessProvider) => record.usages.includes(ACCESS_USAGES.HOSTING);
case "dns-hosting":
return (record: AccessProvider) => record.usages.includes(ACCESS_USAGES.DNS) || record.usages.includes(ACCESS_USAGES.HOSTING);
case "ca-only":
case "ca":
return (record: AccessProvider) => record.usages.includes(ACCESS_USAGES.CA);
case "notification-only":
case "notification":
return (record: AccessProvider) => record.usages.includes(ACCESS_USAGES.NOTIFICATION);
}
return undefined;
}, [usage]);
const providerLabel = useMemo(() => {
switch (usage) {
case "ca-only":
return t("access.form.certificate_authority.label");
case "notification-only":
return t("access.form.notification_channel.label");
}
return t("access.form.provider.label");
}, [usage]);
const providerPlaceholder = useMemo(() => {
switch (usage) {
case "ca-only":
return t("access.form.certificate_authority.placeholder");
case "notification-only":
return t("access.form.notification_channel.placeholder");
}
return t("access.form.provider.placeholder");
}, [usage]);
const providerTooltip = useMemo(() => {
switch (usage) {
case "both-dns-hosting":
case "dns-hosting":
return <span dangerouslySetInnerHTML={{ __html: t("access.form.provider.tooltip") }}></span>;
}
@@ -330,7 +307,7 @@ const AccessForm = forwardRef<AccessFormInstance, AccessFormProps>(({ className,
case ACCESS_PROVIDERS.WEBHOOK:
return (
<AccessFormWebhookConfig
usage={usage === "notification-only" ? "notification" : usage === "both-dns-hosting" ? "deployment" : "none"}
usage={usage === "notification" ? "notification" : usage === "hosting" || usage === "dns-hosting" ? "deployment" : "none"}
{...nestedFormProps}
/>
);
@@ -365,7 +342,7 @@ const AccessForm = forwardRef<AccessFormInstance, AccessFormProps>(({ className,
getFieldsValue: () => {
const values = formInst.getFieldsValue(true);
values.config = nestedFormInst.getFieldsValue();
values.reserve = usage === "ca-only" ? "ca" : usage === "notification-only" ? "notification" : undefined;
values.reserve = usage === "ca" ? "ca" : usage === "notification" ? "notification" : undefined;
return values;
},
resetFields: (fields) => {
@@ -394,7 +371,7 @@ const AccessForm = forwardRef<AccessFormInstance, AccessFormProps>(({ className,
autoFocus
filter={providerFilter}
placeholder={t("access.form.provider.search.placeholder")}
showOptionTags={usage == null || (usage === "both-dns-hosting" ? { [ACCESS_USAGES.DNS]: true, [ACCESS_USAGES.HOSTING]: true } : false)}
showOptionTags={usage == null || (usage === "dns-hosting" ? { [ACCESS_USAGES.DNS]: true, [ACCESS_USAGES.HOSTING]: true } : false)}
onSelect={handleProviderPick}
/>
}
@@ -403,12 +380,12 @@ const AccessForm = forwardRef<AccessFormInstance, AccessFormProps>(({ className,
<Input placeholder={t("access.form.name.placeholder")} />
</Form.Item>
<Form.Item name="provider" label={providerLabel} rules={[formRule]} tooltip={providerTooltip}>
<Form.Item name="provider" label={t("access.form.provider.label")} rules={[formRule]} tooltip={providerTooltip}>
<AccessProviderSelect
filter={providerFilter}
disabled={action !== "create"}
placeholder={providerPlaceholder}
showOptionTags={usage == null || (usage === "both-dns-hosting" ? { [ACCESS_USAGES.DNS]: true, [ACCESS_USAGES.HOSTING]: true } : false)}
placeholder={t("access.form.provider.placeholder")}
showOptionTags={usage == null || (usage === "dns-hosting" ? { [ACCESS_USAGES.DNS]: true, [ACCESS_USAGES.HOSTING]: true } : false)}
showSearch={!disabled}
/>
</Form.Item>
ui/src/components/access/AccessForm1PanelConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigFor1Panel } from "@/domain/access";
type AccessForm1PanelConfigFieldValues = Nullish<AccessConfigFor1Panel>;
export type AccessForm1PanelConfigProps = {
export interface AccessForm1PanelConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessForm1PanelConfigFieldValues;
onValuesChange?: (values: AccessForm1PanelConfigFieldValues) => void;
};
}
const initFormModel = (): AccessForm1PanelConfigFieldValues => {
return {
ui/src/components/access/AccessFormACMECAConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForACMECA } from "@/domain/access";
type AccessFormACMECAConfigFieldValues = Nullish<AccessConfigForACMECA>;
export type AccessFormACMECAConfigProps = {
export interface AccessFormACMECAConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormACMECAConfigFieldValues;
onValuesChange?: (values: AccessFormACMECAConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormACMECAConfigFieldValues => {
return {
ui/src/components/access/AccessFormACMEHttpReqConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForACMEHttpReq } from "@/domain/access";
type AccessFormACMEHttpReqConfigFieldValues = Nullish<AccessConfigForACMEHttpReq>;
export type AccessFormACMEHttpReqConfigProps = {
export interface AccessFormACMEHttpReqConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormACMEHttpReqConfigFieldValues;
onValuesChange?: (values: AccessFormACMEHttpReqConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormACMEHttpReqConfigFieldValues => {
return {
ui/src/components/access/AccessFormAPISIXConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForAPISIX } from "@/domain/access";
type AccessFormAPISIXConfigFieldValues = Nullish<AccessConfigForAPISIX>;
export type AccessFormAPISIXConfigProps = {
export interface AccessFormAPISIXConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormAPISIXConfigFieldValues;
onValuesChange?: (values: AccessFormAPISIXConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormAPISIXConfigFieldValues => {
return {
ui/src/components/access/AccessFormAWSConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForAWS } from "@/domain/access";
type AccessFormAWSConfigFieldValues = Nullish<AccessConfigForAWS>;
export type AccessFormAWSConfigProps = {
export interface AccessFormAWSConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormAWSConfigFieldValues;
onValuesChange?: (values: AccessFormAWSConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormAWSConfigFieldValues => {
return {
ui/src/components/access/AccessFormAliyunConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForAliyun } from "@/domain/access";
type AccessFormAliyunConfigFieldValues = Nullish<AccessConfigForAliyun>;
export type AccessFormAliyunConfigProps = {
export interface AccessFormAliyunConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormAliyunConfigFieldValues;
onValuesChange?: (values: AccessFormAliyunConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormAliyunConfigFieldValues => {
return {
ui/src/components/access/AccessFormAzureConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForAzure } from "@/domain/access";
type AccessFormAzureConfigFieldValues = Nullish<AccessConfigForAzure>;
export type AccessFormAzureConfigProps = {
export interface AccessFormAzureConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormAzureConfigFieldValues;
onValuesChange?: (values: AccessFormAzureConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormAzureConfigFieldValues => {
return {
ui/src/components/access/AccessFormBaiduCloudConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForBaiduCloud } from "@/domain/access";
type AccessFormBaiduCloudConfigFieldValues = Nullish<AccessConfigForBaiduCloud>;
export type AccessFormBaiduCloudConfigProps = {
export interface AccessFormBaiduCloudConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormBaiduCloudConfigFieldValues;
onValuesChange?: (values: AccessFormBaiduCloudConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormBaiduCloudConfigFieldValues => {
return {
ui/src/components/access/AccessFormBaishanConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForBaishan } from "@/domain/access";
type AccessFormBaishanConfigFieldValues = Nullish<AccessConfigForBaishan>;
export type AccessFormBaishanConfigProps = {
export interface AccessFormBaishanConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormBaishanConfigFieldValues;
onValuesChange?: (values: AccessFormBaishanConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormBaishanConfigFieldValues => {
return {
ui/src/components/access/AccessFormBaotaPanelConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForBaotaPanel } from "@/domain/access";
type AccessFormBaotaPanelConfigFieldValues = Nullish<AccessConfigForBaotaPanel>;
export type AccessFormBaotaPanelConfigProps = {
export interface AccessFormBaotaPanelConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormBaotaPanelConfigFieldValues;
onValuesChange?: (values: AccessFormBaotaPanelConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormBaotaPanelConfigFieldValues => {
return {
ui/src/components/access/AccessFormBaotaWAFConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForBaotaWAF } from "@/domain/access";
type AccessFormBaotaWAFConfigFieldValues = Nullish<AccessConfigForBaotaWAF>;
export type AccessFormBaotaWAFConfigProps = {
export interface AccessFormBaotaWAFConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormBaotaWAFConfigFieldValues;
onValuesChange?: (values: AccessFormBaotaWAFConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormBaotaWAFConfigFieldValues => {
return {
ui/src/components/access/AccessFormBunnyConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForBunny } from "@/domain/access";
type AccessFormBunnyConfigFieldValues = Nullish<AccessConfigForBunny>;
export type AccessFormBunnyConfigProps = {
export interface AccessFormBunnyConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormBunnyConfigFieldValues;
onValuesChange?: (values: AccessFormBunnyConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormBunnyConfigFieldValues => {
return {
ui/src/components/access/AccessFormBytePlusConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForBytePlus } from "@/domain/access";
type AccessFormBytePlusConfigFieldValues = Nullish<AccessConfigForBytePlus>;
export type AccessFormBytePlusConfigProps = {
export interface AccessFormBytePlusConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormBytePlusConfigFieldValues;
onValuesChange?: (values: AccessFormBytePlusConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormBytePlusConfigFieldValues => {
return {
ui/src/components/access/AccessFormCMCCCloudConfig.tsx
+2 -2
View File
@@ -6,13 +6,13 @@ import { type AccessConfigForCMCCCloud } from "@/domain/access";
type AccessFormCMCCCloudConfigFieldValues = Nullish<AccessConfigForCMCCCloud>;
export type AccessFormCMCCCloudConfigProps = {
export interface AccessFormCMCCCloudConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormCMCCCloudConfigFieldValues;
onValuesChange?: (values: AccessFormCMCCCloudConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormCMCCCloudConfigFieldValues => {
return {
ui/src/components/access/AccessFormCTCCCloudConfig.tsx
+2 -2
View File
@@ -6,13 +6,13 @@ import { type AccessConfigForCTCCCloud } from "@/domain/access";
type AccessFormCTCCCloudConfigFieldValues = Nullish<AccessConfigForCTCCCloud>;
export type AccessFormCTCCCloudConfigProps = {
export interface AccessFormCTCCCloudConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormCTCCCloudConfigFieldValues;
onValuesChange?: (values: AccessFormCTCCCloudConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormCTCCCloudConfigFieldValues => {
return {
ui/src/components/access/AccessFormCacheFlyConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForCacheFly } from "@/domain/access";
type AccessFormCacheFlyConfigFieldValues = Nullish<AccessConfigForCacheFly>;
export type AccessFormCacheFlyConfigProps = {
export interface AccessFormCacheFlyConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormCacheFlyConfigFieldValues;
onValuesChange?: (values: AccessFormCacheFlyConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormCacheFlyConfigFieldValues => {
return {
ui/src/components/access/AccessFormCdnflyConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForCdnfly } from "@/domain/access";
type AccessFormCdnflyConfigFieldValues = Nullish<AccessConfigForCdnfly>;
export type AccessFormCdnflyConfigProps = {
export interface AccessFormCdnflyConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormCdnflyConfigFieldValues;
onValuesChange?: (values: AccessFormCdnflyConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormCdnflyConfigFieldValues => {
return {
ui/src/components/access/AccessFormClouDNSConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForClouDNS } from "@/domain/access";
type AccessFormClouDNSConfigFieldValues = Nullish<AccessConfigForClouDNS>;
export type AccessFormClouDNSConfigProps = {
export interface AccessFormClouDNSConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormClouDNSConfigFieldValues;
onValuesChange?: (values: AccessFormClouDNSConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormClouDNSConfigFieldValues => {
return {
ui/src/components/access/AccessFormCloudflareConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForCloudflare } from "@/domain/access";
type AccessFormCloudflareConfigFieldValues = Nullish<AccessConfigForCloudflare>;
export type AccessFormCloudflareConfigProps = {
export interface AccessFormCloudflareConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormCloudflareConfigFieldValues;
onValuesChange?: (values: AccessFormCloudflareConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormCloudflareConfigFieldValues => {
return {
ui/src/components/access/AccessFormConstellixConfig.tsx
+2 -2
View File
@@ -6,13 +6,13 @@ import { type AccessConfigForConstellix } from "@/domain/access";
type AccessFormConstellixConfigFieldValues = Nullish<AccessConfigForConstellix>;
export type AccessFormConstellixConfigProps = {
export interface AccessFormConstellixConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormConstellixConfigFieldValues;
onValuesChange?: (values: AccessFormConstellixConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormConstellixConfigFieldValues => {
return {
ui/src/components/access/AccessFormDNSLAConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForDNSLA } from "@/domain/access";
type AccessFormDNSLAConfigFieldValues = Nullish<AccessConfigForDNSLA>;
export type AccessFormDNSLAConfigProps = {
export interface AccessFormDNSLAConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormDNSLAConfigFieldValues;
onValuesChange?: (values: AccessFormDNSLAConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormDNSLAConfigFieldValues => {
return {
ui/src/components/access/AccessFormDeSECConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForDeSEC } from "@/domain/access";
type AccessFormDeSECConfigFieldValues = Nullish<AccessConfigForDeSEC>;
export type AccessFormDeSECConfigProps = {
export interface AccessFormDeSECConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormDeSECConfigFieldValues;
onValuesChange?: (values: AccessFormDeSECConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormDeSECConfigFieldValues => {
return {
ui/src/components/access/AccessFormDigitalOceanConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForDigitalOcean } from "@/domain/access";
type AccessFormDigitalOceanConfigFieldValues = Nullish<AccessConfigForDigitalOcean>;
export type AccessFormDigitalOceanConfigProps = {
export interface AccessFormDigitalOceanConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormDigitalOceanConfigFieldValues;
onValuesChange?: (values: AccessFormDigitalOceanConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormDigitalOceanConfigFieldValues => {
return {
ui/src/components/access/AccessFormDingTalkBotConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForDingTalkBot } from "@/domain/access";
type AccessFormDingTalkBotConfigFieldValues = Nullish<AccessConfigForDingTalkBot>;
export type AccessFormDingTalkBotConfigProps = {
export interface AccessFormDingTalkBotConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormDingTalkBotConfigFieldValues;
onValuesChange?: (values: AccessFormDingTalkBotConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormDingTalkBotConfigFieldValues => {
return {
ui/src/components/access/AccessFormDiscordBotConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForDiscordBot } from "@/domain/access";
type AccessFormDiscordBotConfigFieldValues = Nullish<AccessConfigForDiscordBot>;
export type AccessFormDiscordBotConfigProps = {
export interface AccessFormDiscordBotConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormDiscordBotConfigFieldValues;
onValuesChange?: (values: AccessFormDiscordBotConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormDiscordBotConfigFieldValues => {
return {
ui/src/components/access/AccessFormDogeCloudConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForDogeCloud } from "@/domain/access";
type AccessFormDogeCloudConfigFieldValues = Nullish<AccessConfigForDogeCloud>;
export type AccessFormDogeCloudConfigProps = {
export interface AccessFormDogeCloudConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormDogeCloudConfigFieldValues;
onValuesChange?: (values: AccessFormDogeCloudConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormDogeCloudConfigFieldValues => {
return {
ui/src/components/access/AccessFormDuckDNSConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForDuckDNS } from "@/domain/access";
type AccessFormDuckDNSConfigFieldValues = Nullish<AccessConfigForDuckDNS>;
export type AccessFormDuckDNSConfigProps = {
export interface AccessFormDuckDNSConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormDuckDNSConfigFieldValues;
onValuesChange?: (values: AccessFormDuckDNSConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormDuckDNSConfigFieldValues => {
return {
ui/src/components/access/AccessFormDynv6Config.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForDynv6 } from "@/domain/access";
type AccessFormDynv6ConfigFieldValues = Nullish<AccessConfigForDynv6>;
export type AccessFormDynv6ConfigProps = {
export interface AccessFormDynv6ConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormDynv6ConfigFieldValues;
onValuesChange?: (values: AccessFormDynv6ConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormDynv6ConfigFieldValues => {
return {
ui/src/components/access/AccessFormEdgioConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForEdgio } from "@/domain/access";
type AccessFormEdgioConfigFieldValues = Nullish<AccessConfigForEdgio>;
export type AccessFormEdgioConfigProps = {
export interface AccessFormEdgioConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormEdgioConfigFieldValues;
onValuesChange?: (values: AccessFormEdgioConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormEdgioConfigFieldValues => {
return {
ui/src/components/access/AccessFormEmailConfig.tsx
+2 -2
View File
@@ -8,13 +8,13 @@ import { validEmailAddress, validPortNumber } from "@/utils/validators";
type AccessFormEmailConfigFieldValues = Nullish<AccessConfigForEmail>;
export type AccessFormEmailConfigProps = {
export interface AccessFormEmailConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormEmailConfigFieldValues;
onValuesChange?: (values: AccessFormEmailConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormEmailConfigFieldValues => {
return {
ui/src/components/access/AccessFormFlexCDNConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForFlexCDN } from "@/domain/access";
type AccessFormFlexCDNConfigFieldValues = Nullish<AccessConfigForFlexCDN>;
export type AccessFormFlexCDNConfigProps = {
export interface AccessFormFlexCDNConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormFlexCDNConfigFieldValues;
onValuesChange?: (values: AccessFormFlexCDNConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormFlexCDNConfigFieldValues => {
return {
ui/src/components/access/AccessFormGcoreConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForGcore } from "@/domain/access";
type AccessFormGcoreConfigFieldValues = Nullish<AccessConfigForGcore>;
export type AccessFormGcoreConfigProps = {
export interface AccessFormGcoreConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormGcoreConfigFieldValues;
onValuesChange?: (values: AccessFormGcoreConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormGcoreConfigFieldValues => {
return {
ui/src/components/access/AccessFormGnameConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForGname } from "@/domain/access";
type AccessFormGnameConfigFieldValues = Nullish<AccessConfigForGname>;
export type AccessFormGnameConfigProps = {
export interface AccessFormGnameConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormGnameConfigFieldValues;
onValuesChange?: (values: AccessFormGnameConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormGnameConfigFieldValues => {
return {
ui/src/components/access/AccessFormGoDaddyConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForGoDaddy } from "@/domain/access";
type AccessFormGoDaddyConfigFieldValues = Nullish<AccessConfigForGoDaddy>;
export type AccessFormGoDaddyConfigProps = {
export interface AccessFormGoDaddyConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormGoDaddyConfigFieldValues;
onValuesChange?: (values: AccessFormGoDaddyConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormGoDaddyConfigFieldValues => {
return {
ui/src/components/access/AccessFormGoEdgeConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForGoEdge } from "@/domain/access";
type AccessFormGoEdgeConfigFieldValues = Nullish<AccessConfigForGoEdge>;
export type AccessFormGoEdgeConfigProps = {
export interface AccessFormGoEdgeConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormGoEdgeConfigFieldValues;
onValuesChange?: (values: AccessFormGoEdgeConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormGoEdgeConfigFieldValues => {
return {
ui/src/components/access/AccessFormGoogleTrustServicesConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForGoogleTrustServices } from "@/domain/access";
type AccessFormGoogleTrustServicesConfigFieldValues = Nullish<AccessConfigForGoogleTrustServices>;
export type AccessFormGoogleTrustServicesConfigProps = {
export interface AccessFormGoogleTrustServicesConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormGoogleTrustServicesConfigFieldValues;
onValuesChange?: (values: AccessFormGoogleTrustServicesConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormGoogleTrustServicesConfigFieldValues => {
return {
ui/src/components/access/AccessFormHetznerConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForHetzner } from "@/domain/access";
type AccessFormHetznerConfigFieldValues = Nullish<AccessConfigForHetzner>;
export type AccessFormHetznerConfigProps = {
export interface AccessFormHetznerConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormHetznerConfigFieldValues;
onValuesChange?: (values: AccessFormHetznerConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormHetznerConfigFieldValues => {
return {
ui/src/components/access/AccessFormHuaweiCloudConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForHuaweiCloud } from "@/domain/access";
type AccessFormHuaweiCloudConfigFieldValues = Nullish<AccessConfigForHuaweiCloud>;
export type AccessFormHuaweiCloudConfigProps = {
export interface AccessFormHuaweiCloudConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormHuaweiCloudConfigFieldValues;
onValuesChange?: (values: AccessFormHuaweiCloudConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormHuaweiCloudConfigFieldValues => {
return {
ui/src/components/access/AccessFormJDCloudConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForJDCloud } from "@/domain/access";
type AccessFormJDCloudConfigFieldValues = Nullish<AccessConfigForJDCloud>;
export type AccessFormJDCloudConfigProps = {
export interface AccessFormJDCloudConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormJDCloudConfigFieldValues;
onValuesChange?: (values: AccessFormJDCloudConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormJDCloudConfigFieldValues => {
return {
ui/src/components/access/AccessFormKongConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForKong } from "@/domain/access";
type AccessFormKongConfigFieldValues = Nullish<AccessConfigForKong>;
export type AccessFormKongConfigProps = {
export interface AccessFormKongConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormKongConfigFieldValues;
onValuesChange?: (values: AccessFormKongConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormKongConfigFieldValues => {
return {
ui/src/components/access/AccessFormKubernetesConfig.tsx
+2 -2
View File
@@ -8,13 +8,13 @@ import { type AccessConfigForKubernetes } from "@/domain/access";
type AccessFormKubernetesConfigFieldValues = Nullish<AccessConfigForKubernetes>;
export type AccessFormKubernetesConfigProps = {
export interface AccessFormKubernetesConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormKubernetesConfigFieldValues;
onValuesChange?: (values: AccessFormKubernetesConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormKubernetesConfigFieldValues => {
return {};
ui/src/components/access/AccessFormLarkBotConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForLarkBot } from "@/domain/access";
type AccessFormLarkBotConfigFieldValues = Nullish<AccessConfigForLarkBot>;
export type AccessFormLarkBotConfigProps = {
export interface AccessFormLarkBotConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormLarkBotConfigFieldValues;
onValuesChange?: (values: AccessFormLarkBotConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormLarkBotConfigFieldValues => {
return {
ui/src/components/access/AccessFormLeCDNConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForLeCDN } from "@/domain/access";
type AccessFormLeCDNConfigFieldValues = Nullish<AccessConfigForLeCDN>;
export type AccessFormLeCDNConfigProps = {
export interface AccessFormLeCDNConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormLeCDNConfigFieldValues;
onValuesChange?: (values: AccessFormLeCDNConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormLeCDNConfigFieldValues => {
return {
ui/src/components/access/AccessFormMattermostConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForMattermost } from "@/domain/access";
type AccessFormMattermostConfigFieldValues = Nullish<AccessConfigForMattermost>;
export type AccessFormMattermostConfigProps = {
export interface AccessFormMattermostConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormMattermostConfigFieldValues;
onValuesChange?: (values: AccessFormMattermostConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormMattermostConfigFieldValues => {
return {
ui/src/components/access/AccessFormNS1Config.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForNS1 } from "@/domain/access";
type AccessFormNS1ConfigFieldValues = Nullish<AccessConfigForNS1>;
export type AccessFormNS1ConfigProps = {
export interface AccessFormNS1ConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormNS1ConfigFieldValues;
onValuesChange?: (values: AccessFormNS1ConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormNS1ConfigFieldValues => {
return {
ui/src/components/access/AccessFormNameDotComConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForNameDotCom } from "@/domain/access";
type AccessFormNameDotComConfigFieldValues = Nullish<AccessConfigForNameDotCom>;
export type AccessFormNameDotComConfigProps = {
export interface AccessFormNameDotComConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormNameDotComConfigFieldValues;
onValuesChange?: (values: AccessFormNameDotComConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormNameDotComConfigFieldValues => {
return {
ui/src/components/access/AccessFormNameSiloConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForNameSilo } from "@/domain/access";
type AccessFormNameSiloConfigFieldValues = Nullish<AccessConfigForNameSilo>;
export type AccessFormNameSiloConfigProps = {
export interface AccessFormNameSiloConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormNameSiloConfigFieldValues;
onValuesChange?: (values: AccessFormNameSiloConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormNameSiloConfigFieldValues => {
return {
ui/src/components/access/AccessFormNamecheapConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForNamecheap } from "@/domain/access";
type AccessFormNamecheapConfigFieldValues = Nullish<AccessConfigForNamecheap>;
export type AccessFormNamecheapConfigProps = {
export interface AccessFormNamecheapConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormNamecheapConfigFieldValues;
onValuesChange?: (values: AccessFormNamecheapConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormNamecheapConfigFieldValues => {
return {
ui/src/components/access/AccessFormNetcupConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForNetcup } from "@/domain/access";
type AccessFormNetcupConfigFieldValues = Nullish<AccessConfigForNetcup>;
export type AccessFormNetcupConfigProps = {
export interface AccessFormNetcupConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormNetcupConfigFieldValues;
onValuesChange?: (values: AccessFormNetcupConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormNetcupConfigFieldValues => {
return {
ui/src/components/access/AccessFormNetlifyConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForNetlify } from "@/domain/access";
type AccessFormNetlifyConfigFieldValues = Nullish<AccessConfigForNetlify>;
export type AccessFormNetlifyConfigProps = {
export interface AccessFormNetlifyConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormNetlifyConfigFieldValues;
onValuesChange?: (values: AccessFormNetlifyConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormNetlifyConfigFieldValues => {
return {
ui/src/components/access/AccessFormPorkbunConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForPorkbun } from "@/domain/access";
type AccessFormPorkbunConfigFieldValues = Nullish<AccessConfigForPorkbun>;
export type AccessFormPorkbunConfigProps = {
export interface AccessFormPorkbunConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormPorkbunConfigFieldValues;
onValuesChange?: (values: AccessFormPorkbunConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormPorkbunConfigFieldValues => {
return {
ui/src/components/access/AccessFormPowerDNSConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForPowerDNS } from "@/domain/access";
type AccessFormPowerDNSConfigFieldValues = Nullish<AccessConfigForPowerDNS>;
export type AccessFormPowerDNSConfigProps = {
export interface AccessFormPowerDNSConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormPowerDNSConfigFieldValues;
onValuesChange?: (values: AccessFormPowerDNSConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormPowerDNSConfigFieldValues => {
return {
ui/src/components/access/AccessFormProxmoxVEConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForProxmoxVE } from "@/domain/access";
type AccessFormProxmoxVEConfigFieldValues = Nullish<AccessConfigForProxmoxVE>;
export type AccessFormProxmoxVEConfigProps = {
export interface AccessFormProxmoxVEConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormProxmoxVEConfigFieldValues;
onValuesChange?: (values: AccessFormProxmoxVEConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormProxmoxVEConfigFieldValues => {
return {
ui/src/components/access/AccessFormQiniuConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForQiniu } from "@/domain/access";
type AccessFormQiniuConfigFieldValues = Nullish<AccessConfigForQiniu>;
export type AccessFormQiniuConfigProps = {
export interface AccessFormQiniuConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormQiniuConfigFieldValues;
onValuesChange?: (values: AccessFormQiniuConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormQiniuConfigFieldValues => {
return {
ui/src/components/access/AccessFormRainYunConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForRainYun } from "@/domain/access";
type AccessFormRainYunConfigFieldValues = Nullish<AccessConfigForRainYun>;
export type AccessFormRainYunConfigProps = {
export interface AccessFormRainYunConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormRainYunConfigFieldValues;
onValuesChange?: (values: AccessFormRainYunConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormRainYunConfigFieldValues => {
return {
ui/src/components/access/AccessFormRatPanelConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForRatPanel } from "@/domain/access";
type AccessFormRatPanelConfigFieldValues = Nullish<AccessConfigForRatPanel>;
export type AccessFormRatPanelConfigProps = {
export interface AccessFormRatPanelConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormRatPanelConfigFieldValues;
onValuesChange?: (values: AccessFormRatPanelConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormRatPanelConfigFieldValues => {
return {
ui/src/components/access/AccessFormSSHConfig.tsx
+5 -5
View File
@@ -1,6 +1,6 @@
import { useTranslation } from "react-i18next";
import { IconCircleArrowDown, IconCircleArrowUp, IconCircleMinus, IconCirclePlus } from "@tabler/icons-react";
import { Button, Collapse, Form, type FormInstance, Input, InputNumber, Select, Space } from "antd";
import { Button, Collapse, Form, type FormInstance, Input, InputNumber, Select } from "antd";
import { createSchemaFieldRule } from "antd-zod";
import { z } from "zod";
@@ -11,13 +11,13 @@ import { validDomainName, validIPv4Address, validIPv6Address, validPortNumber }
type AccessFormSSHConfigFieldValues = Nullish<AccessConfigForSSH>;
export type AccessFormSSHConfigProps = {
export interface AccessFormSSHConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormSSHConfigFieldValues;
onValuesChange?: (values: AccessFormSSHConfigFieldValues) => void;
};
}
const AUTH_METHOD_NONE = "none" as const;
const AUTH_METHOD_PASSWORD = "password" as const;
@@ -171,7 +171,7 @@ const AccessFormSSHConfig = ({ form: formInst, formName, disabled, initialValues
<Form.Item name="jumpServers" label={t("access.form.ssh_jump_servers.label")} rules={[formRule]}>
<Form.List name="jumpServers">
{(fields, { add, remove, move }) => (
<Space className="w-full" direction="vertical" size="small">
<div className="flex flex-col gap-2">
{fields?.length > 0 ? (
<Collapse
items={fields.map((field, index) => {
@@ -288,7 +288,7 @@ const AccessFormSSHConfig = ({ form: formInst, formName, disabled, initialValues
<Button className="w-full" type="dashed" icon={<IconCirclePlus size="1.25em" />} onClick={() => add(initFormModel())}>
{t("access.form.ssh_jump_servers.add")}
</Button>
</Space>
</div>
)}
</Form.List>
</Form.Item>
ui/src/components/access/AccessFormSSLComConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForSSLCom } from "@/domain/access";
type AccessFormSSLComConfigFieldValues = Nullish<AccessConfigForSSLCom>;
export type AccessFormSSLComConfigProps = {
export interface AccessFormSSLComConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormSSLComConfigFieldValues;
onValuesChange?: (values: AccessFormSSLComConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormSSLComConfigFieldValues => {
return {
ui/src/components/access/AccessFormSafeLineConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForSafeLine } from "@/domain/access";
type AccessFormSafeLineConfigFieldValues = Nullish<AccessConfigForSafeLine>;
export type AccessFormSafeLineConfigProps = {
export interface AccessFormSafeLineConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormSafeLineConfigFieldValues;
onValuesChange?: (values: AccessFormSafeLineConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormSafeLineConfigFieldValues => {
return {
ui/src/components/access/AccessFormSlackBotConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForSlackBot } from "@/domain/access";
type AccessFormSlackBotConfigFieldValues = Nullish<AccessConfigForSlackBot>;
export type AccessFormSlackBotConfigProps = {
export interface AccessFormSlackBotConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormSlackBotConfigFieldValues;
onValuesChange?: (values: AccessFormSlackBotConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormSlackBotConfigFieldValues => {
return {
ui/src/components/access/AccessFormSpaceshipConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForSpaceship } from "@/domain/access";
type AccessFormSpaceshipConfigFieldValues = Nullish<AccessConfigForSpaceship>;
export type AccessFormSpaceshipConfigProps = {
export interface AccessFormSpaceshipConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormSpaceshipConfigFieldValues;
onValuesChange?: (values: AccessFormSpaceshipConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormSpaceshipConfigFieldValues => {
return {
ui/src/components/access/AccessFormTelegramBotConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForTelegramBot } from "@/domain/access";
type AccessFormTelegramBotConfigFieldValues = Nullish<AccessConfigForTelegramBot>;
export type AccessFormTelegramBotConfigProps = {
export interface AccessFormTelegramBotConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormTelegramBotConfigFieldValues;
onValuesChange?: (values: AccessFormTelegramBotConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormTelegramBotConfigFieldValues => {
return {
ui/src/components/access/AccessFormTencentCloudConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForTencentCloud } from "@/domain/access";
type AccessFormTencentCloudConfigFieldValues = Nullish<AccessConfigForTencentCloud>;
export type AccessFormTencentCloudConfigProps = {
export interface AccessFormTencentCloudConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormTencentCloudConfigFieldValues;
onValuesChange?: (values: AccessFormTencentCloudConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormTencentCloudConfigFieldValues => {
return {
ui/src/components/access/AccessFormUCloudConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForUCloud } from "@/domain/access";
type AccessFormUCloudConfigFieldValues = Nullish<AccessConfigForUCloud>;
export type AccessFormUCloudConfigProps = {
export interface AccessFormUCloudConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormUCloudConfigFieldValues;
onValuesChange?: (values: AccessFormUCloudConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormUCloudConfigFieldValues => {
return {
ui/src/components/access/AccessFormUniCloudConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForUniCloud } from "@/domain/access";
type AccessFormUniCloudConfigFieldValues = Nullish<AccessConfigForUniCloud>;
export type AccessFormUniCloudConfigProps = {
export interface AccessFormUniCloudConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormUniCloudConfigFieldValues;
onValuesChange?: (values: AccessFormUniCloudConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormUniCloudConfigFieldValues => {
return {
ui/src/components/access/AccessFormUpyunConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForUpyun } from "@/domain/access";
type AccessFormUpyunConfigFieldValues = Nullish<AccessConfigForUpyun>;
export type AccessFormUpyunConfigProps = {
export interface AccessFormUpyunConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormUpyunConfigFieldValues;
onValuesChange?: (values: AccessFormUpyunConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormUpyunConfigFieldValues => {
return {
ui/src/components/access/AccessFormVercelConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForVercel } from "@/domain/access";
type AccessFormVercelConfigFieldValues = Nullish<AccessConfigForVercel>;
export type AccessFormVercelConfigProps = {
export interface AccessFormVercelConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormVercelConfigFieldValues;
onValuesChange?: (values: AccessFormVercelConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormVercelConfigFieldValues => {
return {
ui/src/components/access/AccessFormVolcEngineConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForVolcEngine } from "@/domain/access";
type AccessFormVolcEngineConfigFieldValues = Nullish<AccessConfigForVolcEngine>;
export type AccessFormVolcEngineConfigProps = {
export interface AccessFormVolcEngineConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormVolcEngineConfigFieldValues;
onValuesChange?: (values: AccessFormVolcEngineConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormVolcEngineConfigFieldValues => {
return {
ui/src/components/access/AccessFormWangsuConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForWangsu } from "@/domain/access";
type AccessFormWangsuConfigFieldValues = Nullish<AccessConfigForWangsu>;
export type AccessFormWangsuConfigProps = {
export interface AccessFormWangsuConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormWangsuConfigFieldValues;
onValuesChange?: (values: AccessFormWangsuConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormWangsuConfigFieldValues => {
return {
ui/src/components/access/AccessFormWeComBotConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForWeComBot } from "@/domain/access";
type AccessFormWeComBotConfigFieldValues = Nullish<AccessConfigForWeComBot>;
export type AccessFormWeComBotConfigProps = {
export interface AccessFormWeComBotConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormWeComBotConfigFieldValues;
onValuesChange?: (values: AccessFormWeComBotConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormWeComBotConfigFieldValues => {
return {
ui/src/components/access/AccessFormWebhookConfig.tsx
+2 -2
View File
@@ -10,14 +10,14 @@ import { type AccessConfigForWebhook } from "@/domain/access";
type AccessFormWebhookConfigFieldValues = Nullish<AccessConfigForWebhook>;
export type AccessFormWebhookConfigProps = {
export interface AccessFormWebhookConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormWebhookConfigFieldValues;
usage?: "deployment" | "notification" | "none";
onValuesChange?: (values: AccessFormWebhookConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormWebhookConfigFieldValues => {
return {
ui/src/components/access/AccessFormWestcnConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForWestcn } from "@/domain/access";
type AccessFormWestcnConfigFieldValues = Nullish<AccessConfigForWestcn>;
export type AccessFormWestcnConfigProps = {
export interface AccessFormWestcnConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormWestcnConfigFieldValues;
onValuesChange?: (values: AccessFormWestcnConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormWestcnConfigFieldValues => {
return {
ui/src/components/access/AccessFormZeroSSLConfig.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { type AccessConfigForZeroSSL } from "@/domain/access";
type AccessFormZeroSSLConfigFieldValues = Nullish<AccessConfigForZeroSSL>;
export type AccessFormZeroSSLConfigProps = {
export interface AccessFormZeroSSLConfigProps {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: AccessFormZeroSSLConfigFieldValues;
onValuesChange?: (values: AccessFormZeroSSLConfigFieldValues) => void;
};
}
const initFormModel = (): AccessFormZeroSSLConfigFieldValues => {
return {
ui/src/components/access/AccessSelect.tsx
+5 -7
View File
@@ -6,12 +6,10 @@ import { accessProvidersMap } from "@/domain/provider";
import { useZustandShallowSelector } from "@/hooks";
import { useAccessesStore } from "@/stores/access";
export type AccessTypeSelectProps = Omit<
SelectProps,
"filterOption" | "filterSort" | "labelRender" | "loading" | "options" | "optionFilterProp" | "optionLabelProp" | "optionRender"
> & {
export interface AccessTypeSelectProps
extends Omit<SelectProps, "filterOption" | "filterSort" | "labelRender" | "loading" | "options" | "optionFilterProp" | "optionLabelProp" | "optionRender"> {
filter?: (record: AccessModel) => boolean;
};
}
const AccessSelect = ({ filter, ...props }: AccessTypeSelectProps) => {
const { token: themeToken } = theme.useToken();
@@ -38,7 +36,7 @@ const AccessSelect = ({ filter, ...props }: AccessTypeSelectProps) => {
const access = accesses.find((e) => e.id === key);
if (!access) {
return (
<div className="flex items-center gap-2 overflow-hidden truncate">
<div className="flex items-center gap-2 truncate overflow-hidden">
<Avatar shape="square" size="small" />
<Typography.Text ellipsis>{key}</Typography.Text>
</div>
@@ -47,7 +45,7 @@ const AccessSelect = ({ filter, ...props }: AccessTypeSelectProps) => {
const provider = accessProvidersMap.get(access.provider);
return (
<div className="flex items-center gap-2 overflow-hidden truncate">
<div className="flex items-center gap-2 truncate overflow-hidden">
<Avatar shape="square" src={provider?.icon} size="small" />
<Typography.Text ellipsis>{access.name}</Typography.Text>
</div>
ui/src/components/certificate/CertificateDetail.tsx
+2 -2
View File
@@ -8,11 +8,11 @@ import { saveAs } from "file-saver";
import { archive as archiveCertificate } from "@/api/certificates";
import { CERTIFICATE_FORMATS, type CertificateFormatType, type CertificateModel } from "@/domain/certificate";
export type CertificateDetailProps = {
export interface CertificateDetailProps {
className?: string;
style?: React.CSSProperties;
data: CertificateModel;
};
}
const CertificateDetail = ({ data, ...props }: CertificateDetailProps) => {
const { t } = useTranslation();
ui/src/components/certificate/CertificateDetailDrawer.tsx
+2 -2
View File
@@ -6,13 +6,13 @@ import { type CertificateModel } from "@/domain/certificate";
import { useTriggerElement } from "@/hooks";
import CertificateDetail from "./CertificateDetail";
export type CertificateDetailDrawerProps = {
export interface CertificateDetailDrawerProps {
data?: CertificateModel;
loading?: boolean;
open?: boolean;
trigger?: React.ReactNode;
onOpenChange?: (open: boolean) => void;
};
}
const CertificateDetailDrawer = ({ data, loading, trigger, ...props }: CertificateDetailDrawerProps) => {
const [open, setOpen] = useControllableValue<boolean>(props, {
ui/src/components/notification/NotifyTemplate.tsx
+2 -2
View File
@@ -12,10 +12,10 @@ import { useAntdForm } from "@/hooks";
import { get as getSettings, save as saveSettings } from "@/repository/settings";
import { getErrMsg } from "@/utils/error";
export type NotifyTemplateFormProps = {
export interface NotifyTemplateFormProps {
className?: string;
style?: React.CSSProperties;
};
}
const NotifyTemplateForm = ({ className, style }: NotifyTemplateFormProps) => {
const { t } = useTranslation();
ui/src/components/notification/NotifyTestButton.tsx
+2 -2
View File
@@ -5,13 +5,13 @@ import { Button, type ButtonProps, message, notification } from "antd";
import { notifyTest } from "@/api/notify";
import { getErrMsg } from "@/utils/error";
export type NotifyTestButtonProps = {
export interface NotifyTestButtonProps {
className?: string;
style?: React.CSSProperties;
channel: string;
disabled?: boolean;
size?: ButtonProps["size"];
};
}
const NotifyTestButton = ({ className, style, channel, disabled, size }: NotifyTestButtonProps) => {
const { t } = useTranslation();
ui/src/components/provider/ACMEDns01ProviderPicker.tsx
-84
View File
@@ -1,84 +0,0 @@
import { memo, useEffect, useMemo, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { Avatar, Card, Col, Empty, Flex, Input, type InputRef, Row, Typography } from "antd";
import Show from "@/components/Show";
import { type ACMEDns01Provider, acmeDns01ProvidersMap } from "@/domain/provider";
export type ACMEDns01ProviderPickerProps = {
className?: string;
style?: React.CSSProperties;
autoFocus?: boolean;
filter?: (record: ACMEDns01Provider) => boolean;
placeholder?: string;
onSelect?: (value: string) => void;
};
const ACMEDns01ProviderPicker = ({ className, style, autoFocus, filter, placeholder, onSelect }: ACMEDns01ProviderPickerProps) => {
const { t } = useTranslation();
const [keyword, setKeyword] = useState<string>();
const keywordInputRef = useRef<InputRef>(null);
useEffect(() => {
if (autoFocus) {
setTimeout(() => keywordInputRef.current?.focus(), 1);
}
}, []);
const providers = useMemo(() => {
return Array.from(acmeDns01ProvidersMap.values())
.filter((provider) => {
if (filter) {
return filter(provider);
}
return true;
})
.filter((provider) => {
if (keyword) {
const value = keyword.toLowerCase();
return provider.type.toLowerCase().includes(value) || t(provider.name).toLowerCase().includes(value);
}
return true;
});
}, [filter, keyword]);
const handleProviderTypeSelect = (value: string) => {
onSelect?.(value);
};
return (
<div className={className} style={style}>
<Input.Search ref={keywordInputRef} placeholder={placeholder ?? t("common.text.search")} onChange={(e) => setKeyword(e.target.value.trim())} />
<div className="mt-4">
<Show when={providers.length > 0} fallback={<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}>
<Row gutter={[16, 16]}>
{providers.map((provider, index) => {
return (
<Col key={index} xs={24} md={12} span={12}>
<Card
className="h-16 w-full overflow-hidden shadow-xs"
styles={{ body: { height: "100%", padding: "0.5rem 1rem" } }}
hoverable
onClick={() => {
handleProviderTypeSelect(provider.type);
}}
>
<Flex className="size-full overflow-hidden" align="center" gap={8}>
<Avatar shape="square" src={provider.icon} size="small" />
<Typography.Text className="line-clamp-2 flex-1">{t(provider.name)}</Typography.Text>
</Flex>
</Card>
</Col>
);
})}
</Row>
</Show>
</div>
</div>
);
};
export default memo(ACMEDns01ProviderPicker);
ui/src/components/provider/ACMEDns01ProviderSelect.tsx
+5 -7
View File
@@ -1,15 +1,13 @@
import { memo, useMemo } from "react";
import { useMemo } from "react";
import { useTranslation } from "react-i18next";
import { Avatar, Select, type SelectProps, Typography, theme } from "antd";
import { type ACMEDns01Provider, acmeDns01ProvidersMap } from "@/domain/provider";
export type ACMEDns01ProviderSelectProps = Omit<
SelectProps,
"filterOption" | "filterSort" | "labelRender" | "options" | "optionFilterProp" | "optionLabelProp" | "optionRender"
> & {
export interface ACMEDns01ProviderSelectProps
extends Omit<SelectProps, "filterOption" | "filterSort" | "labelRender" | "options" | "optionFilterProp" | "optionLabelProp" | "optionRender"> {
filter?: (record: ACMEDns01Provider) => boolean;
};
}
const ACMEDns01ProviderSelect = ({ filter, ...props }: ACMEDns01ProviderSelectProps) => {
const { t } = useTranslation();
@@ -67,4 +65,4 @@ const ACMEDns01ProviderSelect = ({ filter, ...props }: ACMEDns01ProviderSelectPr
);
};
export default memo(ACMEDns01ProviderSelect);
export default ACMEDns01ProviderSelect;
ui/src/components/provider/AccessProviderPicker.tsx
+54 -37
View File
@@ -1,12 +1,13 @@
import { memo, useEffect, useMemo, useRef, useState } from "react";
import { useEffect, useMemo, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { Avatar, Card, Col, Empty, Flex, Input, type InputRef, Row, Tag, Typography } from "antd";
import { useSize } from "ahooks";
import { Avatar, Card, Empty, Input, type InputRef, Tag, Typography } from "antd";
import Show from "@/components/Show";
import { ACCESS_USAGES, type AccessProvider, type AccessUsageType, accessProvidersMap } from "@/domain/provider";
import { mergeCls } from "@/utils/css";
export type AccessProviderPickerProps = {
export interface AccessProviderPickerProps {
className?: string;
style?: React.CSSProperties;
autoFocus?: boolean;
@@ -14,11 +15,14 @@ export type AccessProviderPickerProps = {
placeholder?: string;
showOptionTags?: boolean | { [key in AccessUsageType]?: boolean };
onSelect?: (value: string) => void;
};
}
const AccessProviderPicker = ({ className, style, autoFocus, filter, placeholder, showOptionTags, onSelect }: AccessProviderPickerProps) => {
const { t } = useTranslation();
const wrapperRef = useRef<HTMLDivElement>(null);
const wrapperSize = useSize(wrapperRef);
const [keyword, setKeyword] = useState<string>();
const keywordInputRef = useRef<InputRef>(null);
useEffect(() => {
@@ -45,34 +49,45 @@ const AccessProviderPicker = ({ className, style, autoFocus, filter, placeholder
return true;
});
}, [filter, keyword]);
const providerCols = useMemo(() => {
if (!wrapperSize) {
return 1;
}
const cols = Math.floor(wrapperSize.width / 200);
return Math.min(9, Math.max(1, cols));
}, [wrapperSize]);
const showOptionTagForDNS = useMemo(() => {
return typeof showOptionTags === "object" ? !!showOptionTags[ACCESS_USAGES.DNS] : !!showOptionTags;
return typeof showOptionTags === "object" ? !!showOptionTags?.[ACCESS_USAGES.DNS] : !!showOptionTags;
}, [showOptionTags]);
const showOptionTagForHosting = useMemo(() => {
return typeof showOptionTags === "object" ? !!showOptionTags[ACCESS_USAGES.HOSTING] : !!showOptionTags;
return typeof showOptionTags === "object" ? !!showOptionTags?.[ACCESS_USAGES.HOSTING] : !!showOptionTags;
}, [showOptionTags]);
const showOptionTagForCA = useMemo(() => {
return typeof showOptionTags === "object" ? !!showOptionTags[ACCESS_USAGES.CA] : !!showOptionTags;
return typeof showOptionTags === "object" ? !!showOptionTags?.[ACCESS_USAGES.CA] : !!showOptionTags;
}, [showOptionTags]);
const showOptionTagForNotification = useMemo(() => {
return typeof showOptionTags === "object" ? !!showOptionTags[ACCESS_USAGES.NOTIFICATION] : !!showOptionTags;
return typeof showOptionTags === "object" ? !!showOptionTags?.[ACCESS_USAGES.NOTIFICATION] : !!showOptionTags;
}, [showOptionTags]);
const showOptionTagAnyhow = useMemo(() => {
return showOptionTagForDNS || showOptionTagForHosting || showOptionTagForCA || showOptionTagForNotification;
}, [showOptionTagForDNS, showOptionTagForHosting, showOptionTagForCA, showOptionTagForNotification]);
const handleProviderTypeSelect = (value: string) => {
onSelect?.(value);
};
return (
<div className={className} style={style}>
<div className={className} style={style} ref={wrapperRef}>
<Input.Search ref={keywordInputRef} placeholder={placeholder ?? t("common.text.search")} onChange={(e) => setKeyword(e.target.value.trim())} />
<div className="mt-4">
<Show when={providers.length > 0} fallback={<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}>
<Row gutter={[16, 16]}>
{providers.map((provider, index) => {
<div className={mergeCls("grid w-full gap-2", `grid-cols-${providerCols}`)}>
{providers.map((provider) => {
return (
<Col key={index} xs={24} md={12} span={8}>
<div key={provider.type}>
<Card
className={mergeCls("h-20 w-full overflow-hidden shadow-xs", provider.builtin ? " cursor-not-allowed" : "")}
styles={{ body: { height: "100%", padding: "0.5rem 1rem" } }}
@@ -85,40 +100,42 @@ const AccessProviderPicker = ({ className, style, autoFocus, filter, placeholder
handleProviderTypeSelect(provider.type);
}}
>
<Flex className="size-full overflow-hidden" align="center" gap={8}>
<Avatar shape="square" src={provider.icon} size="small" />
<div className="flex size-full items-center gap-4 overflow-hidden">
<Avatar className="bg-stone-100" icon={<img src={provider.icon} />} shape="square" size={28} />
<div className="flex-1 overflow-hidden">
<Typography.Text className="mb-1 line-clamp-1" type={provider.builtin ? "secondary" : undefined}>
{t(provider.name)}
</Typography.Text>
<div className="origin-left scale-75">
<Show when={provider.builtin}>
<Tag>{t("access.props.provider.builtin")}</Tag>
</Show>
<Show when={showOptionTagForDNS && provider.usages.includes(ACCESS_USAGES.DNS)}>
<Tag color="orange">{t("access.props.provider.usage.dns")}</Tag>
</Show>
<Show when={showOptionTagForHosting && provider.usages.includes(ACCESS_USAGES.HOSTING)}>
<Tag color="geekblue">{t("access.props.provider.usage.hosting")}</Tag>
</Show>
<Show when={showOptionTagForCA && provider.usages.includes(ACCESS_USAGES.CA)}>
<Tag color="magenta">{t("access.props.provider.usage.ca")}</Tag>
</Show>
<Show when={showOptionTagForNotification && provider.usages.includes(ACCESS_USAGES.NOTIFICATION)}>
<Tag color="cyan">{t("access.props.provider.usage.notification")}</Tag>
</Show>
<div className={mergeCls("max-w-full", showOptionTagAnyhow ? "mb-1 truncate" : "line-clamp-2")}>
<Typography.Text type={provider.builtin ? "secondary" : undefined}>{t(provider.name) || "\u00A0"}</Typography.Text>
</div>
<Show when={showOptionTagAnyhow}>
<div className="origin-left scale-80 whitespace-nowrap">
<Show when={provider.builtin}>
<Tag>{t("access.props.provider.builtin")}</Tag>
</Show>
<Show when={showOptionTagForDNS && provider.usages.includes(ACCESS_USAGES.DNS)}>
<Tag color="#d93f0b99">{t("access.props.provider.usage.dns")}</Tag>
</Show>
<Show when={showOptionTagForHosting && provider.usages.includes(ACCESS_USAGES.HOSTING)}>
<Tag color="#0052cc99">{t("access.props.provider.usage.hosting")}</Tag>
</Show>
<Show when={showOptionTagForCA && provider.usages.includes(ACCESS_USAGES.CA)}>
<Tag color="#0e8a1699">{t("access.props.provider.usage.ca")}</Tag>
</Show>
<Show when={showOptionTagForNotification && provider.usages.includes(ACCESS_USAGES.NOTIFICATION)}>
<Tag color="#1d76db99">{t("access.props.provider.usage.notification")}</Tag>
</Show>
</div>
</Show>
</div>
</Flex>
</div>
</Card>
</Col>
</div>
);
})}
</Row>
</div>
</Show>
</div>
</div>
);
};
export default memo(AccessProviderPicker);
export default AccessProviderPicker;
ui/src/components/provider/AccessProviderSelect.tsx
+11 -13
View File
@@ -1,17 +1,15 @@
import { memo, useMemo } from "react";
import { useMemo } from "react";
import { useTranslation } from "react-i18next";
import { Avatar, Select, type SelectProps, Tag, Typography, theme } from "antd";
import Show from "@/components/Show";
import { ACCESS_USAGES, type AccessProvider, type AccessUsageType, accessProvidersMap } from "@/domain/provider";
export type AccessProviderSelectProps = Omit<
SelectProps,
"filterOption" | "filterSort" | "labelRender" | "options" | "optionFilterProp" | "optionLabelProp" | "optionRender"
> & {
export interface AccessProviderSelectProps
extends Omit<SelectProps, "filterOption" | "filterSort" | "labelRender" | "options" | "optionFilterProp" | "optionLabelProp" | "optionRender"> {
filter?: (record: AccessProvider) => boolean;
showOptionTags?: boolean | { [key in AccessUsageType]?: boolean };
};
}
const AccessProviderSelect = ({ filter, showOptionTags, ...props }: AccessProviderSelectProps = { showOptionTags: true }) => {
const { t } = useTranslation();
@@ -37,16 +35,16 @@ const AccessProviderSelect = ({ filter, showOptionTags, ...props }: AccessProvid
}, [filter]);
const showOptionTagForDNS = useMemo(() => {
return typeof showOptionTags === "object" ? !!showOptionTags[ACCESS_USAGES.DNS] : !!showOptionTags;
return typeof showOptionTags === "object" ? !!showOptionTags?.[ACCESS_USAGES.DNS] : !!showOptionTags;
}, [showOptionTags]);
const showOptionTagForHosting = useMemo(() => {
return typeof showOptionTags === "object" ? !!showOptionTags[ACCESS_USAGES.HOSTING] : !!showOptionTags;
return typeof showOptionTags === "object" ? !!showOptionTags?.[ACCESS_USAGES.HOSTING] : !!showOptionTags;
}, [showOptionTags]);
const showOptionTagForCA = useMemo(() => {
return typeof showOptionTags === "object" ? !!showOptionTags[ACCESS_USAGES.CA] : !!showOptionTags;
return typeof showOptionTags === "object" ? !!showOptionTags?.[ACCESS_USAGES.CA] : !!showOptionTags;
}, [showOptionTags]);
const showOptionTagForNotification = useMemo(() => {
return typeof showOptionTags === "object" ? !!showOptionTags[ACCESS_USAGES.NOTIFICATION] : !!showOptionTags;
return typeof showOptionTags === "object" ? !!showOptionTags?.[ACCESS_USAGES.NOTIFICATION] : !!showOptionTags;
}, [showOptionTags]);
const renderOption = (key: string) => {
@@ -55,11 +53,11 @@ const AccessProviderSelect = ({ filter, showOptionTags, ...props }: AccessProvid
<div className="flex max-w-full items-center justify-between gap-4 overflow-hidden">
<div className="flex items-center gap-2 truncate overflow-hidden">
<Avatar shape="square" src={provider.icon} size="small" />
<Typography.Text type={provider.builtin ? "secondary" : undefined} ellipsis>
<Typography.Text className="flex-1 truncate overflow-hidden" type={provider.builtin ? "secondary" : undefined} ellipsis>
{t(provider.name)}
</Typography.Text>
</div>
<div className="origin-right scale-75">
<div className="origin-right scale-75 whitespace-nowrap">
<Show when={provider.builtin}>
<Tag>{t("access.props.provider.builtin")}</Tag>
</Show>
@@ -104,4 +102,4 @@ const AccessProviderSelect = ({ filter, showOptionTags, ...props }: AccessProvid
);
};
export default memo(AccessProviderSelect);
export default AccessProviderSelect;
ui/src/components/provider/CAProviderSelect.tsx
+5 -7
View File
@@ -1,15 +1,13 @@
import { memo, useMemo } from "react";
import { useMemo } from "react";
import { useTranslation } from "react-i18next";
import { Avatar, Select, type SelectProps, Typography, theme } from "antd";
import { type CAProvider, caProvidersMap } from "@/domain/provider";
export type CAProviderSelectProps = Omit<
SelectProps,
"filterOption" | "filterSort" | "labelRender" | "options" | "optionFilterProp" | "optionLabelProp" | "optionRender"
> & {
export interface CAProviderSelectProps
extends Omit<SelectProps, "filterOption" | "filterSort" | "labelRender" | "options" | "optionFilterProp" | "optionLabelProp" | "optionRender"> {
filter?: (record: CAProvider) => boolean;
};
}
const CAProviderSelect = ({ filter, ...props }: CAProviderSelectProps) => {
const { t } = useTranslation();
@@ -86,4 +84,4 @@ const CAProviderSelect = ({ filter, ...props }: CAProviderSelectProps) => {
);
};
export default memo(CAProviderSelect);
export default CAProviderSelect;
ui/src/components/provider/DeploymentProviderPicker.tsx
+32 -15
View File
@@ -1,22 +1,27 @@
import { memo, useEffect, useMemo, useRef, useState } from "react";
import { useEffect, useMemo, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { Avatar, Card, Col, Empty, Flex, Input, type InputRef, Row, Tabs, Tooltip, Typography } from "antd";
import { useSize } from "ahooks";
import { Avatar, Card, Empty, Flex, Input, type InputRef, Tabs, Tooltip, Typography } from "antd";
import Show from "@/components/Show";
import { DEPLOYMENT_CATEGORIES, type DeploymentProvider, deploymentProvidersMap } from "@/domain/provider";
import { mergeCls } from "@/utils/css";
export type DeploymentProviderPickerProps = {
export interface DeploymentProviderPickerProps {
className?: string;
style?: React.CSSProperties;
autoFocus?: boolean;
filter?: (record: DeploymentProvider) => boolean;
placeholder?: string;
onSelect?: (value: string) => void;
};
}
const DeploymentProviderPicker = ({ className, style, autoFocus, filter, placeholder, onSelect }: DeploymentProviderPickerProps) => {
const { t } = useTranslation();
const wrapperRef = useRef<HTMLDivElement>(null);
const wrapperSize = useSize(wrapperRef);
const [category, setCategory] = useState<string>(DEPLOYMENT_CATEGORIES.ALL);
const [keyword, setKeyword] = useState<string>();
@@ -52,13 +57,21 @@ const DeploymentProviderPicker = ({ className, style, autoFocus, filter, placeho
return true;
});
}, [filter, category, keyword]);
const providerCols = useMemo(() => {
if (!wrapperSize) {
return 1;
}
const cols = Math.floor(wrapperSize.width / 320);
return Math.min(9, Math.max(1, cols));
}, [wrapperSize]);
const handleProviderTypeSelect = (value: string) => {
onSelect?.(value);
};
return (
<div className={className} style={style}>
<div className={className} style={style} ref={wrapperRef}>
<Input.Search ref={keywordInputRef} placeholder={placeholder ?? t("common.text.search")} onChange={(e) => setKeyword(e.target.value.trim())} />
<div className="mt-4">
@@ -91,10 +104,10 @@ const DeploymentProviderPicker = ({ className, style, autoFocus, filter, placeho
<div className="flex-1">
<Show when={providers.length > 0} fallback={<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}>
<Row gutter={[16, 16]}>
{providers.map((provider, index) => {
<div className={mergeCls("grid w-full gap-2", `grid-cols-${providerCols}`)}>
{providers.map((provider) => {
return (
<Col key={index} xs={24} md={12} span={12}>
<div key={provider.type}>
<Card
className="h-16 w-full overflow-hidden shadow-xs"
styles={{ body: { height: "100%", padding: "0.5rem 1rem" } }}
@@ -104,16 +117,20 @@ const DeploymentProviderPicker = ({ className, style, autoFocus, filter, placeho
}}
>
<Tooltip title={t(provider.name)} mouseEnterDelay={1}>
<Flex className="size-full overflow-hidden" align="center" gap={8}>
<Avatar shape="square" src={provider.icon} size="small" />
<Typography.Text className="line-clamp-2 flex-1">{t(provider.name)}</Typography.Text>
</Flex>
<div className="flex size-full items-center gap-4 overflow-hidden">
<Avatar className="bg-stone-100" icon={<img src={provider.icon} />} shape="square" size={28} />
<div className="flex-1 overflow-hidden">
<div className="mb-1 line-clamp-2 max-w-full">
<Typography.Text>{t(provider.name) || "\u00A0"}</Typography.Text>
</div>
</div>
</div>
</Tooltip>
</Card>
</Col>
</div>
);
})}
</Row>
</div>
</Show>
</div>
</Flex>
@@ -122,4 +139,4 @@ const DeploymentProviderPicker = ({ className, style, autoFocus, filter, placeho
);
};
export default memo(DeploymentProviderPicker);
export default DeploymentProviderPicker;
ui/src/components/provider/DeploymentProviderSelect.tsx
+5 -7
View File
@@ -1,15 +1,13 @@
import { memo, useMemo } from "react";
import { useMemo } from "react";
import { useTranslation } from "react-i18next";
import { Avatar, Select, type SelectProps, Typography, theme } from "antd";
import { type DeploymentProvider, deploymentProvidersMap } from "@/domain/provider";
export type DeploymentProviderSelectProps = Omit<
SelectProps,
"filterOption" | "filterSort" | "labelRender" | "options" | "optionFilterProp" | "optionLabelProp" | "optionRender"
> & {
export interface DeploymentProviderSelectProps
extends Omit<SelectProps, "filterOption" | "filterSort" | "labelRender" | "options" | "optionFilterProp" | "optionLabelProp" | "optionRender"> {
filter?: (record: DeploymentProvider) => boolean;
};
}
const DeploymentProviderSelect = ({ filter, ...props }: DeploymentProviderSelectProps) => {
const { t } = useTranslation();
@@ -67,4 +65,4 @@ const DeploymentProviderSelect = ({ filter, ...props }: DeploymentProviderSelect
);
};
export default memo(DeploymentProviderSelect);
export default DeploymentProviderSelect;

Some files were not shown because too many files have changed in this diff Show More