From 3a30c8ed1e403c1632baa46d7bee5783a190c7f7 Mon Sep 17 00:00:00 2001 From: Chaim Lev-Ari Date: Sun, 19 Mar 2023 13:37:44 +0100 Subject: [PATCH] fix(ui/box-selector): BE link and use icons standard size [EE-5133] (#8659) --- .../ldap/ldap-settings/ldap-settings.html | 1 + .../BoxSelector/BoxSelectorItem.tsx | 29 ++++++++++++------- .../BoxSelector/LimitedToBeIndicator.tsx | 18 ++++++------ .../common-options/deployment-methods.tsx | 2 ++ .../EdgeStackDeploymentTypeSelector.tsx | 1 + .../InternalAuth/options.tsx | 8 +++-- .../AuthenticationView/ldap-options.tsx | 6 ++-- .../AuthenticationView/oauth-options.tsx | 8 +++-- 8 files changed, 44 insertions(+), 29 deletions(-) diff --git a/app/portainer/settings/authentication/ldap/ldap-settings/ldap-settings.html b/app/portainer/settings/authentication/ldap/ldap-settings/ldap-settings.html index 95416ac92..d6b889385 100644 --- a/app/portainer/settings/authentication/ldap/ldap-settings/ldap-settings.html +++ b/app/portainer/settings/authentication/ldap/ldap-settings/ldap-settings.html @@ -14,6 +14,7 @@ value="$ctrl.settings.ServerType" options="$ctrl.boxSelectorOptions" on-change="($ctrl.onChangeServerType)" + slim="true" > ({ slim = false, checkIcon = Check, }: Props) { - const limitedToBE = isLimitedToBE(option.feature); + const { limitedToBE = false, url: featureUrl } = getFeatureDetails( + option.feature + ); const beIndicatorTooltipId = `box-selector-item-${radioName}-${option.id}-limited`; @@ -57,7 +59,12 @@ export function BoxSelectorItem({ type={type} checkIcon={checkIcon} > - {limitedToBE && } + {limitedToBE && ( + + )}
({ return ; } - if (option.iconType === 'logo') { - return ; + if (option.iconType === 'raw') { + return ( + + ); } - return ( - - ); + return ; } } diff --git a/app/react/components/BoxSelector/LimitedToBeIndicator.tsx b/app/react/components/BoxSelector/LimitedToBeIndicator.tsx index f0b850272..ad992a5e7 100644 --- a/app/react/components/BoxSelector/LimitedToBeIndicator.tsx +++ b/app/react/components/BoxSelector/LimitedToBeIndicator.tsx @@ -1,24 +1,24 @@ import { HelpCircle } from 'lucide-react'; import clsx from 'clsx'; -import { FeatureId } from '@/react/portainer/feature-flags/enums'; - import { TooltipWithChildren } from '@@/Tip/TooltipWithChildren'; -import { getFeatureDetails } from '@@/BEFeatureIndicator/utils'; interface Props { tooltipId: string; - featureId?: FeatureId; + url?: string; } -export function LimitedToBeIndicator({ featureId, tooltipId }: Props) { - const { url } = getFeatureDetails(featureId); - +export function LimitedToBeIndicator({ tooltipId, url }: Props) { return (
- - BE Feature + + BE Feature = { label: 'Kubernetes', description: 'Kubernetes manifest format', value: 'kubernetes', + iconType: 'logo', }; export const compose: BoxSelectorOption<'compose'> = { @@ -17,4 +18,5 @@ export const compose: BoxSelectorOption<'compose'> = { label: 'Compose', description: 'docker-compose format', value: 'compose', + iconType: 'logo', }; diff --git a/app/react/edge/edge-stacks/components/EdgeStackDeploymentTypeSelector.tsx b/app/react/edge/edge-stacks/components/EdgeStackDeploymentTypeSelector.tsx index 1ca5f83c7..85a2423fe 100644 --- a/app/react/edge/edge-stacks/components/EdgeStackDeploymentTypeSelector.tsx +++ b/app/react/edge/edge-stacks/components/EdgeStackDeploymentTypeSelector.tsx @@ -40,6 +40,7 @@ export function EdgeStackDeploymentTypeSelector({ hasDockerEndpoint ? 'Cannot use this option with Edge Docker environments' : '', + iconType: 'logo', }, ]; diff --git a/app/react/portainer/settings/AuthenticationView/InternalAuth/options.tsx b/app/react/portainer/settings/AuthenticationView/InternalAuth/options.tsx index 17cd50404..0155d68f2 100644 --- a/app/react/portainer/settings/AuthenticationView/InternalAuth/options.tsx +++ b/app/react/portainer/settings/AuthenticationView/InternalAuth/options.tsx @@ -5,12 +5,11 @@ import Microsoft from '@/assets/ico/vendor/microsoft.svg?c'; import Ldap from '@/assets/ico/ldap.svg?c'; import OAuth from '@/assets/ico/oauth.svg?c'; -import { BadgeIcon } from '@@/BadgeIcon'; - export const options = [ { id: 'auth_internal', - icon: , + icon: ArrowDownCircle, + iconType: 'badge', label: 'Internal', description: 'Internal authentication mechanism', value: 1, @@ -20,6 +19,7 @@ export const options = [ icon: Ldap, label: 'LDAP', description: 'LDAP authentication', + iconType: 'logo', value: 2, }, { @@ -27,6 +27,7 @@ export const options = [ icon: Microsoft, label: 'Microsoft Active Directory', description: 'AD authentication', + iconType: 'logo', value: 4, feature: FeatureId.HIDE_INTERNAL_AUTH, }, @@ -35,6 +36,7 @@ export const options = [ icon: OAuth, label: 'OAuth', description: 'OAuth authentication', + iconType: 'logo', value: 3, }, ]; diff --git a/app/react/portainer/settings/AuthenticationView/ldap-options.tsx b/app/react/portainer/settings/AuthenticationView/ldap-options.tsx index d76fab961..e46fecda0 100644 --- a/app/react/portainer/settings/AuthenticationView/ldap-options.tsx +++ b/app/react/portainer/settings/AuthenticationView/ldap-options.tsx @@ -3,8 +3,6 @@ import { Edit } from 'lucide-react'; import { FeatureId } from '@/react/portainer/feature-flags/enums'; import Openldap from '@/assets/ico/vendor/openldap.svg?c'; -import { BadgeIcon } from '@@/BadgeIcon'; - const SERVER_TYPES = { CUSTOM: 0, OPEN_LDAP: 1, @@ -14,7 +12,8 @@ const SERVER_TYPES = { export const options = [ { id: 'ldap_custom', - icon: , + icon: Edit, + iconType: 'badge', label: 'Custom', value: SERVER_TYPES.CUSTOM, }, @@ -24,5 +23,6 @@ export const options = [ label: 'OpenLDAP', value: SERVER_TYPES.OPEN_LDAP, feature: FeatureId.EXTERNAL_AUTH_LDAP, + iconType: 'logo', }, ]; diff --git a/app/react/portainer/settings/AuthenticationView/oauth-options.tsx b/app/react/portainer/settings/AuthenticationView/oauth-options.tsx index e1fb43090..f9d3c4c0c 100644 --- a/app/react/portainer/settings/AuthenticationView/oauth-options.tsx +++ b/app/react/portainer/settings/AuthenticationView/oauth-options.tsx @@ -5,8 +5,6 @@ import Microsoft from '@/assets/ico/vendor/microsoft.svg?c'; import Google from '@/assets/ico/vendor/google.svg?c'; import Github from '@/assets/ico/vendor/github.svg?c'; -import { BadgeIcon } from '@@/BadgeIcon'; - export const options = [ { id: 'microsoft', @@ -14,6 +12,7 @@ export const options = [ label: 'Microsoft', description: 'Microsoft OAuth provider', value: 'microsoft', + iconType: 'logo', feature: FeatureId.HIDE_INTERNAL_AUTH, }, { @@ -22,6 +21,7 @@ export const options = [ label: 'Google', description: 'Google OAuth provider', value: 'google', + iconType: 'logo', feature: FeatureId.HIDE_INTERNAL_AUTH, }, { @@ -30,11 +30,13 @@ export const options = [ label: 'Github', description: 'Github OAuth provider', value: 'github', + iconType: 'logo', feature: FeatureId.HIDE_INTERNAL_AUTH, }, { id: 'custom', - icon: , + icon: Edit, + iconType: 'badge', label: 'Custom', description: 'Custom OAuth provider', value: 'custom',