feat: sched connector ui (CM-1085)

frontend/src/config/identities/index.ts

@@ -22,6 +22,7 @@ import slack from './slack/config';
 import stackoverflow from './stackoverflow/config';
 import tnc from './tnc/config';
 import twitter from './twitter/config';
+import sched from './sched/config';
 import zapier from './zapier/config';
 
 export interface IdentityConfig {
@@ -75,4 +76,5 @@ export const lfIdentities: Record<string, IdentityConfig> = {
   n8n,
   training_cert: tnc,
   zapier,
+  sched,
 };

frontend/src/config/identities/sched/config.ts

@@ -0,0 +1,14 @@
+import { IdentityConfig } from '@/config/identities';
+
+const image = new URL('@/assets/images/identities/sched.png', import.meta.url).href;
+
+const sched: IdentityConfig = {
+  key: 'sched',
+  name: 'Sched',
+  image,
+  member: {
+    placeholder: 'Sched username or email address',
+  },
+};
+
+export default sched;

frontend/src/config/integrations/index.ts

@@ -16,6 +16,7 @@ import gitlab from './gitlab/config';
 import gerrit from './gerrit/config';
 import discourse from './discourse/config';
 import devto from './devto/config';
+import sched from './sched/config';
 
 export interface ActionRequiredMessage {
   key: string
@@ -67,4 +68,5 @@ export const lfIntegrations: (useGitHubNango?: boolean) => Record<string, Integr
   stackoverflow,
   discourse,
   devto,
+  sched,
 });

frontend/src/config/integrations/sched/components/sched-connect.vue

@@ -0,0 +1,38 @@
+<template>
+  <lf-button
+    type="outline"
+    @click="isSchedSettingsDrawerVisible = true"
+  >
+    <lf-icon name="link-simple" />
+    <slot>Connect</slot>
+  </lf-button>
+
+  <lf-sched-settings-drawer
+    v-if="isSchedSettingsDrawerVisible"
+    v-model="isSchedSettingsDrawerVisible"
+    :integration="props.integration"
+    :segment-id="props.segmentId"
+    :grandparent-id="props.grandparentId"
+  />
+</template>
+
+<script setup lang="ts">
+import { defineProps, ref } from 'vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+import LfButton from '@/ui-kit/button/Button.vue';
+import LfSchedSettingsDrawer from '@/config/integrations/sched/components/sched-settings-drawer.vue';
+
+const props = defineProps<{
+  integration: any;
+  segmentId: string;
+  grandparentId: string;
+}>();
+
+const isSchedSettingsDrawerVisible = ref(false);
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfSchedConnect',
+};
+</script>

frontend/src/config/integrations/sched/components/sched-dropdown.vue

@@ -0,0 +1,26 @@
+<template>
+  <lf-dropdown-item @click="emit('open-setting')">
+    <lf-icon name="sliders-simple" type="regular" />
+    Settings
+  </lf-dropdown-item>
+</template>
+
+<script setup lang="ts">
+import { defineProps } from 'vue';
+import LfDropdownItem from '@/ui-kit/dropdown/DropdownItem.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+
+defineProps<{
+  integration: any;
+  segmentId: string;
+  grandparentId: string;
+}>();
+
+const emit = defineEmits<{(e: 'open-setting'): void }>();
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfSchedDropdown',
+};
+</script>

frontend/src/config/integrations/sched/components/sched-params.vue

@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <div class="flex items-center gap-1">
+      <el-popover trigger="hover" placement="top" popper-class="!w-72">
+        <template #reference>
+          <div class="flex items-center gap-1">
+            <div class="text-gray-600 text-2xs flex items-center leading-5 font-medium">
+              <lf-icon name="calendar" class="!text-gray-600 mr-1 h-4 flex items-center" />
+              {{ events.length }} {{ events.length === 1 ? 'event' : 'events' }}
+            </div>
+          </div>
+        </template>
+
+        <div class="max-h-44 overflow-auto -my-1 px-1">
+          <p class="text-gray-400 text-sm font-semibold mb-4">
+            Sched events
+          </p>
+          <article
+            v-for="event in events"
+            :key="event.eventId"
+            class="flex flex-col mb-4 last:mb-0"
+          >
+            <span class="text-gray-900 text-sm font-medium max-w-3xs truncate">
+              {{ event.eventName || event.subdomain }}
+            </span>
+            <span class="text-gray-500 text-xs max-w-3xs truncate">
+              {{ event.subdomain }}.sched.com
+            </span>
+          </article>
+        </div>
+      </el-popover>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+
+const props = defineProps({
+  integration: {
+    type: Object,
+    default: () => {},
+  },
+});
+
+const events = computed<{ eventId: string; eventName: string; subdomain: string }[]>(
+  () => props.integration?.settings?.events ?? [],
+);
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfSchedParams',
+};
+</script>