DUI3 Sync To Main

packages/dui3/.env.example

@@ -3,3 +3,10 @@ PORT=8082
 
 NUXT_PUBLIC_MIXPANEL_TOKEN_ID=acd87c5a50b56df91a795e999812a3a4
 NUXT_PUBLIC_MIXPANEL_API_HOST=https://analytics.speckle.systems
+
+SPECKLE_ACCOUNT_ID=undefined
+SPECKLE_TOKEN=undefined
+SPECKLE_USER_ID=undefined
+SPECKLE_URL=undefined
+SPECKLE_SAMPLE_PROJECT_ID=undefined
+SPECKLE_SAMPLE_MODEL_ID=undefined

packages/dui3/app.vue

@@ -1,20 +1,21 @@
 <template>
-  <div id="speckle" class="bg-foundation-page text-foreground">
+  <div id="speckle" class="bg-foundation-page text-foreground overflow-auto">
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>
+    <SingletonToastManager />
   </div>
 </template>
 <script setup lang="ts">
+import { useMixpanel } from '~/lib/core/composables/mixpanel'
+import { useConfigStore } from '~/store/config'
+import { useAccountStore } from '~/store/accounts'
 import { storeToRefs } from 'pinia'
-import { useAccountsSetup } from '~/lib/accounts/composables/setup'
-import { useDocumentInfoStore } from '~/store/uiConfig'
+import { useUpdateConnector } from '~/lib/core/composables/updateConnector'
 
-const uiConfigStore = useDocumentInfoStore()
+const uiConfigStore = useConfigStore()
 const { isDarkTheme } = storeToRefs(uiConfigStore)
 
-useAccountsSetup()
-
 useHead({
   // Title suffix
   titleTemplate: (titleChunk) =>
@@ -24,7 +25,33 @@ useHead({
     class: computed(() => (isDarkTheme.value ? `dark` : ``))
   },
   bodyAttrs: {
-    class: 'simple-scrollbar bg-foundation-page text-foreground'
-  }
+    class: 'simple-scrollbar bg-foundation-page text-foreground '
+  },
+  // For standalone vue devtools see: https://devtools.vuejs.org/guide/installation.html#standalone
+  script: import.meta.dev ? ['http://localhost:8098'] : []
+})
+
+onMounted(async () => {
+  const { trackEvent, addConnectorToProfile, identifyProfile } = useMixpanel()
+  const { checkUpdate } = useUpdateConnector()
+  // TODO: some host apps can open DUI3 automatically, with this case we shouldn't mark track event as `"type": "action"`,
+  // we need to get this info from source app. (TBD which apps: Rhino opens automatically, not sure acad, sketchup and revit needs trigger button to init)
+  trackEvent('DUI3 Action', { name: 'Launch' })
+
+  // Checks whether new version available for the connector or not and throws a toast notification if any.
+  await checkUpdate()
+
+  const { accounts } = useAccountStore()
+
+  const uniqueEmails = new Set<string>()
+  accounts.forEach((account) => {
+    const email = account?.accountInfo.userInfo.email
+    if (email && !uniqueEmails.has(email)) {
+      addConnectorToProfile(email)
+      identifyProfile(email)
+      uniqueEmails.add(email)
+    }
+  })
 })
 </script>
+store/config

packages/dui3/components/accounts/Item.vue

@@ -0,0 +1,54 @@
+<template>
+  <button
+    v-tippy="tip"
+    :class="`group block w-full p-2 text-left items-center space-x-2  select-none group transition hover:bg-primary-muted hover:cursor-pointer hover:text-primary ${
+      !account.isValid
+        ? 'text-danger bg-rose-500/10 cursor-not-allowed'
+        : 'cursor-pointer'
+    } ${
+      currentSelectedAccountId === account.accountInfo.id
+        ? 'bg-blue-500/5 text-primary'
+        : ''
+    }`"
+    :disabled="!account.isValid"
+    @click="$emit('select', account)"
+  >
+    <div class="flex items-center space-x-2">
+      <UserAvatar :user="userAvatar" :active="account.accountInfo.isDefault" />
+      <div class="min-w-0 grow">
+        <div class="truncate overflow-hidden min-w-0 flex items-center space-x-2">
+          <span>{{ account.accountInfo.serverInfo.name }}</span>
+          <span class="text-foreground-2 truncate min-w-0 caption">
+            {{ account.accountInfo.serverInfo.url.split('//')[1] }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </button>
+</template>
+<script setup lang="ts">
+import type { DUIAccount } from '~~/store/accounts'
+
+const props = defineProps<{
+  account: DUIAccount
+  currentSelectedAccountId?: string
+}>()
+
+defineEmits<{
+  (e: 'select', account: DUIAccount): void
+}>()
+
+const userAvatar = computed(() => {
+  return {
+    name: props.account.accountInfo.userInfo.name,
+    avatar: props.account.accountInfo.userInfo.avatar
+  }
+})
+
+const tip = computed(() => {
+  let value = ''
+  if (props.account.accountInfo.isDefault) value += 'This is your default account. '
+  if (!props.account.isValid) value += 'This account is not reachable.'
+  return value === '' ? null : value
+})
+</script>

packages/dui3/components/accounts/Menu.vue

@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <button v-tippy="`Click to change the account.`" @click="showAccountsDialog = true">
+      <UserAvatar v-if="!showAccountsDialog" :user="user" hover-effect />
+      <UserAvatar v-else hover-effect>
+        <XMarkIcon class="w-6 h-6" />
+      </UserAvatar>
+    </button>
+    <LayoutDialog
+      v-model:open="showAccountsDialog"
+      title="Select account"
+      fullscreen="none"
+    >
+      <CommonLoadingBar :loading="isLoading" class="my-0" />
+      <AccountsItem
+        v-for="acc in accounts"
+        :key="acc.accountInfo.id"
+        :current-selected-account-id="currentSelectedAccountId"
+        :account="(acc as DUIAccount)"
+        class="rounded-lg mb-2"
+        @select="selectAccount(acc as DUIAccount)"
+      />
+      <FormButton text size="xs" @click="accountStore.refreshAccounts()">
+        Refresh accounts
+      </FormButton>
+    </LayoutDialog>
+  </div>
+</template>
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { XMarkIcon } from '@heroicons/vue/20/solid'
+import type { DUIAccount } from '~/store/accounts'
+import { useAccountStore } from '~/store/accounts'
+import { useMixpanel } from '~/lib/core/composables/mixpanel'
+
+const { trackEvent } = useMixpanel()
+const app = useNuxtApp()
+
+const props = defineProps<{
+  currentSelectedAccountId?: string
+}>()
+
+defineEmits<{
+  (e: 'select', account: DUIAccount): void
+}>()
+
+const showAccountsDialog = ref(false)
+
+app.$baseBinding.on('documentChanged', () => {
+  showAccountsDialog.value = false
+})
+
+watch(showAccountsDialog, (newVal) => {
+  if (newVal) {
+    void accountStore.refreshAccounts()
+    void trackEvent('DUI3 Action', { name: 'Account menu open' })
+  }
+})
+
+const accountStore = useAccountStore()
+const { accounts, defaultAccount, userSelectedAccount, isLoading } =
+  storeToRefs(accountStore)
+
+const selectAccount = (acc: DUIAccount) => {
+  userSelectedAccount.value = acc
+  accountStore.setUserSelectedAccount(acc) // saves the selected account id into DUI3Config.db for later use
+  showAccountsDialog.value = false
+  void trackEvent('DUI3 Action', { name: 'Account change' })
+}
+
+const user = computed(() => {
+  if (!defaultAccount.value) return undefined
+  let acc = defaultAccount.value
+  if (props.currentSelectedAccountId) {
+    acc = accounts.value.find(
+      (acc) => acc.accountInfo.id === props.currentSelectedAccountId
+    ) as DUIAccount
+  }
+  return {
+    name: acc.accountInfo.userInfo.name,
+    avatar: acc.accountInfo.userInfo.avatar
+  }
+})
+</script>

packages/dui3/components/automate/CreateDialog.vue

@@ -0,0 +1,158 @@
+<!-- NOT WILL BE USED SINCE WE ENABLE AUTOMATION CREATION FROM DUI3 -->
+<template>
+  <div class="p-0">
+    <slot name="activator" :toggle="toggleDialog"></slot>
+    <LayoutDialog
+      v-model:open="showAutomateDialog"
+      :title="`Settings`"
+      fullscreen="none"
+    >
+      <div v-if="hasFunctions">
+        <FormSelectBase
+          key="name"
+          v-model="selectedFunction"
+          clearable
+          label="Automate functions"
+          placeholder="Nothing selected"
+          name="Functions"
+          show-label
+          :items="functions"
+          mount-menu-on-body
+        >
+          <template #something-selected="{ value }">
+            <span>{{ value.name }}</span>
+          </template>
+          <template #option="{ item }">
+            <div class="flex items-center">
+              <span class="truncate">{{ item.name }}</span>
+            </div>
+          </template>
+        </FormSelectBase>
+      </div>
+      <div v-if="selectedFunction && finalParams && step === 0">
+        <FormJsonForm
+          ref="jsonForm"
+          :data="data"
+          :schema="finalParams"
+          class="space-y-4"
+          :validate-on-mount="false"
+          @change="handler"
+        />
+      </div>
+      <div v-if="step === 1">
+        <FormTextInput
+          v-model="automationName"
+          name="automationName"
+          label="Automation name"
+          color="foundation"
+          show-label
+          help="Give your automation a name"
+          placeholder="Name"
+          show-required
+          validate-on-value-update
+        />
+      </div>
+      <FormButton
+        v-if="selectedFunction && step === 0"
+        size="sm"
+        class="mt-4"
+        @click="step++"
+      >
+        Next
+      </FormButton>
+      <FormButton
+        v-if="selectedFunction && step === 1"
+        size="sm"
+        class="mt-4"
+        @click="createAutomationHandler"
+      >
+        Create
+      </FormButton>
+    </LayoutDialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import type { AutomateFunctionItemFragment } from '~/lib/common/generated/gql/graphql'
+import {
+  automateFunctionsQuery,
+  createAutomationMutation
+} from '~/lib/graphql/mutationsAndQueries'
+import { provideApolloClient, useMutation, useQuery } from '@vue/apollo-composable'
+import { useAccountStore } from '~/store/accounts'
+import type { ApolloError } from '@apollo/client/errors'
+import { formatVersionParams } from '~/lib/common/helpers/jsonSchema'
+import { useJsonFormsChangeHandler } from '~/lib/core/composables/jsonSchema'
+
+const props = defineProps<{
+  projectId: string
+  modelId: string
+}>()
+
+const step = ref<number>(0)
+
+const automationName = ref<string>('')
+
+const accountStore = useAccountStore()
+const { activeAccount } = storeToRefs(accountStore)
+const accountId = computed(() => activeAccount.value?.accountInfo.id) // NOTE: none of the tokens here has read, write access to automate, only frontend tokens have. Keep in mind after first pass!
+
+const selectedFunction = ref<AutomateFunctionItemFragment>()
+
+const showAutomateDialog = ref(false)
+
+const toggleDialog = () => {
+  showAutomateDialog.value = !showAutomateDialog.value
+}
+
+const { mutate } = provideApolloClient(activeAccount.value.client)(() =>
+  useMutation(createAutomationMutation)
+)
+
+const createAutomationHandler = async () => {
+  const _res = await mutate({
+    projectId: props.projectId,
+    input: { name: automationName.value, enabled: false }
+  })
+  showAutomateDialog.value = false
+}
+
+const { result: functionsResult, onError } = useQuery(
+  automateFunctionsQuery,
+  () => ({}),
+  () => ({ clientId: accountId.value, debounce: 500, fetchPolicy: 'network-only' })
+)
+
+onError((err: ApolloError) => {
+  console.warn(err.message)
+})
+
+const functions = computed(() => functionsResult.value?.automateFunctions.items)
+const hasFunctions = computed(() => functions.value?.length !== 0)
+
+const release = computed(() =>
+  selectedFunction.value?.releases.items.length
+    ? selectedFunction.value?.releases.items[0]
+    : undefined
+)
+
+const finalParams = computed(() => formatVersionParams(release.value?.inputSchema))
+
+const { handler } = useJsonFormsChangeHandler({
+  schema: finalParams
+})
+
+console.log(finalParams)
+
+type DataType = Record<string, unknown>
+const data = computed(() => {
+  const kvp = {} as DataType
+  if (finalParams.value) {
+    Object.entries(finalParams.value).forEach((k, _) => {
+      kvp[k as unknown as string] = undefined
+    })
+  }
+  return kvp
+})
+</script>