feat(fe2): change submit logic for access settings before embedding (#…

…2278) * Starting on gergo/newAutomateModule * regenerated gql * minor gql optimizations * various fixes for project tabs * WIP featured functions * composable for ez debounced inputs * composable for ez debounced inputs * WIP fn card * TS error fixes * WIP cardd * WIP function cards * empty state done * WIP runs table * runs table looks good * run info dialog works * minor run dialog improvement * feat: add automate module with feature flag * added fautomate feature flag to fe2 as well * link to beta implemented * minor adjustment * enabling dev to skip migrations * Merge branch 'main' into fabians/fe2-automate-integration * tabs set up for single automation page * refactored editable title/description * models title fix * update title mutation * title done * WIP function card * feat: feature flags implementation * WIP runs * feat: feature flags feedback * Revert "feat: feature flags feedback" This reverts commit 139065b. * Revert "feat: feature flags implementation" This reverts commit 0614deb. * minor row fix * core automation page done * wip automation fn settings * function settings dialog * apollo dev tools fix * feat: automation run trigger logic * functions page * WIP function page * fix FE2 lint issue * testing library borked, just skip interactive tests * tests fix * enabling automate module for testing * disabling module in test env * WIP fn page * parameters demo dialog * added markdown rendering * finished single function page * faked markdown * pkg json fix * pkg json fix * updated schema for triggers * more schema adjustments * adjusted FE to support triggers * added model select to automate edit * fixed up runs dialog & status icon * migrated viewer to new components * updated automate panel to fit designs in viewer * cleaning up old shit * mocks fix * fn logo size fix * runs table status fix * feat: automate module, automation creation and trigger * test: fix automate module tests * test: fixt automate module tests * feat: create function flow * linting fixes * test fix? * functions page fixes * WIP automation wizard * parameters step done * WIP details step * automation wizard done for the most part * triggering automation * enabled switch * create automation from fns page * create automation from fn page * details validation update * disable capability for switch * edit fn done * functions empty state * various empty states * minor adjustment * various minor fixes * automation status dialog responsivity * status icon responsivity fixes * viewer panel * empty state adjustments * fns page responsivitiy * fn page core responsivity * automation wizard responsivity * fn wizard responsity fixes * minor fix ups * fixed up existing backend stuff * fixing eslint hopefully * tryna fix eslint * automate code validation mechanism added * minor GQL schema change * maybethis fixes eslint? * more eslint debugging * fix cross-env missing * tryna fix eslint memory issues * ci test fix * error improvements * migrations for fn tables * Improve empty state * Update button copy in edit function dialog And remove unused icon * Refine function page design * WIP function create * fn creation tests added * Fix enable switch label text on Automation page * Update design of function card * Change tag to beta * Fix selected ring not being rounded * Minor copy changes here and there * Add border and header column bg to Table component * Update styling of Automations tab * Update styling of individual Automation page * Remove icon from button * fn update w/ tests * fn release creation w/ tests * fixing tests * GH auth endpoint * minor cleanup * WIP reporting function statuses * automation update/delete w/ tests * WIP automation revision & trigger tests * revision creation tests done * trigger tests * function run reporting works * report status tests WIP * run status update tests done * auth code handshake tests * a couple of FE2 fixes * WIP function retrieval queries & tests * WIP automation queries * removed all functions stuff * implemented fn queries * all kinds of queries & resolvers done * more queries * automations query * automation status resolution core algo * FE2 fixes * fixed up mocks * fix(fe2): disallow loading automations if non-owner * chore: circleci extension config change * fixing some benjamins changes * hydration mismatch fix * fixed tests * preview service fix? * env flag fix * more form validation improvements * proper automation status run ordering * featured mock fix * meta data fixed * introduce outdated label * log streaming mock moved to serverside * encryption in create for FE * fix: integration work * core encryption stuff implemented * fixing tests & linting * improved revision input validation * automation create works * automations status fix * fixed automation run queries * minor cleanup * implemented log streaming * properly handing redacted props in update rev flow * implemented subscriptions backend * WIP subscriptions FE implementation * subscriptions work? * feat: add docker compose based reverse proxy for the server stack * revert: restore docker compose ingress dockerfile * chore: disable automate module feature flag by default * fix: move nginx ingress file to the right place * Implement `automateFunctionRunStatusReport` (#2262) * untested implementation * no more errors * no more errors * lint * add all statuses to `AutomationRunStatusOrder` * fix: status reporting now works * park in the right place, grapple with tests * update tests * use correct run ids, adjust tests --------- Co-authored-by: Gergő Jedlicska <gergo@jedlicska.com> * fix: make tab selection robust by using dynamic ID lookup * tests: fix authz module tests * fix: frontend TS issue * ci: add automate encryption keys path value * Fix ts build errors from ui-components changes * fix: frontend automation status colors * add handling for all enum cases in useRunStatusMetadata * Fix merge issue * Use save button to update ProjectVisibility * Update copy around private projects * Use isPrivate * Remove title from Alert * Updates from PR --------- Co-authored-by: Kristaps Fabians Geikins <fabis94@live.com> Co-authored-by: Gergő Jedlicska <gergo@jedlicska.com> Co-authored-by: Benjamin Ottensten <benjamin.ottensten@gmail.com> Co-authored-by: Chuck Driesler <cdriesler.iv@gmail.com>
specklesystems · May 24, 2024 · 4b0ac38 · 4b0ac38
1 parent 39c2202
commit 4b0ac38
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 118 deletions.
diff --git a/packages/frontend-2/components/project/VisibilitySelect.vue b/packages/frontend-2/components/project/VisibilitySelect.vue
@@ -10,6 +10,11 @@
     :label-id="labelId"
     :button-id="buttonId"
     by="id"
+    :help="
+      disabled
+        ? 'You must be an Owner of this project to change this setting'
+        : undefined
+    "
   >
     <template #something-selected="{ value }">
       <div class="text-sm">

diff --git a/packages/frontend-2/components/project/model-page/dialog/embed/Embed.vue b/packages/frontend-2/components/project/model-page/dialog/embed/Embed.vue
@@ -1,29 +1,23 @@
 <template>
   <LayoutDialog
     v-model:open="isOpen"
-    :max-width="project.visibility == ProjectVisibility.Private ? 'sm' : 'md'"
-    :buttons="
-      project.visibility == ProjectVisibility.Private
-        ? nonDiscoverableButtons
-        : discoverableButtons
-    "
+    :max-width="isPrivate ? 'sm' : 'md'"
+    :buttons="isPrivate ? nonDiscoverableButtons : discoverableButtons"
   >
-    <template #header>Embed Model</template>
-    <div v-if="project.visibility === ProjectVisibility.Private">
+    <template v-if="isPrivate" #header>Change Access Permissions</template>
+    <template v-else #header>Embed Model</template>
+
+    <div v-if="isPrivate">
       <CommonAlert color="info">
         <template #title>
-          Model embedding only works if the project is “Discoverable”.
-        </template>
-        <template #description>
-          <p>
-            To change this setting you must be logged in as a user with the
-            <strong>Owner</strong>
-            project permission.
-          </p>
+          Model embedding does not work when the project is "Private".
         </template>
       </CommonAlert>
 
-      <ProjectPageTeamDialogManagePermissions :project="project" default-open />
+      <ProjectPageTeamDialogManagePermissions
+        :project="project"
+        @changed-visibility="handleChangeVisibility"
+      />
     </div>
     <div v-else>
       <CommonAlert v-if="multipleVersionedResources" class="mb-4 sm:-mt-4" color="info">
@@ -100,7 +94,6 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
 import { Cog6ToothIcon, EyeIcon } from '@heroicons/vue/24/outline'
 import {
   ProjectVisibility,
@@ -110,6 +103,8 @@ import { useClipboard } from '~~/composables/browser'
 import { SpeckleViewer } from '@speckle/shared'
 import { graphql } from '~~/lib/common/generated/gql'
 import type { LayoutDialogButton } from '@speckle/ui-components'
+import { useUpdateProject } from '~/lib/projects/composables/projectManagement'
+import { useMixpanel } from '~/lib/core/composables/mp'
 
 graphql(`
   fragment ProjectsModelPageEmbed_Project on Project {
@@ -127,18 +122,22 @@ const props = defineProps<{
 const isOpen = defineModel<boolean>('open', { required: true })
 
 const route = useRoute()
+const logger = useLogger()
 const { copy } = useClipboard()
 const {
   public: { baseUrl }
 } = useRuntimeConfig()
 
 const { isSmallerOrEqualSm } = useIsSmallerOrEqualThanBreakpoint()
+const updateProject = useUpdateProject()
+const mp = useMixpanel()
 
 const transparentBackground = ref(false)
 const hideViewerControls = ref(false)
 const hideSelectionInfo = ref(false)
 const preventScrolling = ref(false)
 const manuallyLoadModel = ref(false)
+const projectVisibility = ref(props.project.visibility)
 
 const routeModelId = computed(() => route.params.modelId as string)
 
@@ -192,6 +191,10 @@ const iframeCode = computed(() => {
   return `<iframe title="Speckle" src="${updatedUrl.value}" width="600" height="400" frameborder="0"></iframe>`
 })
 
+const isPrivate = computed(() => {
+  return props.project.visibility === ProjectVisibility.Private
+})
+
 const discoverableButtons = computed((): LayoutDialogButton[] => [
   {
     text: 'Cancel',
@@ -216,6 +219,14 @@ const nonDiscoverableButtons = computed((): LayoutDialogButton[] => [
     onClick: () => {
       isOpen.value = false
     }
+  },
+  {
+    text: 'Save',
+    props: {
+      fullWidth: true,
+      disabled: projectVisibility.value === props.project.visibility
+    },
+    onClick: saveProjectVisibility
   }
 ])
 
@@ -230,6 +241,27 @@ const updateOption = (optionRef: Ref<boolean>, newValue: unknown) => {
   optionRef.value = newValue === undefined ? false : !!newValue
 }
 
+const handleChangeVisibility = (newVisibility: ProjectVisibility) => {
+  projectVisibility.value = newVisibility
+}
+
+const saveProjectVisibility = async () => {
+  try {
+    await updateProject({
+      visibility: projectVisibility.value,
+      id: props.project.id
+    })
+    mp.track('Stream Action', {
+      type: 'action',
+      name: 'update',
+      action: 'project-access',
+      to: projectVisibility.value
+    })
+  } catch (e) {
+    logger.error(e)
+  }
+}
+
 const embedDialogOptions = [
   {
     id: 'isTransparent',

diff --git a/packages/frontend-2/components/project/page/team/dialog/ManagePermissions.vue b/packages/frontend-2/components/project/page/team/dialog/ManagePermissions.vue
@@ -1,104 +1,43 @@
 <template>
-  <LayoutDialogSection
-    allow-overflow
-    border-b
-    title="Access"
-    :always-open="defaultOpen"
-  >
-    <template #icon>
-      <LockOpenIcon
-        v-if="project.visibility === ProjectVisibility.Public"
-        class="h-full w-full"
-      />
-      <LinkIcon
-        v-else-if="project.visibility === ProjectVisibility.Unlisted"
-        class="h-full w-full"
-      />
-      <LockClosedIcon v-else class="h-full w-full" />
-    </template>
-    <div class="flex flex-col space-y-2">
-      <!-- <div class="text-foreground-2 text-sm">Project Access</div> -->
-      <ProjectVisibilitySelect
-        :model-value="project.visibility"
-        :disabled="isDisabled"
-        mount-menu-on-body
-        @update:model-value="onChangeVisibility"
-      />
-      <!-- <div class="text-foreground-2 text-sm">Comments</div> -->
-      <ProjectCommentPermissionsSelect
-        :model-value="
-          project.allowPublicComments
-            ? CommentPermissions.Anyone
-            : CommentPermissions.TeamMembersOnly
-        "
-        :disabled="isDisabled"
-        mount-menu-on-body
-        @update:model-value="onChangeCommentPermissions"
-      />
-    </div>
-  </LayoutDialogSection>
+  <div class="mt-4">
+    <ProjectVisibilitySelect
+      v-model="currentVisibility"
+      :disabled="isDisabled"
+      mount-menu-on-body
+    />
+  </div>
 </template>
+
 <script setup lang="ts">
 import { ProjectVisibility } from '~~/lib/common/generated/gql/graphql'
 import type { ProjectsPageTeamDialogManagePermissions_ProjectFragment } from '~~/lib/common/generated/gql/graphql'
-import { LayoutDialogSection } from '@speckle/ui-components'
-import { CommentPermissions } from '~~/lib/projects/helpers/components'
-import { useUpdateProject } from '~~/lib/projects/composables/projectManagement'
 import { useTeamManagePermissionsInternals } from '~~/lib/projects/composables/team'
-import { LockClosedIcon, LockOpenIcon, LinkIcon } from '@heroicons/vue/24/outline'
-import { useMixpanel } from '~~/lib/core/composables/mp'
 import { graphql } from '~~/lib/common/generated/gql/gql'
 
 graphql(`
   fragment ProjectsPageTeamDialogManagePermissions_Project on Project {
     id
     visibility
-    allowPublicComments
     role
   }
 `)
 
 const props = defineProps<{
   project: ProjectsPageTeamDialogManagePermissions_ProjectFragment
-  defaultOpen: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'changedVisibility', newVisibility: ProjectVisibility): void
 }>()
 
 const projectRef = toRef(props, 'project')
 const { isOwner, isServerGuest } = useTeamManagePermissionsInternals(projectRef)
 
-const updateProject = useUpdateProject()
-
-const loading = ref(false)
-const mp = useMixpanel()
-
-const isDisabled = computed(
-  () => !isOwner.value || loading.value || isServerGuest.value
-)
+const isDisabled = computed(() => !isOwner.value || isServerGuest.value)
 
-const onChangeVisibility = async (visibility: ProjectVisibility) => {
-  loading.value = true
-  await updateProject({ visibility, id: props.project.id })
-  loading.value = false
-  mp.track('Stream Action', {
-    type: 'action',
-    name: 'update',
-    action: 'project-access',
-    to: visibility
-  })
-}
+const currentVisibility = ref(props.project.visibility)
 
-const onChangeCommentPermissions = async (newVal: CommentPermissions) => {
-  loading.value = true
-  await updateProject({
-    id: props.project.id,
-    allowPublicComments: newVal === CommentPermissions.Anyone
-  })
-  mp.track('Stream Action', {
-    type: 'action',
-    name: 'update',
-    action: 'comment-access',
-    to: newVal
-  })
-  loading.value = false
-}
+watch(currentVisibility, (newVisibility) => {
+  emit('changedVisibility', newVisibility)
+})
 </script>
diff --git a/packages/frontend-2/lib/common/generated/gql/gql.ts b/packages/frontend-2/lib/common/generated/gql/gql.ts
@@ -78,7 +78,7 @@ const documents = {
     "\n  fragment ProjectPageSettingsGeneralBlockLeave_Project on Project {\n    id\n    name\n    role\n    team {\n      role\n      user {\n        ...LimitedUserAvatar\n        role\n      }\n    }\n  }\n": types.ProjectPageSettingsGeneralBlockLeave_ProjectFragmentDoc,
     "\n  fragment ProjectPageSettingsGeneralBlockProjectInfo_Project on Project {\n    id\n    role\n    name\n    description\n  }\n": types.ProjectPageSettingsGeneralBlockProjectInfo_ProjectFragmentDoc,
     "\n  fragment ProjectPageTeamDialog on Project {\n    id\n    name\n    role\n    allowPublicComments\n    visibility\n    team {\n      id\n      role\n      user {\n        ...LimitedUserAvatar\n        role\n      }\n    }\n    invitedTeam {\n      id\n      title\n      inviteId\n      role\n      user {\n        ...LimitedUserAvatar\n        role\n      }\n    }\n    ...ProjectsPageTeamDialogManagePermissions_Project\n  }\n": types.ProjectPageTeamDialogFragmentDoc,
-    "\n  fragment ProjectsPageTeamDialogManagePermissions_Project on Project {\n    id\n    visibility\n    allowPublicComments\n    role\n  }\n": types.ProjectsPageTeamDialogManagePermissions_ProjectFragmentDoc,
+    "\n  fragment ProjectsPageTeamDialogManagePermissions_Project on Project {\n    id\n    visibility\n    role\n  }\n": types.ProjectsPageTeamDialogManagePermissions_ProjectFragmentDoc,
     "\n  subscription OnUserProjectsUpdate {\n    userProjectsUpdated {\n      type\n      id\n      project {\n        ...ProjectDashboardItem\n      }\n    }\n  }\n": types.OnUserProjectsUpdateDocument,
     "\n  fragment ProjectsDashboardFilled on ProjectCollection {\n    items {\n      ...ProjectDashboardItem\n    }\n  }\n": types.ProjectsDashboardFilledFragmentDoc,
     "\n  fragment ProjectsInviteBanner on PendingStreamCollaborator {\n    id\n    invitedBy {\n      ...LimitedUserAvatar\n    }\n    projectId\n    projectName\n    token\n  }\n": types.ProjectsInviteBannerFragmentDoc,
@@ -507,7 +507,7 @@ export function graphql(source: "\n  fragment ProjectPageTeamDialog on Project {
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  fragment ProjectsPageTeamDialogManagePermissions_Project on Project {\n    id\n    visibility\n    allowPublicComments\n    role\n  }\n"): (typeof documents)["\n  fragment ProjectsPageTeamDialogManagePermissions_Project on Project {\n    id\n    visibility\n    allowPublicComments\n    role\n  }\n"];
+export function graphql(source: "\n  fragment ProjectsPageTeamDialogManagePermissions_Project on Project {\n    id\n    visibility\n    role\n  }\n"): (typeof documents)["\n  fragment ProjectsPageTeamDialogManagePermissions_Project on Project {\n    id\n    visibility\n    role\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */