feat: update server region metadata (#3433)

packages/frontend-2/components/settings/server/Regions.vue

@@ -8,25 +8,24 @@
       <div class="flex flex-col space-y-6">
         <div class="flex flex-row-reverse">
           <div v-tippy="disabledMessage">
-            <FormButton
-              :disabled="!canCreateRegion"
-              @click="isAddEditDialogOpen = true"
-            >
+            <FormButton :disabled="!canCreateRegion" @click="onCreate">
               Create
             </FormButton>
           </div>
         </div>
-        <SettingsServerRegionsTable :items="tableItems" />
+        <SettingsServerRegionsTable :items="tableItems" @edit="onEditRegion" />
       </div>
     </div>
     <SettingsServerRegionsAddEditDialog
+      v-model="editModel"
       v-model:open="isAddEditDialogOpen"
       :available-region-keys="availableKeys"
     />
   </section>
 </template>
 <script setup lang="ts">
 import { useQuery } from '@vue/apollo-composable'
+import type { SettingsServerRegionsTable_ServerRegionItemFragment } from '~/lib/common/generated/gql/graphql'
 import { graphql } from '~~/lib/common/generated/gql'
 
 const isAddEditDialogOpen = ref(false)
@@ -45,6 +44,8 @@ const query = graphql(`
   }
 `)
 
+const editModel = ref<SettingsServerRegionsTable_ServerRegionItemFragment>()
+
 const pageFetchPolicy = usePageQueryStandardFetchPolicy()
 const { result } = useQuery(query, undefined, () => ({
   fetchPolicy: pageFetchPolicy.value
@@ -62,4 +63,14 @@ const disabledMessage = computed(() => {
 
   return undefined
 })
+
+const onCreate = () => {
+  editModel.value = undefined
+  isAddEditDialogOpen.value = true
+}
+
+const onEditRegion = (item: SettingsServerRegionsTable_ServerRegionItemFragment) => {
+  editModel.value = item
+  isAddEditDialogOpen.value = true
+}
 </script>

packages/frontend-2/components/settings/server/regions/AddEditDialog.vue

@@ -49,7 +49,10 @@ import type { LayoutDialogButton } from '@speckle/ui-components'
 import { graphql } from '~/lib/common/generated/gql'
 import type { SettingsServerRegionsAddEditDialog_ServerRegionItemFragment } from '~/lib/common/generated/gql/graphql'
 import { useForm } from 'vee-validate'
-import { useCreateRegion } from '~/lib/multiregion/composables/management'
+import {
+  useCreateRegion,
+  useUpdateRegion
+} from '~/lib/multiregion/composables/management'
 import { useMutationLoading } from '@vue/apollo-composable'
 
 graphql(`
@@ -72,6 +75,7 @@ const open = defineModel<boolean>('open', { required: true })
 const model = defineModel<DialogModel>()
 const { handleSubmit, setValues } = useForm<DialogModel>()
 const createRegion = useCreateRegion()
+const updateRegion = useUpdateRegion()
 const loading = useMutationLoading()
 
 const dialogButtons = computed((): LayoutDialogButton[] => {
@@ -82,7 +86,7 @@ const dialogButtons = computed((): LayoutDialogButton[] => {
       onClick: () => (open.value = false)
     },
     {
-      text: 'Create',
+      text: isEditMode.value ? 'Update' : 'Create',
       props: {
         submit: true,
         disabled: loading.value
@@ -94,11 +98,15 @@ const dialogButtons = computed((): LayoutDialogButton[] => {
 const isEditMode = computed(() => !!model.value)
 
 const onSubmit = handleSubmit(async (values) => {
-  if (isEditMode.value) return // TODO:
-
-  const res = await createRegion({
-    input: values
+  const action = isEditMode.value ? updateRegion : createRegion
+  const res = await action({
+    input: {
+      key: values.key,
+      name: values.name,
+      description: values.description
+    }
   })
+
   if (res?.id) {
     open.value = false
   }
@@ -109,6 +117,8 @@ watch(
   (newVal, oldVal) => {
     if (newVal && newVal !== oldVal) {
       setValues(newVal)
+    } else if (!newVal && oldVal) {
+      setValues({ name: '', description: '', key: '' })
     }
   },
   { immediate: true }

packages/frontend-2/components/settings/server/regions/Table.vue

@@ -20,16 +20,12 @@
         <span class="text-foreground-2">{{ item.description }}</span>
       </template>
       <template #actions="{ item }">
-        <template v-if="true">
-          <!-- Hiding actions for now -->
-          &nbsp;
-        </template>
         <LayoutMenu
-          v-else
           v-model:open="showActionsMenu[item.id]"
           :items="actionItems"
           mount-menu-on-body
           :menu-position="HorizontalDirection.Left"
+          @chosen="({ item: actionItem }) => onActionChosen(actionItem, item)"
         >
           <FormButton
             :color="showActionsMenu[item.id] ? 'outline' : 'subtle'"
@@ -62,6 +58,10 @@ enum ActionTypes {
   Edit = 'edit'
 }
 
+const emit = defineEmits<{
+  edit: [item: SettingsServerRegionsTable_ServerRegionItemFragment]
+}>()
+
 defineProps<{
   items: SettingsServerRegionsTable_ServerRegionItemFragment[] | undefined
 }>()
@@ -74,4 +74,13 @@ const actionItems: LayoutMenuItem[][] = [
 const toggleMenu = (itemId: string) => {
   showActionsMenu.value[itemId] = !showActionsMenu.value[itemId]
 }
+
+const onActionChosen = (
+  actionItem: LayoutMenuItem,
+  item: SettingsServerRegionsTable_ServerRegionItemFragment
+) => {
+  if (actionItem.id === ActionTypes.Edit) {
+    emit('edit', item)
+  }
+}
 </script>

packages/frontend-2/lib/common/generated/gql/gql.ts

@@ -188,6 +188,7 @@ const documents = {
     "\n  subscription ProjectVersionGendoAIRenderCreated($id: String!, $versionId: String!) {\n    projectVersionGendoAIRenderCreated(id: $id, versionId: $versionId) {\n      id\n      createdAt\n      updatedAt\n      status\n      gendoGenerationId\n      prompt\n      camera\n    }\n  }\n": types.ProjectVersionGendoAiRenderCreatedDocument,
     "\n  subscription ProjectVersionGendoAIRenderUpdated($id: String!, $versionId: String!) {\n    projectVersionGendoAIRenderUpdated(id: $id, versionId: $versionId) {\n      id\n      projectId\n      modelId\n      versionId\n      createdAt\n      updatedAt\n      gendoGenerationId\n      status\n      prompt\n      camera\n      responseImage\n    }\n  }\n": types.ProjectVersionGendoAiRenderUpdatedDocument,
     "\n  mutation CreateNewRegion($input: CreateServerRegionInput!) {\n    serverInfoMutations {\n      multiRegion {\n        create(input: $input) {\n          id\n          ...SettingsServerRegionsAddEditDialog_ServerRegionItem\n          ...SettingsServerRegionsTable_ServerRegionItem\n        }\n      }\n    }\n  }\n": types.CreateNewRegionDocument,
+    "\n  mutation UpdateRegion($input: UpdateServerRegionInput!) {\n    serverInfoMutations {\n      multiRegion {\n        update(input: $input) {\n          id\n          ...SettingsServerRegionsAddEditDialog_ServerRegionItem\n          ...SettingsServerRegionsTable_ServerRegionItem\n        }\n      }\n    }\n  }\n": types.UpdateRegionDocument,
     "\n  fragment ProjectPageTeamInternals_Project on Project {\n    id\n    role\n    invitedTeam {\n      id\n      title\n      role\n      inviteId\n      user {\n        role\n        ...LimitedUserAvatar\n      }\n    }\n    team {\n      role\n      user {\n        id\n        role\n        ...LimitedUserAvatar\n      }\n    }\n  }\n": types.ProjectPageTeamInternals_ProjectFragmentDoc,
     "\n  fragment ProjectPageTeamInternals_Workspace on Workspace {\n    id\n    team {\n      items {\n        id\n        role\n        user {\n          id\n        }\n      }\n    }\n  }\n": types.ProjectPageTeamInternals_WorkspaceFragmentDoc,
     "\n  fragment ProjectDashboardItemNoModels on Project {\n    id\n    name\n    createdAt\n    updatedAt\n    role\n    team {\n      id\n      user {\n        id\n        name\n        avatar\n      }\n    }\n    ...ProjectPageModelsCardProject\n  }\n": types.ProjectDashboardItemNoModelsFragmentDoc,
@@ -1057,6 +1058,10 @@ export function graphql(source: "\n  subscription ProjectVersionGendoAIRenderUpd
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(source: "\n  mutation CreateNewRegion($input: CreateServerRegionInput!) {\n    serverInfoMutations {\n      multiRegion {\n        create(input: $input) {\n          id\n          ...SettingsServerRegionsAddEditDialog_ServerRegionItem\n          ...SettingsServerRegionsTable_ServerRegionItem\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  mutation CreateNewRegion($input: CreateServerRegionInput!) {\n    serverInfoMutations {\n      multiRegion {\n        create(input: $input) {\n          id\n          ...SettingsServerRegionsAddEditDialog_ServerRegionItem\n          ...SettingsServerRegionsTable_ServerRegionItem\n        }\n      }\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  mutation UpdateRegion($input: UpdateServerRegionInput!) {\n    serverInfoMutations {\n      multiRegion {\n        update(input: $input) {\n          id\n          ...SettingsServerRegionsAddEditDialog_ServerRegionItem\n          ...SettingsServerRegionsTable_ServerRegionItem\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  mutation UpdateRegion($input: UpdateServerRegionInput!) {\n    serverInfoMutations {\n      multiRegion {\n        update(input: $input) {\n          id\n          ...SettingsServerRegionsAddEditDialog_ServerRegionItem\n          ...SettingsServerRegionsTable_ServerRegionItem\n        }\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */

packages/frontend-2/lib/multiregion/composables/management.ts

@@ -1,7 +1,13 @@
 import { useMutation } from '@vue/apollo-composable'
-import type { CreateNewRegionMutationVariables } from '~/lib/common/generated/gql/graphql'
+import type {
+  CreateNewRegionMutationVariables,
+  UpdateRegionMutationVariables
+} from '~/lib/common/generated/gql/graphql'
 import { modifyObjectField, ROOT_QUERY } from '~/lib/common/helpers/graphql'
-import { createNewRegionMutation } from '~/lib/multiregion/graphql/mutations'
+import {
+  createNewRegionMutation,
+  updateRegionMutation
+} from '~/lib/multiregion/graphql/mutations'
 
 export const useCreateRegion = () => {
   const { mutate } = useMutation(createNewRegionMutation)
@@ -49,3 +55,31 @@ export const useCreateRegion = () => {
     return res?.data?.serverInfoMutations.multiRegion.create
   }
 }
+
+export const useUpdateRegion = () => {
+  const { mutate } = useMutation(updateRegionMutation)
+  const { activeUser, isAdmin } = useActiveUser()
+  const { triggerNotification } = useGlobalToast()
+
+  return async (input: UpdateRegionMutationVariables) => {
+    if (!activeUser.value || !isAdmin.value) return
+
+    const res = await mutate(input).catch(convertThrowIntoFetchResult)
+
+    if (res?.data?.serverInfoMutations.multiRegion.update.id) {
+      triggerNotification({
+        type: ToastNotificationType.Success,
+        title: 'Region successfully updated'
+      })
+    } else {
+      const errMsg = getFirstGqlErrorMessage(res?.errors)
+      triggerNotification({
+        type: ToastNotificationType.Danger,
+        title: 'Failed to update region',
+        description: errMsg
+      })
+    }
+
+    return res?.data?.serverInfoMutations.multiRegion.update
+  }
+}

packages/frontend-2/lib/multiregion/graphql/mutations.ts

@@ -13,3 +13,17 @@ export const createNewRegionMutation = graphql(`
     }
   }
 `)
+
+export const updateRegionMutation = graphql(`
+  mutation UpdateRegion($input: UpdateServerRegionInput!) {
+    serverInfoMutations {
+      multiRegion {
+        update(input: $input) {
+          id
+          ...SettingsServerRegionsAddEditDialog_ServerRegionItem
+          ...SettingsServerRegionsTable_ServerRegionItem
+        }
+      }
+    }
+  }
+`)

packages/server/assets/multiregion/typedefs/multiregion.graphql

@@ -33,8 +33,15 @@ input CreateServerRegionInput {
   description: String
 }
 
+input UpdateServerRegionInput {
+  key: String!
+  name: String
+  description: String
+}
+
 type ServerRegionMutations {
   create(input: CreateServerRegionInput!): ServerRegionItem!
+  update(input: UpdateServerRegionInput!): ServerRegionItem!
 }
 
 type ServerInfoMutations {

packages/server/modules/core/graph/generated/graphql.ts

@@ -2901,13 +2901,19 @@ export type ServerRegionItem = {
 export type ServerRegionMutations = {
   __typename?: 'ServerRegionMutations';
   create: ServerRegionItem;
+  update: ServerRegionItem;
 };
 
 
 export type ServerRegionMutationsCreateArgs = {
   input: CreateServerRegionInput;
 };
 
+
+export type ServerRegionMutationsUpdateArgs = {
+  input: UpdateServerRegionInput;
+};
+
 export enum ServerRole {
   ServerAdmin = 'SERVER_ADMIN',
   ServerArchivedUser = 'SERVER_ARCHIVED_USER',
@@ -3501,6 +3507,12 @@ export type UpdateModelInput = {
   projectId: Scalars['ID']['input'];
 };
 
+export type UpdateServerRegionInput = {
+  description?: InputMaybe<Scalars['String']['input']>;
+  key: Scalars['String']['input'];
+  name?: InputMaybe<Scalars['String']['input']>;
+};
+
 /** Only non-null values will be updated */
 export type UpdateVersionInput = {
   message?: InputMaybe<Scalars['String']['input']>;
@@ -4682,6 +4694,7 @@ export type ResolversTypes = {
   TriggeredAutomationsStatus: ResolverTypeWrapper<TriggeredAutomationsStatusGraphQLReturn>;
   UpdateAutomateFunctionInput: UpdateAutomateFunctionInput;
   UpdateModelInput: UpdateModelInput;
+  UpdateServerRegionInput: UpdateServerRegionInput;
   UpdateVersionInput: UpdateVersionInput;
   User: ResolverTypeWrapper<UserGraphQLReturn>;
   UserAutomateInfo: ResolverTypeWrapper<UserAutomateInfoGraphQLReturn>;
@@ -4940,6 +4953,7 @@ export type ResolversParentTypes = {
   TriggeredAutomationsStatus: TriggeredAutomationsStatusGraphQLReturn;
   UpdateAutomateFunctionInput: UpdateAutomateFunctionInput;
   UpdateModelInput: UpdateModelInput;
+  UpdateServerRegionInput: UpdateServerRegionInput;
   UpdateVersionInput: UpdateVersionInput;
   User: UserGraphQLReturn;
   UserAutomateInfo: UserAutomateInfoGraphQLReturn;
@@ -6038,6 +6052,7 @@ export type ServerRegionItemResolvers<ContextType = GraphQLContext, ParentType e
 
 export type ServerRegionMutationsResolvers<ContextType = GraphQLContext, ParentType extends ResolversParentTypes['ServerRegionMutations'] = ResolversParentTypes['ServerRegionMutations']> = {
   create?: Resolver<ResolversTypes['ServerRegionItem'], ParentType, ContextType, RequireFields<ServerRegionMutationsCreateArgs, 'input'>>;
+  update?: Resolver<ResolversTypes['ServerRegionItem'], ParentType, ContextType, RequireFields<ServerRegionMutationsUpdateArgs, 'input'>>;
   __isTypeOf?: IsTypeOfResolverFn<ParentType, ContextType>;
 };
 

packages/server/modules/cross-server-sync/graph/generated/graphql.ts

@@ -2882,13 +2882,19 @@ export type ServerRegionItem = {
 export type ServerRegionMutations = {
   __typename?: 'ServerRegionMutations';
   create: ServerRegionItem;
+  update: ServerRegionItem;
 };
 
 
 export type ServerRegionMutationsCreateArgs = {
   input: CreateServerRegionInput;
 };
 
+
+export type ServerRegionMutationsUpdateArgs = {
+  input: UpdateServerRegionInput;
+};
+
 export enum ServerRole {
   ServerAdmin = 'SERVER_ADMIN',
   ServerArchivedUser = 'SERVER_ARCHIVED_USER',
@@ -3482,6 +3488,12 @@ export type UpdateModelInput = {
   projectId: Scalars['ID']['input'];
 };
 
+export type UpdateServerRegionInput = {
+  description?: InputMaybe<Scalars['String']['input']>;
+  key: Scalars['String']['input'];
+  name?: InputMaybe<Scalars['String']['input']>;
+};
+
 /** Only non-null values will be updated */
 export type UpdateVersionInput = {
   message?: InputMaybe<Scalars['String']['input']>;

packages/server/modules/multiregion/domain/operations.ts

@@ -1,3 +1,4 @@
+import { UpdateServerRegionInput } from '@/modules/core/graph/generated/graphql'
 import { MultiRegionConfig, ServerRegion } from '@/modules/multiregion/domain/types'
 import { InsertableRegionRecord } from '@/modules/multiregion/helpers/types'
 import { Optional } from '@speckle/shared'
@@ -7,6 +8,10 @@ export type GetRegion = (params: { key: string }) => Promise<Optional<ServerRegi
 export type StoreRegion = (params: {
   region: InsertableRegionRecord
 }) => Promise<ServerRegion>
+export type UpdateRegion = (params: {
+  regionKey: string
+  region: Partial<ServerRegion>
+}) => Promise<ServerRegion>
 
 export type GetAvailableRegionConfigs = () => Promise<MultiRegionConfig>
 export type GetAvailableRegionKeys = () => Promise<string[]>
@@ -15,3 +20,6 @@ export type GetFreeRegionKeys = () => Promise<string[]>
 export type CreateAndValidateNewRegion = (params: {
   region: InsertableRegionRecord
 }) => Promise<ServerRegion>
+export type UpdateAndValidateRegion = (params: {
+  input: UpdateServerRegionInput
+}) => Promise<ServerRegion>

packages/server/modules/multiregion/errors/index.ts

@@ -10,3 +10,9 @@ export class RegionCreateError extends BaseError {
   static defaultMessage = 'An error occurred while creating the region'
   static statusCode = 400
 }
+
+export class RegionUpdateError extends BaseError {
+  static code = 'REGION_UPDATE_ERROR'
+  static defaultMessage = 'An error occurred while updating the region'
+  static statusCode = 400
+}