Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-07-24 15:59:41 +02:00
Code Issues Releases Activity

refactor(namespace): migrate namespace access view to react [r8s-141] (#87)

Browse source
This commit is contained in:
Ali 2024-11-11 08:17:20 +13:00 • committed by GitHub
parent 8ed7cd80cb
commit e9fc6d5598
62 changed files with 1018 additions and 610 deletions
Download patch file Download diff file Expand all files Collapse all files

32
app/react/kubernetes/namespaces/AccessView/NamespaceAccessUsersSelector.tsx
View file

@ -3,14 +3,13 @@ import { OptionProps, components, MultiValueGenericProps } from 'react-select';
import { Select } from '@@/form-components/ReactSelect';
type Role = { Name: string };
type Option = { Type: 'user' | 'team'; Id: number; Name: string; Role: Role };
import { EnvironmentAccess } from './types';
interface Props {
name?: string;
value: Option[];
onChange(value: readonly Option[]): void;
options: Option[];
value: EnvironmentAccess[];
onChange(value: readonly EnvironmentAccess[]): void;
options: EnvironmentAccess[];
dataCy: string;
inputId?: string;
placeholder?: string;
@ -29,8 +28,8 @@ export function NamespaceAccessUsersSelector({
<Select
isMulti
name={name}
getOptionLabel={(option) => option.Name}
getOptionValue={(option) => `${option.Id}-${option.Type}`}
getOptionLabel={(option) => option.name}
getOptionValue={(option) => `${option.id}-${option.type}`}
options={options}
value={value}
closeMenuOnSelect={false}
@ -43,11 +42,14 @@ export function NamespaceAccessUsersSelector({
);
}
function isOption(option: unknown): option is Option {
return !!option && typeof option === 'object' && 'Type' in option;
function isOption(option: unknown): option is EnvironmentAccess {
return !!option && typeof option === 'object' && 'type' in option;
}
function OptionComponent({ data, ...props }: OptionProps<Option, true>) {
function OptionComponent({
data,
...props
}: OptionProps<EnvironmentAccess, true>) {
return (
// eslint-disable-next-line react/jsx-props-no-spreading
<components.Option data={data} {...props}>
@ -59,7 +61,7 @@ function OptionComponent({ data, ...props }: OptionProps<Option, true>) {
function MultiValueLabel({
data,
...props
}: MultiValueGenericProps<Option, true>) {
}: MultiValueGenericProps<EnvironmentAccess, true>) {
return (
// eslint-disable-next-line react/jsx-props-no-spreading
<components.MultiValueLabel data={data} {...props}>
@ -68,15 +70,15 @@ function MultiValueLabel({
);
}
function Label({ option }: { option: Option }) {
const Icon = option.Type === 'user' ? UserIcon : TeamIcon;
function Label({ option }: { option: EnvironmentAccess }) {
const Icon = option.type === 'user' ? UserIcon : TeamIcon;
return (
<div className="flex items-center gap-1">
<Icon />
<span>{option.Name}</span>
<span>{option.name}</span>
<span>|</span>
<span>{option.Role.Name}</span>
<span>{option.role.name}</span>
</div>
);
}