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

+ + +