Feat: Add Access Select component (#4399)

packages/frontend-2/components/project/page/collaborators/GeneralAccessRow.vue

@@ -6,22 +6,19 @@
       <WorkspaceAvatar :name="name || ''" :logo="logo" size="sm" />
       <p class="text-body-xs">Workspace members</p>
     </div>
-    <ProjectPageTeamPermissionSelect
-      v-if="canEdit"
-      :model-value="generalAccessRole"
-      :disabled-roles="[Roles.Stream.Contributor]"
-      disabled-item-tooltip="The feature will be available soon"
-      hide-owner
-    />
+    <ProjectPageTeamAccessSelect v-if="canEdit" :model-value="generalAccessRole" />
     <div v-else class="flex items-center justify-end text-body-2xs">
-      {{ roleSelectItems[generalAccessRole].title }}
+      {{ accessSelectItems[generalAccessRole].title }}
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { type StreamRoles, type MaybeNullOrUndefined, Roles } from '@speckle/shared'
-import { roleSelectItems } from '~~/lib/projects/helpers/components'
+import type { MaybeNullOrUndefined } from '@speckle/shared'
+import {
+  AccessSelectItems,
+  accessSelectItems
+} from '~~/lib/projects/helpers/components'
 
 defineProps<{
   name?: MaybeNullOrUndefined<string>
@@ -29,5 +26,5 @@ defineProps<{
   canEdit: boolean
 }>()
 
-const generalAccessRole = ref<StreamRoles>(Roles.Stream.Reviewer)
+const generalAccessRole = ref<AccessSelectItems>(AccessSelectItems.Reviewer)
 </script>

packages/frontend-2/components/project/page/team/AccessSelect.vue

@@ -0,0 +1,70 @@
+<template>
+  <FormSelectBase
+    v-model="selectValue"
+    :items="Object.values(items)"
+    label="Project access level"
+    button-style="simple"
+    name="access-control"
+    :allow-unset="false"
+    :label-id="labelId"
+    :button-id="buttonId"
+    :disabled-item-predicate="disabledItemPredicate"
+    disabled-item-tooltip="This feature will be available soon"
+    by="id"
+    class="w-28 sm:w-60"
+    size="sm"
+  >
+    <template #something-selected="{ value }">
+      <div class="text-right text-foreground text-body-2xs">
+        {{ isArray(value) ? value[0].title : value.title }}
+      </div>
+    </template>
+    <template #option="{ item }">
+      <div class="flex flex-col space-y-0.5">
+        <span class="truncate font-medium">
+          {{ item.title }}
+        </span>
+        <span v-if="item.description" class="text-body-2xs text-foreground-2">
+          {{ item.description }}
+        </span>
+      </div>
+    </template>
+  </FormSelectBase>
+</template>
+<script setup lang="ts">
+// This component is not functional, and only used to inform the user of the coming soon feature
+import {
+  accessSelectItems,
+  AccessSelectItems,
+  type SelectableAccessSelectItem
+} from '~~/lib/projects/helpers/components'
+import { isArray } from 'lodash-es'
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: AccessSelectItems): void
+}>()
+
+const props = defineProps<{
+  modelValue: AccessSelectItems
+}>()
+
+const labelId = useId()
+const buttonId = useId()
+const items = ref(accessSelectItems)
+
+const selectedValue = computed({
+  get: () => props.modelValue as AccessSelectItems,
+  set: (newVal) => emit('update:modelValue', newVal)
+})
+
+const selectValue = computed({
+  get: () => items.value[selectedValue.value],
+  set: (newVal) => {
+    selectedValue.value = newVal.id
+  }
+})
+
+const disabledItemPredicate = (item: SelectableAccessSelectItem) => {
+  return item.id === AccessSelectItems.NoAccess
+}
+</script>

packages/frontend-2/lib/projects/helpers/components.ts

@@ -47,6 +47,32 @@ export const roleSelectItems: Record<
   }
 }
 
+export enum AccessSelectItems {
+  NoAccess = 'no-access',
+  Reviewer = 'reviewer'
+}
+
+export type SelectableAccessSelectItem = {
+  id: AccessSelectItems
+  title: string
+  description?: string
+}
+
+export const accessSelectItems: Record<AccessSelectItems, SelectableAccessSelectItem> =
+  {
+    [AccessSelectItems.NoAccess]: {
+      id: AccessSelectItems.NoAccess,
+      title: 'No access',
+      description: 'Only invited project members can access the project'
+    },
+    [AccessSelectItems.Reviewer]: {
+      id: AccessSelectItems.Reviewer,
+      title: 'Can view',
+      description:
+        'All workspace members can view and comment on models in the web viewer'
+    }
+  }
+
 export enum CommentPermissions {
   Anyone = 'anyone',
   TeamMembersOnly = 'team'