Merge branch 'main' into dependabot/npm_and_yarn/extensions/jupyterla…

…b/connect_jupyterlab/babel/traverse-7.23.2
posit-dev · Oct 18, 2023 · 5ba82dd · 5ba82dd
2 parents 5f16ed5 + 2b5bd7a
commit 5ba82dd
Show file tree

Hide file tree

Showing 23 changed files with 773 additions and 103 deletions.
diff --git a/test/.gitignore b/test/.gitignore
@@ -0,0 +1,2 @@
+go_cover.out
+go_coverage.html
diff --git a/web/src/App.vue b/web/src/App.vue
@@ -6,14 +6,14 @@
   >
     <q-header
       elevated
+      class="my-class"
     >
       <q-toolbar class="max-width-md q-pa-auto">
         <AppMenu />
         <WhitePositLogo
           width="70px"
           height="30px"
-          :fill="colorStore.activePallete.logo.fill"
-          :stroke="colorStore.activePallete.logo.stroke"
+          class="posit-logo"
           alt="Posit PBC Logo"
         />
         <q-toolbar-title class="q-pl-xs">
@@ -47,7 +47,8 @@ import WhitePositLogo from 'src/components/icons/WhitePositLogo.vue';
 
 import { useApi } from 'src/api';
 import { useDeploymentStore } from 'src/stores/deployment';
-import { useColorStore } from './stores/color';
+import { useColorStore } from 'src/stores/color';
+import { colorToHex } from 'src/utils/colorValues';
 
 import {
   EventStreamMessage,
@@ -119,3 +120,23 @@ onBeforeUnmount(() => {
 
 getInitialDeploymentState();
 </script>
+
+<style lang="scss">
+// Add colors to Quasar Palette (white and black)
+.text-white {
+  color: white !important;
+}
+.bg-white {
+  background: white !important;
+}
+.text-black {
+  color: black !important;
+}
+.bg-black {
+  background: black !important;
+}
+.posit-logo {
+  fill: v-bind('colorToHex(colorStore.activePallete.logo.fill)');
+  stroke: v-bind('colorToHex(colorStore.activePallete.logo.stroke)');
+}
+</style>
diff --git a/web/src/components/configurePublish/AccountCredential.vue b/web/src/components/configurePublish/AccountCredential.vue
@@ -0,0 +1,116 @@
+<!-- Copyright (C) 2023 by Posit Software, PBC. -->
+
+<template>
+  <q-item
+    tag="label"
+    class="q-my-sm row items-center"
+    :class="activeClass"
+  >
+    <q-item-section
+      avatar
+      top
+      class="col-1"
+    >
+      <q-radio
+        v-model="radioModel"
+        :val="account.name"
+        :color="colorStore.activePallete.bullet"
+      />
+    </q-item-section>
+    <q-item-section
+      class="q-ml-md"
+    >
+      <q-item-label>
+        {{ account.name }}
+      </q-item-label>
+      <q-item-label
+        caption
+        class="account-caption"
+      >
+        Account: {{ calculateName(account) }}
+      </q-item-label>
+      <q-item-label
+        caption
+        class="account-url"
+      >
+        URL: {{ account.url }}
+      </q-item-label>
+      <q-item-label
+        caption
+        class="q-pt-sm account-credential"
+      >
+        Credentials managed by: {{ account.source }}
+      </q-item-label>
+    </q-item-section>
+  </q-item>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed } from 'vue';
+import { Account } from 'src/api';
+import { useColorStore } from 'src/stores/color';
+import { colorToHex } from 'src/utils/colorValues';
+import { calculateName } from 'src/utils/accounts';
+
+const colorStore = useColorStore();
+
+const emit = defineEmits(['update:modelValue']);
+const props = defineProps({
+  modelValue: {
+    type: String,
+    required: true,
+  },
+  account: {
+    type: Object as PropType<Account>,
+    required: true,
+  },
+});
+
+const radioModel = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(newValue) {
+    emit('update:modelValue', newValue);
+  }
+});
+
+const selected = computed(() => {
+  return props.account.name === props.modelValue;
+});
+
+const activeClass = computed(() => {
+  return selected.value ? 'account-item-selected' : 'account-item-not-selected';
+});
+
+</script>
+
+<style>
+.account-item-selected {
+  border: v-bind('colorToHex(colorStore.activePallete.destination.outline)') solid 1px;
+  border-radius: 10px;
+  background-color: v-bind('colorToHex(colorStore.activePallete.destination.background.selected)');
+  color: v-bind('colorToHex(colorStore.activePallete.destination.text)');
+}
+
+.account-item-not-selected {
+  border: v-bind('colorToHex(colorStore.activePallete.destination.outline)') solid 1px;
+  border-radius: 10px;
+  background-color: v-bind('colorToHex(colorStore.activePallete.destination.background.unSelected)');
+  color: v-bind('colorToHex(colorStore.activePallete.destination.text)');
+}
+
+.account-caption {
+  color: v-bind('colorToHex(colorStore.activePallete.destination.caption)');
+}
+
+.account-url {
+  color: v-bind('colorToHex(colorStore.activePallete.destination.caption)');
+}
+
+.account-credential {
+  color: v-bind('colorToHex(colorStore.activePallete.destination.caption)');
+  font-size: x-small;
+  text-align: end;
+}
+</style>
diff --git a/web/src/components/configurePublish/AdvancedSettings.vue b/web/src/components/configurePublish/AdvancedSettings.vue
@@ -8,8 +8,7 @@
       <PublisherAdvancedLogo
         width="40px"
         height="40px"
-        :fill="colorStore.activePallete.icon.fill"
-        :stroke="colorStore.activePallete.icon.stroke"
+        class="advanced-logo"
       />
     </template>
     TODO: Show list of editable settings (and some as read-only)
@@ -21,6 +20,14 @@
 import LayoutPanel from 'src/components/configurePublish/LayoutPanel.vue';
 import PublisherAdvancedLogo from 'src/components/icons/PublisherAdvancedLogo.vue';
 import { useColorStore } from 'src/stores/color';
+import { colorToHex } from 'src/utils/colorValues';
 
 const colorStore = useColorStore();
 </script>
+
+<style>
+.advanced-logo {
+  fill: v-bind('colorToHex(colorStore.activePallete.icon.fill)');
+  stroke: v-bind('colorToHex(colorStore.activePallete.icon.stroke)');
+}
+</style>
diff --git a/web/src/components/configurePublish/CommonSettings.vue b/web/src/components/configurePublish/CommonSettings.vue
@@ -8,8 +8,7 @@
       <PublisherSettingsLogo
         width="40px"
         height="40px"
-        :fill="colorStore.activePallete.icon.fill"
-        :stroke="colorStore.activePallete.icon.stroke"
+        class="common-logo"
       />
     </template>
     TODO: Common settings, probably off the info panel in dashboard
@@ -21,6 +20,14 @@ import LayoutPanel from 'src/components/configurePublish/LayoutPanel.vue';
 import PublisherSettingsLogo from 'src/components/icons/PublisherSettingsLogo.vue';
 
 import { useColorStore } from 'src/stores/color';
+import { colorToHex } from 'src/utils/colorValues';
 
 const colorStore = useColorStore();
 </script>
+
+<style>
+.common-logo {
+  fill: v-bind('colorToHex(colorStore.activePallete.icon.fill)');
+  stroke: v-bind('colorToHex(colorStore.activePallete.icon.stroke)');
+}
+</style>
diff --git a/web/src/components/configurePublish/ConfigurePublish.vue b/web/src/components/configurePublish/ConfigurePublish.vue
@@ -12,32 +12,30 @@
       @publish="emit('publish')"
     />
     <q-list
-      bordered
       class="rounded-borders"
     >
       <DestinationTarget
         group="configurePublish"
+        class="q-my-sm"
       />
-      <q-separator />
       <FilesToPublish
         group="configurePublish"
+        class="q-my-sm"
       />
-      <q-separator />
       <PythonProject
         group="configurePublish"
+        class="q-my-sm"
       />
-      <q-separator />
       <!-- Common and Advanced Settings commented out until implemented. -->
       <CommonSettings
         v-if="false"
         group="configurePublish"
-      />
-      <q-separator
-        v-if="false"
+        class="q-my-sm"
       />
       <AdvancedSettings
         v-if="false"
         group="configurePublish"
+        class="q-my-sm"
       />
     </q-list>
   </q-page>

diff --git a/web/src/components/configurePublish/DeploymentMode.vue b/web/src/components/configurePublish/DeploymentMode.vue
@@ -11,7 +11,11 @@
         padding="2px"
         spread
         :options="options"
-        style="border: 1px solid #027be3;"
+        :text-color="colorStore.activePallete.deploymentMode.toggle.inActive.text"
+        :color="colorStore.activePallete.deploymentMode.toggle.inActive.background"
+        :toggle-text-color="colorStore.activePallete.deploymentMode.toggle.active.text"
+        :toggle-color="colorStore.activePallete.deploymentMode.toggle.active.background"
+        class="toggle"
       />
     </div>
   </div>
@@ -21,6 +25,10 @@
 import { PropType, computed } from 'vue';
 
 import { DeploymentModeType } from 'src/api/types/deployments.ts';
+import { useColorStore } from 'src/stores/color';
+import { colorToHex } from 'src/utils/colorValues';
+
+const colorStore = useColorStore();
 
 const emit = defineEmits(['update:modelValue']);
 
@@ -46,3 +54,9 @@ const value = computed({
 });
 
 </script>
+
+<style scoped>
+.toggle {
+  border: 1px solid v-bind('colorToHex(colorStore.activePallete.outline)');
+}
+</style>
diff --git a/web/src/components/configurePublish/DestinationTarget.vue b/web/src/components/configurePublish/DestinationTarget.vue
@@ -9,32 +9,76 @@
       <PublisherDestinationLogo
         width="40px"
         height="40px"
-        :fill="colorStore.activePallete.icon.fill"
-        :stroke="colorStore.activePallete.icon.stroke"
+        class="destination-logo"
       />
     </template>
-    TODO: select from previous deployments or add to existing or new targets
+    <div class="q-pa-sm">
+      <q-list>
+        <AccountCredential
+          v-for="account in accounts"
+          :key="account.name"
+          v-model="selectedAccountName"
+          :account="account"
+        />
+      </q-list>
+    </div>
   </LayoutPanel>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 
 import LayoutPanel from 'src/components/configurePublish/LayoutPanel.vue';
 import PublisherDestinationLogo from 'src/components/icons/PublisherDestinationLogo.vue';
+import AccountCredential from 'src/components/configurePublish/AccountCredential.vue';
 
 import { useDeploymentStore } from 'src/stores/deployment';
 import { useColorStore } from 'src/stores/color';
+import { colorToHex } from 'src/utils/colorValues';
+import { Account, useApi } from 'src/api';
+import { findAccount } from 'src/utils/accounts';
 
 const deploymentStore = useDeploymentStore();
 const colorStore = useColorStore();
 
+const selectedAccountName = ref('');
+
 const destinationTitle = computed(() => {
-  const accountName = deploymentStore.deployment?.target.accountName;
-  if (accountName) {
-    return `New deployment on ${accountName}`;
+  if (selectedAccountName.value) {
+    return `New deployment using ${selectedAccountName.value} account`;
   }
   return '';
 });
 
+const api = useApi();
+const accounts = ref(<Account[]>[]);
+
+onMounted(async() => {
+  try {
+    const response = await api.accounts.getAll();
+    accounts.value = response.data.accounts;
+    if (
+      accounts.value &&
+      deploymentStore.deployment &&
+      deploymentStore.deployment?.target.accountName
+    ) {
+      const account = findAccount(deploymentStore.deployment.target.accountName, accounts.value);
+      if (account) {
+        selectedAccountName.value = account.name;
+      } else {
+        // TODO: handle the error, we do not have a match.
+      }
+    }
+  } catch (err) {
+    // TODO: handle the error
+  }
+});
 </script>
+
+<style>
+.destination-logo {
+  fill: v-bind('colorToHex(colorStore.activePallete.icon.fill)');
+  stroke: v-bind('colorToHex(colorStore.activePallete.icon.stroke)');
+}
+
+</style>