fix: hide create project/model buttons on receive flow (#101)

* Hide "Create Project/Model" Buttons in Load Flow

* simplify

* add isSender to modelselector

* chore: run linting on ModelSelector

---------

Co-authored-by: Oğuzhan Koral <45078678+oguzhankoral@users.noreply.github.com>
Co-authored-by: Björn Steinhagen <steinhagen.bjoern@gmail.com>

components/wizard/ModelSelector.vue

@@ -14,6 +14,7 @@
           color="foundation"
         />
         <div
+          v-if="isSender"
           v-tippy="
             canCreateModelResult?.project.permissions.canCreateModel.authorized
               ? 'Create new model'
@@ -83,6 +84,7 @@
           v-if="
             models?.length === 0 &&
             !!searchText &&
+            isSender &&
             canCreateModelResult?.project.permissions.canCreateModel?.authorized
           "
           full-width
@@ -104,6 +106,7 @@
       </div>
     </div>
     <CommonDialog
+      v-if="isSender"
       v-model:open="showNewModelDialog"
       title="Create new model"
       fullscreen="none"
@@ -163,10 +166,9 @@ const props = withDefaults(
     workspaceId?: string
     workspaceSlug?: string
     accountId: string
-    showNewModel?: boolean
     isSender?: boolean
   }>(),
-  { showNewModel: true, isSender: false }
+  { isSender: false }
 )
 
 const accountStore = useAccountStore()
@@ -196,8 +198,7 @@ const handleModelSelect = (model: ModelListModelItemFragment) => {
   if (existingModelProblem.value) {
     existingModelName.value = model.name
   }
-  hasNonZeroVersionsProblem.value =
-    model.versions.totalCount !== 0 && props.showNewModel // NOTE: we're using the showNewModel prop as a giveaway of whether we're in the send wizard - we do not need this extra check in the receive wizard
+  hasNonZeroVersionsProblem.value = model.versions.totalCount !== 0 && props.isSender
 
   if (!existingModelProblem.value && !hasNonZeroVersionsProblem.value) {
     return emit('next', model)

components/wizard/ProjectSelector.vue

@@ -78,68 +78,70 @@
             color="foundation"
           />
           <div class="flex justify-between items-center space-x-2">
-            <div v-if="canCreateProject" v-tippy="'Create new project'">
-              <FormButton
-                color="outline"
-                :disabled="!canCreateProject"
-                :class="`p-1.5 bg-foundation hover:bg-primary-muted rounded text-foreground border`"
-                @click="showProjectCreateDialog = true"
+            <template v-if="isSender">
+              <div v-if="canCreateProject" v-tippy="'Create new project'">
+                <FormButton
+                  color="outline"
+                  :disabled="!canCreateProject"
+                  :class="`p-1.5 bg-foundation hover:bg-primary-muted rounded text-foreground border`"
+                  @click="showProjectCreateDialog = true"
+                >
+                  <PlusIcon class="w-4 -mx-2" />
+                </FormButton>
+              </div>
+              <div
+                v-else
+                v-tippy="
+                  canCreateProject
+                    ? 'Create new project'
+                    : canCreateProjectPermissionCheck?.message
+                "
               >
-                <PlusIcon class="w-4 -mx-2" />
-              </FormButton>
-            </div>
-            <div
-              v-else
-              v-tippy="
-                canCreateProject
-                  ? 'Create new project'
-                  : canCreateProjectPermissionCheck?.message
-              "
-            >
-              <FormButton
-                color="primary"
-                :class="`p-1.5 bg-foundation rounded text-foreground border`"
-                @click="upgradePlanButtonAction"
+                <FormButton
+                  color="primary"
+                  :class="`p-1.5 bg-foundation rounded text-foreground border`"
+                  @click="upgradePlanButtonAction"
+                >
+                  <ArrowUpCircleIcon class="w-4 -mx-2" />
+                </FormButton>
+              </div>
+              <CommonDialog
+                v-model:open="showProjectCreateDialog"
+                :title="`Create new project`"
+                fullscreen="none"
               >
-                <ArrowUpCircleIcon class="w-4 -mx-2" />
-              </FormButton>
-            </div>
-            <CommonDialog
-              v-model:open="showProjectCreateDialog"
-              :title="`Create new project`"
-              fullscreen="none"
-            >
-              <form @submit="createProject(newProjectName as string)">
-                <div class="text-body-2xs mb-2 ml-1">Project name</div>
-                <FormTextInput
-                  v-model="newProjectName"
-                  class="text-xs"
-                  placeholder="A Beautiful Home, A Small Bridge..."
-                  autocomplete="off"
-                  name="name"
-                  label="Project name"
-                  color="foundation"
-                  :show-clear="!!newProjectName"
-                  :rules="[
-                    ValidationHelpers.isRequired,
-                    ValidationHelpers.isStringOfLength({ minLength: 3 })
-                  ]"
-                  full-width
-                />
-                <div class="mt-4 flex justify-end items-center space-x-2 w-full">
-                  <FormButton size="sm" text @click="showProjectCreateDialog = false">
-                    Cancel
-                  </FormButton>
-                  <FormButton
-                    size="sm"
-                    submit
-                    :disabled="isCreatingProject || !newProjectName"
-                  >
-                    Create
-                  </FormButton>
-                </div>
-              </form>
-            </CommonDialog>
+                <form @submit="createProject(newProjectName as string)">
+                  <div class="text-body-2xs mb-2 ml-1">Project name</div>
+                  <FormTextInput
+                    v-model="newProjectName"
+                    class="text-xs"
+                    placeholder="A Beautiful Home, A Small Bridge..."
+                    autocomplete="off"
+                    name="name"
+                    label="Project name"
+                    color="foundation"
+                    :show-clear="!!newProjectName"
+                    :rules="[
+                      ValidationHelpers.isRequired,
+                      ValidationHelpers.isStringOfLength({ minLength: 3 })
+                    ]"
+                    full-width
+                  />
+                  <div class="mt-4 flex justify-end items-center space-x-2 w-full">
+                    <FormButton size="sm" text @click="showProjectCreateDialog = false">
+                      Cancel
+                    </FormButton>
+                    <FormButton
+                      size="sm"
+                      submit
+                      :disabled="isCreatingProject || !newProjectName"
+                    >
+                      Create
+                    </FormButton>
+                  </div>
+                </form>
+              </CommonDialog>
+            </template>
             <div v-if="!workspacesEnabled || !workspaces" class="mt-1">
               <AccountsMenu
                 :current-selected-account-id="accountId"
@@ -168,6 +170,7 @@
           v-if="
             projects?.length === 0 &&
             !!searchText &&
+            isSender &&
             canCreateProjectPermissionCheck?.authorized
           "
           full-width
@@ -236,7 +239,6 @@ const emit = defineEmits<{
 const props = withDefaults(
   defineProps<{
     isSender: boolean
-    showNewProject?: boolean
     /**
      * For the send wizard - not allowing selecting projects we can't write to.
      */
@@ -244,7 +246,6 @@ const props = withDefaults(
     urlParseError?: string
   }>(),
   {
-    showNewProject: true,
     disableNoWriteAccessProjects: false
   }
 )