Add a team selection step when deploying blueprints

frontend/src/components/multi-step-forms/instance/MultiStepApplicationsInstanceForm.vue

@@ -28,7 +28,9 @@ import MultiStepForm from '../MultiStepForm.vue'
 import ApplicationStep from './steps/ApplicationStep.vue'
 import BlueprintStep from './steps/BlueprintStep.vue'
 import InstanceStep from './steps/InstanceStep.vue'
+import TeamStep from './steps/TeamStep.vue'
 
+const TEAM_STEP_SLUG = 'team'
 const APPLICATION_SLUG = 'application'
 const INSTANCE_SLUG = 'instance'
 const BLUEPRINT_SLUG = 'blueprint'
@@ -50,6 +52,11 @@ export default {
             required: false,
             type: String,
             default: 'Create Instance'
+        },
+        hasTeamStep: {
+            required: false,
+            type: Boolean,
+            default: false
         }
     },
     emits: ['form-success', 'previous-step-state-changed', 'next-step-state-changed', 'next-step-label-changed'],
@@ -58,6 +65,7 @@ export default {
 
         return {
             form: {
+                [TEAM_STEP_SLUG]: {},
                 [APPLICATION_SLUG]: {},
                 [INSTANCE_SLUG]: {},
                 [BLUEPRINT_SLUG]: {}
@@ -72,10 +80,19 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team']),
+        ...mapState('account', ['team', 'teams']),
         ...mapGetters('account', ['isFreeTeamType']),
         formSteps () {
             return [
+                {
+                    sliderTitle: 'Team',
+                    component: TeamStep,
+                    hidden: this.hasTeamStep ? this.teams.length === 1 : true,
+                    bindings: {
+                        slug: TEAM_STEP_SLUG,
+                        state: this.form[TEAM_STEP_SLUG]
+                    }
+                },
                 {
                     sliderTitle: 'Application',
                     component: ApplicationStep,
@@ -107,7 +124,7 @@ export default {
                         blueprints: this.blueprints
                     }
                 }
-            ]
+            ].filter(step => !step.hidden)
         },
         hasNoBlueprints () {
             return this.blueprints.length === 0

frontend/src/components/multi-step-forms/instance/steps/TeamStep.vue

@@ -0,0 +1,93 @@
+<template>
+    <section class="ff-select-team-step text-center flex flex-col gap-4 pt-6" data-step="team">
+        <h2>Choose a Team</h2>
+
+        <p>Select the team you want tto deploy the blueprint to</p>
+
+        <ul class="max-w-2xl w-full m-auto text-left flex flex-col gap-4">
+            <li
+                v-for="(teamOption, $key) in teams"
+                :key="$key"
+                class="team-tile flex flex-col gap-2"
+                :class="{selected: teamOption.id === team?.id}"
+                data-el="team-item"
+                @click="selectTeam(teamOption)"
+            >
+                <div class="header flex justify-between gap-2 items-center">
+                    <h5 class="title truncate">
+                        {{ teamOption.name }}
+                    </h5>
+                </div>
+            </li>
+        </ul>
+    </section>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+    name: 'TeamStep',
+    props: {
+        slug: {
+            required: true,
+            type: String
+        }
+    },
+    emits: ['next-step', 'step-updated'],
+    computed: {
+        ...mapGetters('account', ['team', 'teams'])
+    },
+    mounted () {
+        this.$emit('step-updated', {
+            [this.slug]: {
+                hasErrors: false,
+                errors: {}
+            }
+        })
+    },
+    methods: {
+        selectTeam (team) {
+            return this.$store.dispatch('account/setTeam', team.slug)
+                .then(() => this.$emit('next-step'))
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.ff-select-team-step {
+    .team-tile {
+        padding: 12px;
+        border: 2px solid $ff-grey-300;
+        width: 100%;
+        border-radius: 6px;
+        cursor: pointer;
+        transition: ease-in-out .3s;
+
+        &:hover {
+            border-color: $ff-indigo-400;
+        }
+
+        &.selected {
+            border-color: $ff-indigo-600;
+        }
+
+        .header {
+            .title {
+
+            }
+
+            .counters {
+                color: $ff-grey-400;
+                font-size: $ff-funit-xs;
+            }
+        }
+
+        .description {
+            color: $ff-grey-400;
+            font-size: $ff-funit-sm;
+        }
+    }
+}
+</style>

frontend/src/pages/team/createInstance.vue

@@ -35,6 +35,7 @@
             v-else
             ref="multiStepForm"
             :applications="applications"
+            :has-team-step="$route.name === 'DeployBlueprint'"
             @form-success="onInstanceCreated"
             @previous-step-state-changed="form.previousButtonState = $event"
             @next-step-state-changed="form.nextButtonState = $event"

frontend/src/pages/team/routes.js

@@ -239,7 +239,16 @@ export default [
         component: CreateInstance,
         name: 'DeployBlueprint',
         meta: {
-            title: 'Deploy Blueprint'
+            title: 'Deploy Blueprint',
+            menu: {
+                type: 'back',
+                backTo: ({ team }) => {
+                    return {
+                        label: 'Back to Dashboard',
+                        to: { name: 'Team', params: { team_slug: team?.slug } }
+                    }
+                }
+            }
         }
     },
     {