jiazhizhong/certimate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): new AccessProviderSelect component using antd

Browse Source
This commit is contained in:
Fu Diwei
2024-12-12 16:49:12 +08:00
parent 220d98a668
commit b5739c663d
10 changed files with 74 additions and 578 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
ui/src/components/access/AccessProviderSelect.tsx Normal file
View File

@@ -0,0 +1,48 @@
import React from "react";
import { useTranslation } from "react-i18next";
import { Avatar, Select, Space, Typography, type SelectProps } from "antd";
import { accessProvidersMap } from "@/domain/access";
export type AccessProviderSelectProps = Omit<SelectProps, "options" | "optionFilterProp" | "optionLabelProp" | "optionRender"> & {
className?: string;
};
const AccessProviderSelect = React.memo((props: AccessProviderSelectProps) => {
const { t } = useTranslation();
const options = Array.from(accessProvidersMap.values()).map((item) => ({
key: item.type,
value: item.type,
label: t(item.name),
}));
return (
<Select
{...props}
labelRender={({ label, value }) => {
if (label) {
return (
<Space className="max-w-full truncate" align="center" size={4}>
<Avatar src={accessProvidersMap.get(String(value))?.icon} size="small" />
{label}
</Space>
);
}
return <Typography.Text type="secondary">{props.placeholder}</Typography.Text>;
}}
options={options}
optionFilterProp={undefined}
optionLabelProp={undefined}
optionRender={(option) => (
<Space className="max-w-full truncate" align="center" size={4}>
<Avatar src={accessProvidersMap.get(option.data.value)?.icon} size="small" />
<Typography.Text ellipsis>{t(accessProvidersMap.get(option.data.value)?.name ?? "")}</Typography.Text>
</Space>
)}
/>
);
});
export default AccessProviderSelect;

10
ui/src/components/certimate/AccessEditDialog.tsx
View File

@@ -5,6 +5,7 @@ import { cn } from "@/components/ui/utils";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import { ScrollArea } from "@/components/ui/scroll-area";
import AccessProviderSelect from "@/components/access/AccessProviderSelect";
import AccessAliyunForm from "./AccessAliyunForm";
import AccessTencentForm from "./AccessTencentForm";
import AccessHuaweiCloudForm from "./AccessHuaweicloudForm";
@@ -24,7 +25,6 @@ import AccessKubernetesForm from "./AccessKubernetesForm";
import AccessVolcengineForm from "./AccessVolcengineForm";
import AccessByteplusForm from "./AccessByteplusForm";
import { AccessModel } from "@/domain/access";
import { AccessTypeSelect } from "./AccessTypeSelect";
type AccessEditProps = {
op: "add" | "edit" | "copy";
@@ -284,14 +284,14 @@ const AccessEditDialog = ({ trigger, op, data, className, outConfigType }: Acces
<div className="container py-3">
<div>
<Label>{t("access.authorization.form.type.label")}</Label>
<AccessTypeSelect
<AccessProviderSelect
className="w-full mt-3"
placeholder={t("access.authorization.form.type.placeholder")}
value={configType}
showSearch={true}
onChange={(val) => {
setConfigType(val);
}}
className="w-full mt-3"
placeholder={t("access.authorization.form.type.placeholder")}
searchPlaceholder={t("access.authorization.form.type.search.placeholder")}
/>
</div>

80
ui/src/components/certimate/AccessTypeSelect.tsx
View File

@@ -1,80 +0,0 @@
import { Check, ChevronsUpDown } from "lucide-react";
import { cn } from "@/components/ui/utils";
import { Button } from "@/components/ui/button";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { accessProvidersMap } from "@/domain/access";
import { useTranslation } from "react-i18next";
import { useEffect, useState } from "react";
type AccessTypeSelectProps = {
value: string;
onChange: (value: string) => void;
placeholder: string;
searchPlaceholder: string;
className?: string;
};
export function AccessTypeSelect({ value, onChange, placeholder, searchPlaceholder, className }: AccessTypeSelectProps) {
const [open, setOpen] = useState(false);
const [locValue, setLocValue] = useState("");
const { t } = useTranslation();
const [search, setSearch] = useState("");
const filteredProviders = Array.from(accessProvidersMap.entries());
useEffect(() => {
setLocValue(value);
}, [value]);
const handleOnSelect = (currentValue: string) => {
const newValue = currentValue === locValue ? "" : currentValue;
setLocValue(newValue);
setSearch("");
setOpen(false);
onChange(newValue);
};
return (
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button variant="outline" role="combobox" aria-expanded={open} className={cn("justify-between z-50", className)}>
{locValue ? (
<div className="flex space-x-2 items-center">
<img src={accessProvidersMap.get(locValue)?.icon} className="h-6 w-6" />
<div>{t(accessProvidersMap.get(locValue)?.name ?? "")}</div>
</div>
) : (
<>{placeholder}</>
)}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent className={cn("p-0 w-full")}>
<Command className="">
<CommandInput
placeholder={searchPlaceholder}
value={search}
onValueChange={(val: string) => {
setSearch(val);
}}
/>
<CommandList>
<CommandEmpty>{t("access.authorization.form.type.search.notfound")}</CommandEmpty>
<CommandGroup>
{filteredProviders.map(([key, provider]) => (
<CommandItem key={key} value={key} onSelect={handleOnSelect} keywords={provider.searchContent.split(":")}>
<Check className={cn("mr-2 h-4 w-4", locValue === key ? "opacity-100" : "opacity-0")} />
<div className="flex space-x-2">
<img src={provider.icon} className="h-6 w-6" />
<div className="font-medium">{t(provider.name)}</div>
</div>
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
);
}

105
ui/src/components/ui/command.tsx
View File

@@ -1,105 +0,0 @@
import * as React from "react";
import { type DialogProps } from "@radix-ui/react-dialog";
import { Command as CommandPrimitive } from "cmdk";
import { Search } from "lucide-react";
import { cn } from "./utils";
import { Dialog, DialogContent } from "@/components/ui/dialog";
const Command = React.forwardRef<React.ElementRef<typeof CommandPrimitive>, React.ComponentPropsWithoutRef<typeof CommandPrimitive>>(
({ className, ...props }, ref) => (
<CommandPrimitive
ref={ref}
className={cn("flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground", className)}
{...props}
/>
)
);
Command.displayName = CommandPrimitive.displayName;
interface CommandDialogProps extends DialogProps {}
const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
return (
<Dialog {...props}>
<DialogContent className="overflow-hidden p-0 shadow-lg">
<Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
{children}
</Command>
</DialogContent>
</Dialog>
);
};
const CommandInput = React.forwardRef<React.ElementRef<typeof CommandPrimitive.Input>, React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>>(
({ className, ...props }, ref) => (
<div className="flex items-center border-b px-3" cmdk-input-wrapper="">
<Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
<CommandPrimitive.Input
ref={ref}
className={cn(
"flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
className
)}
{...props}
/>
</div>
)
);
CommandInput.displayName = CommandPrimitive.Input.displayName;
const CommandList = React.forwardRef<React.ElementRef<typeof CommandPrimitive.List>, React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>>(
({ className, ...props }, ref) => <CommandPrimitive.List ref={ref} className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)} {...props} />
);
CommandList.displayName = CommandPrimitive.List.displayName;
const CommandEmpty = React.forwardRef<React.ElementRef<typeof CommandPrimitive.Empty>, React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>>(
(props, ref) => <CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />
);
CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
const CommandGroup = React.forwardRef<React.ElementRef<typeof CommandPrimitive.Group>, React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>>(
({ className, ...props }, ref) => (
<CommandPrimitive.Group
ref={ref}
className={cn(
"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
className
)}
{...props}
/>
)
);
CommandGroup.displayName = CommandPrimitive.Group.displayName;
const CommandSeparator = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Separator>,
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
>(({ className, ...props }, ref) => <CommandPrimitive.Separator ref={ref} className={cn("-mx-1 h-px bg-border", className)} {...props} />);
CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
const CommandItem = React.forwardRef<React.ElementRef<typeof CommandPrimitive.Item>, React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>>(
({ className, ...props }, ref) => (
<CommandPrimitive.Item
ref={ref}
className={cn(
"relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
className
)}
{...props}
/>
)
);
CommandItem.displayName = CommandPrimitive.Item.displayName;
const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
return <span className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)} {...props} />;
};
CommandShortcut.displayName = "CommandShortcut";
export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator };

43
ui/src/domain/access.ts
View File

@@ -8,32 +8,29 @@ type AccessProvider = {
name: string;
icon: string;
usage: AccessUsages;
searchContent: string;
};
export const accessProviders = [
["aliyun", "common.provider.aliyun", "/imgs/providers/aliyun.svg", "all", "阿里云:alibaba cloud"],
["tencent", "common.provider.tencent", "/imgs/providers/tencent.svg", "all", "腾讯云:tencent cloud"],
["huaweicloud", "common.provider.huaweicloud", "/imgs/providers/huaweicloud.svg", "all", "华为云:huawei cloud"],
["baiducloud", "common.provider.baiducloud", "/imgs/providers/baiducloud.svg", "all", "百度智能云:百度云:baidu cloud"],
["qiniu", "common.provider.qiniu", "/imgs/providers/qiniu.svg", "deploy", "七牛云:qiniu"],
["dogecloud", "common.provider.dogecloud", "/imgs/providers/dogecloud.svg", "deploy", "多吉云:doge cloud"],
["volcengine", "common.provider.volcengine", "/imgs/providers/volcengine.svg", "all", "火山引擎:volcengine"],
["byteplus", "common.provider.byteplus", "/imgs/providers/byteplus.svg", "all", "BytePlus"],
["aws", "common.provider.aws", "/imgs/providers/aws.svg", "apply", "亚马逊:amazon:aws"],
["cloudflare", "common.provider.cloudflare", "/imgs/providers/cloudflare.svg", "apply", "cloudflare:cf:cloud flare"],
["namesilo", "common.provider.namesilo", "/imgs/providers/namesilo.svg", "apply", "namesilo"],
["godaddy", "common.provider.godaddy", "/imgs/providers/godaddy.svg", "apply", "godaddy"],
["pdns", "common.provider.pdns", "/imgs/providers/pdns.svg", "apply", "powerdns:pdns"],
["httpreq", "common.provider.httpreq", "/imgs/providers/httpreq.svg", "apply", "httpreq"],
["local", "common.provider.local", "/imgs/providers/local.svg", "deploy", "local:bendi:本地"],
["ssh", "common.provider.ssh", "/imgs/providers/ssh.svg", "deploy", "ssh"],
["webhook", "common.provider.webhook", "/imgs/providers/webhook.svg", "deploy", "webhook"],
["k8s", "common.provider.kubernetes", "/imgs/providers/k8s.svg", "deploy", "k8s:kubernetes"],
];
export const accessProvidersMap: Map<AccessProvider["type"], AccessProvider> = new Map(
accessProviders.map(([type, name, icon, usage, searchContent]) => [type, { type, name, icon, usage: usage as AccessUsages, searchContent: searchContent }])
[
["aliyun", "common.provider.aliyun", "/imgs/providers/aliyun.svg", "all"],
["tencent", "common.provider.tencent", "/imgs/providers/tencent.svg", "all"],
["huaweicloud", "common.provider.huaweicloud", "/imgs/providers/huaweicloud.svg", "all"],
["baiducloud", "common.provider.baiducloud", "/imgs/providers/baiducloud.svg", "all"],
["qiniu", "common.provider.qiniu", "/imgs/providers/qiniu.svg", "deploy"],
["dogecloud", "common.provider.dogecloud", "/imgs/providers/dogecloud.svg", "deploy"],
["volcengine", "common.provider.volcengine", "/imgs/providers/volcengine.svg", "all"],
["byteplus", "common.provider.byteplus", "/imgs/providers/byteplus.svg", "all"],
["aws", "common.provider.aws", "/imgs/providers/aws.svg", "apply"],
["cloudflare", "common.provider.cloudflare", "/imgs/providers/cloudflare.svg", "apply"],
["namesilo", "common.provider.namesilo", "/imgs/providers/namesilo.svg", "apply"],
["godaddy", "common.provider.godaddy", "/imgs/providers/godaddy.svg", "apply"],
["pdns", "common.provider.pdns", "/imgs/providers/pdns.svg", "apply"],
["httpreq", "common.provider.httpreq", "/imgs/providers/httpreq.svg", "apply"],
["local", "common.provider.local", "/imgs/providers/local.svg", "deploy"],
["ssh", "common.provider.ssh", "/imgs/providers/ssh.svg", "deploy"],
["webhook", "common.provider.webhook", "/imgs/providers/webhook.svg", "deploy"],
["k8s", "common.provider.kubernetes", "/imgs/providers/k8s.svg", "deploy"],
].map(([type, name, icon, usage]) => [type, { type, name, icon, usage: usage as AccessUsages }])
);
export const accessTypeFormSchema = z.union(

1
ui/src/i18n/locales/en/nls.access.json
View File

@@ -16,7 +16,6 @@
"access.authorization.form.type.label": "Provider",
"access.authorization.form.type.placeholder": "Please select a provider",
"access.authorization.form.type.search.placeholder": "Search provider ...",
"access.authorization.form.type.search.notfound": "Provider not found",
"access.authorization.form.type.list": "Authorization List",
"access.authorization.form.name.label": "Name",

1
ui/src/i18n/locales/zh/nls.access.json
View File

@@ -16,7 +16,6 @@
"access.authorization.form.type.label": "服务商",
"access.authorization.form.type.placeholder": "请选择服务商",
"access.authorization.form.type.search.placeholder": "搜索服务商",
"access.authorization.form.type.search.notfound": "未找到服务商",
"access.authorization.form.type.list": "服务商列表",
"access.authorization.form.name.label": "名称",

2
ui/src/pages/accesses/AccessList.tsx
View File

@@ -40,7 +40,7 @@ const AccessList = () => {
ellipsis: true,
render: (_, record) => {
return (
<Space className="max-w-full truncate" size={4}>
<Space className="max-w-full truncate" align="center" size={4}>
<Avatar src={accessProvidersMap.get(record.configType)?.icon} size="small" />
<Typography.Text ellipsis>{t(accessProvidersMap.get(record.configType)?.name ?? "")}</Typography.Text>
</Space>