From 769c8372fbb3859acce6c0c08f7cb6eb94b867a6 Mon Sep 17 00:00:00 2001 From: Ali <83188384+testA113@users.noreply.github.com> Date: Fri, 3 Mar 2023 12:27:24 +1300 Subject: [PATCH] feat(microk8s): BE teasers in wizard [EE-4772] (#8449) * feat(microk8s): separate existing/new envs EE-4772 update icons fix be teaser box selector style * match environment wizard box selectors * revert title back * updated kaas description in wizard --------- Co-authored-by: testa113 Co-authored-by: Prabhat Khera --- app/assets/ico/vendor/install-kubernetes.svg | 6 +++ app/assets/ico/vendor/kaas-icon.svg | 4 ++ app/portainer/components/BoxSelector/index.ts | 1 + .../components/BoxSelector/BoxSelector.tsx | 6 +++ .../EndpointTypeView.tsx | 50 ++++++++++++++---- .../EnvironmentSelector.tsx | 43 +++++++--------- .../environment-types.ts | 51 ++++++++++++++++--- .../EnvironmentTypeSelectView/kaas-icon.svg | 4 -- .../EnvironmentsCreationView.tsx | 6 +-- app/react/portainer/feature-flags/enums.ts | 1 + .../feature-flags/feature-flags.service.ts | 1 + 11 files changed, 124 insertions(+), 49 deletions(-) create mode 100644 app/assets/ico/vendor/install-kubernetes.svg create mode 100644 app/assets/ico/vendor/kaas-icon.svg delete mode 100644 app/react/portainer/environments/wizard/EnvironmentTypeSelectView/kaas-icon.svg diff --git a/app/assets/ico/vendor/install-kubernetes.svg b/app/assets/ico/vendor/install-kubernetes.svg new file mode 100644 index 000000000..075065fb6 --- /dev/null +++ b/app/assets/ico/vendor/install-kubernetes.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/app/assets/ico/vendor/kaas-icon.svg b/app/assets/ico/vendor/kaas-icon.svg new file mode 100644 index 000000000..37d427eed --- /dev/null +++ b/app/assets/ico/vendor/kaas-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/portainer/components/BoxSelector/index.ts b/app/portainer/components/BoxSelector/index.ts index 14115ea3d..95caaa132 100644 --- a/app/portainer/components/BoxSelector/index.ts +++ b/app/portainer/components/BoxSelector/index.ts @@ -14,6 +14,7 @@ const BoxSelectorReact = react2angular(BoxSelector, [ 'options', 'radioName', 'slim', + 'hiddenSpacingCount', ]); export const boxSelectorModule = angular diff --git a/app/react/components/BoxSelector/BoxSelector.tsx b/app/react/components/BoxSelector/BoxSelector.tsx index 624e30649..2a924263d 100644 --- a/app/react/components/BoxSelector/BoxSelector.tsx +++ b/app/react/components/BoxSelector/BoxSelector.tsx @@ -20,12 +20,14 @@ export type Props = Union & { radioName: string; options: ReadonlyArray> | Array>; slim?: boolean; + hiddenSpacingCount?: number; }; export function BoxSelector({ radioName, options, slim = false, + hiddenSpacingCount, ...props }: Props) { return ( @@ -47,6 +49,10 @@ export function BoxSelector({ slim={slim} /> ))} + {hiddenSpacingCount && + Array.from(Array(hiddenSpacingCount)).map((_, index) => ( +
+ ))}
diff --git a/app/react/portainer/environments/wizard/EnvironmentTypeSelectView/EndpointTypeView.tsx b/app/react/portainer/environments/wizard/EnvironmentTypeSelectView/EndpointTypeView.tsx index f0fbd9b38..68b0a8cf5 100644 --- a/app/react/portainer/environments/wizard/EnvironmentTypeSelectView/EndpointTypeView.tsx +++ b/app/react/portainer/environments/wizard/EnvironmentTypeSelectView/EndpointTypeView.tsx @@ -8,19 +8,21 @@ import { useAnalytics } from '@/angulartics.matomo/analytics-services'; import { Button } from '@@/buttons'; import { PageHeader } from '@@/PageHeader'; import { Widget, WidgetBody, WidgetTitle } from '@@/Widget'; +import { FormSection } from '@@/form-components/FormSection'; import { useCreateEdgeDeviceParam } from '../hooks/useCreateEdgeDeviceParam'; +import { EnvironmentSelector } from './EnvironmentSelector'; import { - EnvironmentSelector, - EnvironmentSelectorValue, -} from './EnvironmentSelector'; -import { environmentTypes } from './environment-types'; + EnvironmentOptionValue, + existingEnvironmentTypes, + newEnvironmentTypes, +} from './environment-types'; export function EnvironmentTypeSelectView() { const createEdgeDevice = useCreateEdgeDeviceParam(); - const [types, setTypes] = useState([]); + const [types, setTypes] = useState([]); const { trackEvent } = useAnalytics(); const router = useRouter(); @@ -36,11 +38,34 @@ export function EnvironmentTypeSelectView() { - +
+ +

+ You can onboard different types of environments, select all + that apply. +

+

+ Connect to existing environments +

+ +

Set up new environments

+ + +