From be11dfc231bb59ce1803a7e9cd455565deee4e8e Mon Sep 17 00:00:00 2001 From: Ali <83188384+testA113@users.noreply.github.com> Date: Fri, 10 Jun 2022 09:17:13 +1200 Subject: [PATCH] fix(wizard): show teasers for kaas and kubeconfig features [EE-3316] (#7008) * fix(wizard): add kubeconfig, nomad and kaas teasers --- app/assets/css/index.js | 1 + app/assets/fonts/nomad-icon.css | 32 ++++++ app/assets/fonts/nomad-icon/nomad-icon.eot | Bin 0 -> 1260 bytes app/assets/fonts/nomad-icon/nomad-icon.svg | 11 ++ app/assets/fonts/nomad-icon/nomad-icon.ttf | Bin 0 -> 1096 bytes app/assets/fonts/nomad-icon/nomad-icon.woff | Bin 0 -> 1172 bytes .../BEFeatureIndicator/BEFeatureIndicator.tsx | 15 ++- app/portainer/environments/types.ts | 1 + app/portainer/feature-flags/enums.ts | 3 + .../feature-flags/feature-flags.service.ts | 3 + .../EnvironmentSelector.tsx | 1 + .../KaaSIcon.module.css | 8 ++ .../EnvironmentTypeSelectView/KaaSIcon.tsx | 21 ++++ .../environment-types.ts | 30 +++++- .../WizardKubernetes/KubeConfigTeaserForm.tsx | 99 ++++++++++++++++++ .../WizardKubernetes/WizardKubernetes.tsx | 21 ++++ .../components/Option/Option.module.css | 26 +++-- .../wizard/components/Option/Option.tsx | 27 ++++- 18 files changed, 284 insertions(+), 15 deletions(-) create mode 100644 app/assets/fonts/nomad-icon.css create mode 100644 app/assets/fonts/nomad-icon/nomad-icon.eot create mode 100644 app/assets/fonts/nomad-icon/nomad-icon.svg create mode 100644 app/assets/fonts/nomad-icon/nomad-icon.ttf create mode 100644 app/assets/fonts/nomad-icon/nomad-icon.woff create mode 100644 app/react/portainer/environments/wizard/EnvironmentTypeSelectView/KaaSIcon.module.css create mode 100644 app/react/portainer/environments/wizard/EnvironmentTypeSelectView/KaaSIcon.tsx create mode 100644 app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardKubernetes/KubeConfigTeaserForm.tsx diff --git a/app/assets/css/index.js b/app/assets/css/index.js index 9cd17ecec..237167ee6 100644 --- a/app/assets/css/index.js +++ b/app/assets/css/index.js @@ -20,3 +20,4 @@ import './app.css'; import './theme.css'; import './vendor-override.css'; +import '../fonts/nomad-icon.css'; diff --git a/app/assets/fonts/nomad-icon.css b/app/assets/fonts/nomad-icon.css new file mode 100644 index 000000000..e266b5819 --- /dev/null +++ b/app/assets/fonts/nomad-icon.css @@ -0,0 +1,32 @@ +/* created using https://icomoon.io/app */ +/* https://stackoverflow.com/a/35092005/681629 */ +/* for additional icons, we should create a new set that includes the existing icons */ + +@font-face { + font-family: 'nomad-icon'; + src: url('nomad-icon/nomad-icon.eot?6tre2n'); + src: url('nomad-icon/nomad-icon.eot?6tre2n#iefix') format('embedded-opentype'), url('nomad-icon/nomad-icon.ttf?6tre2n') format('truetype'), + url('nomad-icon/nomad-icon.woff?6tre2n') format('woff'), url('nomad-icon/nomad-icon.svg?6tre2n#nomad-icon') format('svg'); + font-weight: normal; + font-style: normal; + font-display: block; +} + +.nomad-icon { + /* use !important to prevent issues with browser extensions that change fonts */ + font-family: 'nomad-icon' !important; + speak: never; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.nomad-icon:before { + content: '\e900'; +} diff --git a/app/assets/fonts/nomad-icon/nomad-icon.eot b/app/assets/fonts/nomad-icon/nomad-icon.eot new file mode 100644 index 0000000000000000000000000000000000000000..81eb68d0eb3d84af2708277989169e4ef4ab8dfd GIT binary patch literal 1260 zcmaJ>O-~b16g_V~C@rQ~1W63hi7}D5sNe@+f(cE8h=>}5F5K9mj02>dY1(3F;(`?> zh6oA9gq?{dZj4(NxL_kI-S`9CxFWiBrF1xNW`LG7-1f~o=iGbW_j`Xd;4X`Rf_f8J z6H>YVs9u+`fvpatc8>diIOdRri#&@9hXHX+z=Dkh>SFg3U=~t+HVaa6kW}!3v<0XT-$R};HRA7CYT-MEYuJUY5zqm-w zf|XgzoVoCJejQLaYxK=hh*VV0Lm4E$G@CCk#()%ghP*xJW=(YC33-|PRNh=Hpc(Dt zOXP-Q=B9qxwfK$eA}Zr*OmNusHU#WK z-S)OIq_WT{*W$noAIRQh>7p;F*`?1l46u%Iyb6B;#xA@)&!dJzEWBTx8uMz~6%dSS zt3R2#-y2(*DApt~1f`4%)a=9at=#rYzcy+U8RzZXwcmg8R$WuOxai7m)#Lv*t7PfiNa*z;ws>hI4o&_eG0RiPIBch1d?UN_;!S8u5z|>%3q*d46sa^@$M2 za04IavTojWo%&mvwu+@W*D-pNJ&mts!>oqlgk>+}%wqkWZx}h^I%UJQ9II%Str=sw vVvJ_pagHs?HJ8sqnX|C@P&oc$VUk;zp*D>QzoY&$Gaf!ONv^s){U_KyrT?-M literal 0 HcmV?d00001 diff --git a/app/assets/fonts/nomad-icon/nomad-icon.svg b/app/assets/fonts/nomad-icon/nomad-icon.svg new file mode 100644 index 000000000..f3b017d53 --- /dev/null +++ b/app/assets/fonts/nomad-icon/nomad-icon.svg @@ -0,0 +1,11 @@ + + + +Generated by IcoMoon + + + + + + + \ No newline at end of file diff --git a/app/assets/fonts/nomad-icon/nomad-icon.ttf b/app/assets/fonts/nomad-icon/nomad-icon.ttf new file mode 100644 index 0000000000000000000000000000000000000000..c88998ea646f3152124cb82b2d44fd461a5d5a32 GIT binary patch literal 1096 zcmaJ=&r1|h9RIxe;ks*RYnl*JLj*~OZS99^VBkUuCKi}_@Y0UE)9lL5%(6eig$|w! zLNYJ{Z$Uwq=<2}^Uh-6z{(vr>q;scor_anAbqne3zImU|=lk=$Hv<8n3#(9(zW?Cr zwVq!63YCwXxx8am1{S_P1;ilvoNd-BTu+k+Yo}dqKAP4qu8?zLy=a+*3$K)bvX?h8ghlc?`6xH7tEWvsotZcD zVm^EC-CXPa(Z2VxqZNeB3VMivpg#xuDH2ItgH!veNz#ipS(0(ib;6HQPp-2D# literal 0 HcmV?d00001 diff --git a/app/assets/fonts/nomad-icon/nomad-icon.woff b/app/assets/fonts/nomad-icon/nomad-icon.woff new file mode 100644 index 0000000000000000000000000000000000000000..ffc04f12a0199a4af9b6cfb46e77d42d7b53926f GIT binary patch literal 1172 zcmaJ=O;1xn6g~4kC@lskf+U9Mi!sr-sNe_1L=&0_5eZ@tSh$f#dA5-DJ<<=QiEA{5 zhzZ1mwI*(iTNb$JLRsm?AK=Cn(XA_`&olD|C9!eZGjr~lJNMrCcn>E>MI$}KK9b94;F?vCU{Z?e*(@P!u>F$hCf_{UwbXR zLQSv}5cKL$Q6kL%(pOaKzxn^K8OVfnbDLGSAPK}pl7DeDcBUtmO!r<+C&jPEh}aQ3 zjgb!zo~;9+f6EA1POy<_>=?1Sz=iSW=t>5do`U7p2s_e_$hI(Dm zs58p9!Rl1wI(2?L4B5=>gGkDhogK|Ywp>O#qpSqq#R)|3*hZI*c@Q~T5cTbNtK$m9 zC`Hv8y^rjf$t2Y`Y{U+C6wvF3C0;f3jIx2H5I44 zT(#hqnABsTRTSW&)YNk{@GDNv^SzQ=@fMum;VMX3#XX? literal 0 HcmV?d00001 diff --git a/app/portainer/components/BEFeatureIndicator/BEFeatureIndicator.tsx b/app/portainer/components/BEFeatureIndicator/BEFeatureIndicator.tsx index b5dffd773..ad88a16ef 100644 --- a/app/portainer/components/BEFeatureIndicator/BEFeatureIndicator.tsx +++ b/app/portainer/components/BEFeatureIndicator/BEFeatureIndicator.tsx @@ -1,4 +1,5 @@ import { PropsWithChildren } from 'react'; +import clsx from 'clsx'; import { FeatureId } from '@/portainer/feature-flags/enums'; @@ -6,11 +7,15 @@ import { getFeatureDetails } from './utils'; export interface Props { featureId?: FeatureId; + showIcon?: boolean; + className?: string; } export function BEFeatureIndicator({ featureId, children, + showIcon = true, + className = '', }: PropsWithChildren) { const { url, limitedToBE } = getFeatureDetails(featureId); @@ -20,14 +25,18 @@ export function BEFeatureIndicator({ return ( {children} - - Business Edition Feature + {showIcon && ( + + )} + + Business Edition Feature + ); } diff --git a/app/portainer/environments/types.ts b/app/portainer/environments/types.ts index 98f123bed..878b34a6a 100644 --- a/app/portainer/environments/types.ts +++ b/app/portainer/environments/types.ts @@ -83,6 +83,7 @@ export enum EnvironmentCreationTypes { AzureEnvironment, EdgeAgentEnvironment, LocalKubernetesEnvironment, + KubeConfigEnvironment, } export enum PlatformType { diff --git a/app/portainer/feature-flags/enums.ts b/app/portainer/feature-flags/enums.ts index 73b61b7f3..ea3a4e03d 100644 --- a/app/portainer/feature-flags/enums.ts +++ b/app/portainer/feature-flags/enums.ts @@ -12,6 +12,9 @@ export enum FeatureState { export enum FeatureId { K8S_RESOURCE_POOL_LB_QUOTA = 'k8s-resourcepool-Ibquota', K8S_RESOURCE_POOL_STORAGE_QUOTA = 'k8s-resourcepool-storagequota', + K8S_CREATE_FROM_KUBECONFIG = 'k8s-create-from-kubeconfig', + KAAS_PROVISIONING = 'kaas-provisioning', + NOMAD = 'nomad', RBAC_ROLES = 'rbac-roles', REGISTRY_MANAGEMENT = 'registry-management', K8S_SETUP_DEFAULT = 'k8s-setup-default', diff --git a/app/portainer/feature-flags/feature-flags.service.ts b/app/portainer/feature-flags/feature-flags.service.ts index 388c53310..95264ce48 100644 --- a/app/portainer/feature-flags/feature-flags.service.ts +++ b/app/portainer/feature-flags/feature-flags.service.ts @@ -16,6 +16,9 @@ export async function init(edition: Edition) { const features = { [FeatureId.K8S_RESOURCE_POOL_LB_QUOTA]: Edition.BE, [FeatureId.K8S_RESOURCE_POOL_STORAGE_QUOTA]: Edition.BE, + [FeatureId.K8S_CREATE_FROM_KUBECONFIG]: Edition.BE, + [FeatureId.KAAS_PROVISIONING]: Edition.BE, + [FeatureId.NOMAD]: Edition.BE, [FeatureId.ACTIVITY_AUDIT]: Edition.BE, [FeatureId.EXTERNAL_AUTH_LDAP]: Edition.BE, [FeatureId.HIDE_INTERNAL_AUTH]: Edition.BE, diff --git a/app/react/portainer/environments/wizard/EnvironmentTypeSelectView/EnvironmentSelector.tsx b/app/react/portainer/environments/wizard/EnvironmentTypeSelectView/EnvironmentSelector.tsx index 366fab32b..504b8ad86 100644 --- a/app/react/portainer/environments/wizard/EnvironmentTypeSelectView/EnvironmentSelector.tsx +++ b/app/react/portainer/environments/wizard/EnvironmentTypeSelectView/EnvironmentSelector.tsx @@ -23,6 +23,7 @@ export function EnvironmentSelector({ value, onChange }: Props) { {environmentTypes.map((eType) => (