@windward/integrations 0.0.1

package/.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

package/.eslintrc.js

@@ -0,0 +1,15 @@
+module.exports = {
+    root: true,
+    env: {
+        browser: true,
+        node: true,
+    },
+    extends: [
+        '@nuxtjs/eslint-config-typescript',
+        'plugin:nuxt/recommended',
+        'plugin:prettier/recommended',
+    ],
+    plugins: [],
+    // add your custom rules here
+    rules: {},
+}

package/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "semi": false,
+  "singleQuote": true
+}

package/README.md

@@ -0,0 +1,19 @@
+# Windward UI Integrations
+
+## Getting Started Locally with npm
+
+**Software Requirements**:
+
+-   Node v16+, npm v8+
+
+## New .env variables
+
+```
+BROADCAST_DRIVER=pusher
+BROADCAST_HOST=
+BROADCAST_PORT=
+# windward-development pusher key found on https://dashboard.pusher.com/
+BROADCAST_KEY=798e489618e5e8bce5a1
+BROADCAST_CLUSTER=mt1
+BROADCAST_FORCE_TLS=true
+```

package/babel.config.js

@@ -0,0 +1 @@
+module.exports = { presets: ["@babel/preset-env"] };

package/components/Integration/Driver/ManageAtutor.vue

@@ -0,0 +1,143 @@
+<template>
+    <div>
+        <div v-if="!render" class="integration-loading">
+            <v-progress-circular size="128" indeterminate />
+        </div>
+        <div v-if="render">
+            <v-row justify="center" align="center" class="mt-5">
+                <v-col cols="12">
+                    <v-switch
+                        v-model="integration.enabled"
+                        :label="
+                            $t(
+                                'windward.integrations.components.integration.driver.enabled'
+                            )
+                        "
+                    />
+
+                    <v-text-field
+                        v-model="integration.metadata.config.url"
+                        :label="
+                            $t(
+                                'windward.integrations.components.integration.driver.atutor.url'
+                            )
+                        "
+                        :hint="
+                            $t(
+                                'windward.integrations.components.integration.driver.atutor.url_hint'
+                            )
+                        "
+                    ></v-text-field>
+                    <v-text-field
+                        v-model="integration.metadata.config.username"
+                        :label="
+                            $t(
+                                'windward.integrations.components.integration.driver.atutor.username'
+                            )
+                        "
+                    ></v-text-field>
+                    <v-text-field
+                        v-model="integration.metadata.config.password"
+                        :label="
+                            $t(
+                                'windward.integrations.components.integration.driver.atutor.password'
+                            )
+                        "
+                        type="password"
+                    ></v-text-field>
+
+                    <v-text-field
+                        v-model="integration.metadata.config.aws_secure_url"
+                        :label="
+                            $t(
+                                'windward.integrations.components.integration.driver.atutor.aws_secure_url'
+                            )
+                        "
+                        :hint="
+                            $t(
+                                'windward.integrations.components.integration.driver.atutor.aws_secure_url_hint'
+                            )
+                        "
+                    ></v-text-field>
+
+                    <v-switch
+                        v-model="integration.metadata.config.ssl"
+                        :label="
+                            $t(
+                                'windward.integrations.components.integration.driver.ssl_enabled'
+                            )
+                        "
+                    />
+
+                    <TestConnection
+                        :disabled="
+                            !integration.metadata.config.url ||
+                            !integration.metadata.config.username ||
+                            !integration.metadata.config.password
+                        "
+                        :loading="testConnectionLoading"
+                        :errors="errorMessage"
+                        @click="onTestConnection"
+                    ></TestConnection>
+                </v-col>
+            </v-row>
+        </div>
+    </div>
+</template>
+
+<script>
+import TestConnection from '../TestConnection.vue'
+import ManageBaseVue from './ManageBase.vue'
+
+export default {
+    name: 'ManageAtutorDriver',
+    components: { TestConnection },
+    extends: ManageBaseVue,
+    data() {
+        return {
+            // formValid: true|false If this form is "complete" and passed validation on THIS component. Defined and watched in ManageBase.vue
+            // render: true|false If we should show the form aka when validation has passed. Defined and managed in ManageBase.vue
+            // integration: { metadata: {...} } The integration object to write to. Defined and loaded in ManageBase.vue
+            errorMessage: '',
+            testConnectionLoading: false,
+        }
+    },
+    methods: {
+        /**
+         * Lifecycle event called from ManageBase.vue when async fetch() completes.
+         * Once called this.integration will be available containing the integration model (or a new one)
+         */
+        onIntegrationLoaded() {
+            // Set SSL to enabled by default
+            if (_.get(this.integration.metadata.config, 'ssl', null) === null) {
+                this.integration.metadata.config.ssl = true
+            }
+        },
+        async onTestConnection() {
+            this.testConnectionLoading = true
+            const response = await this.testConnection(
+                this.integration.metadata
+            )
+
+            if (response.result) {
+                this.errorMessage = ''
+                this.$dialog.success(
+                    this.$t(
+                        'windward.integrations.shared.error.connect_success'
+                    )
+                )
+            } else {
+                this.errorMessage = response.message
+                this.$dialog.error(
+                    this.$t('windward.integrations.shared.error.connect_fail')
+                )
+            }
+
+            // We will indirectly validate the form via connection tests
+            // That way we can 100% confirm that the integration is valid
+            this.formValid = response.result
+            this.testConnectionLoading = false
+        },
+    },
+}
+</script>

package/components/Integration/Driver/ManageBase.vue

@@ -0,0 +1,145 @@
+<script>
+import { mapGetters } from 'vuex'
+import Organization from '../../../models/Organization'
+import OrganizationIntegration from '../../../models/OrganizationIntegration'
+import Vendor from '../../../models/Vendor'
+import FormVue from '~/components/Form'
+
+export default {
+    name: 'ManageBase',
+    components: {},
+    extends: FormVue,
+    props: {
+        vendor: { type: Object, required: true, default: null },
+    },
+    emits: ['update:integration'],
+    meta: {
+        privilege: {
+            '': {
+                writable: true,
+            },
+        },
+    },
+    data() {
+        return {
+            render: false,
+            integration: { metadata: { config: {} } },
+        }
+    },
+    async fetch() {
+        if (
+            !this.$PermissionService.userHasAccessTo(
+                'plugin.integration.organization',
+                'writable'
+            )
+        ) {
+            // Display an angry error that they can't view this driver
+            this.$dialog.error(this.$t('shared.error.description_401'), {
+                duration: null,
+                action: {
+                    text: this.$t('shared.forms.close'),
+                    onClick: (e, toastObject) => {
+                        toastObject.goAway(0)
+                    },
+                },
+            })
+            console.error('You do not have access to this integration!')
+
+            // Return so we don't even attempt loading
+            return false
+        }
+
+        // Load the existing org settings
+        const integration = await new Organization({
+            id: this.organization.id,
+        })
+            .integrations()
+            .where('integration_vendor_id', this.vendor.id)
+            .append(['metadata'])
+            .first()
+
+        if (_.isEmpty(integration)) {
+            // Configure a new organization integration, otherwise load existing
+            this.integration = new OrganizationIntegration({
+                integration_vendor_id: this.vendor.id,
+                organization_id: this.organization.id,
+                enabled: false,
+                metadata: { config: {} },
+            })
+        } else {
+            // Make sure the `metadata.config` prop exists
+            this.integration = integration
+        }
+
+        // Make sure metadata.config is an object
+        if (
+            _.isEmpty(_.get(this.integration.metadata, 'config')) ||
+            _.isArray(_.get(this.integration.metadata, 'config'))
+        ) {
+            this.integration.metadata.config = {}
+        }
+
+        this.onIntegrationLoaded()
+        this.render = true
+    },
+    computed: {
+        ...mapGetters({
+            organization: 'organization/get',
+        }),
+    },
+    methods: {
+        async testConnection(config) {
+            const response = await Vendor.config({
+                method: 'POST',
+                data: config,
+            })
+                .custom(
+                    'integration-vendors/' + this.vendor.id + '/test-connection'
+                )
+                .first()
+
+            return response
+        },
+        async save() {
+            let integration = new OrganizationIntegration(this.integration).for(
+                new Organization({ id: this.organization.id })
+            )
+
+            try {
+                integration = await integration.save()
+                this.integration = integration
+
+                // Clone and delete the metadata since we don't need to share that around
+                // Also include the vendor going back for easier mapping
+                const integrationEvent = _.cloneDeep(integration)
+                delete integrationEvent.metadata
+
+                this.$dialog.success(this.$t('shared.forms.saved'))
+                this.$emit('update:integration', integrationEvent)
+            } catch (e) {
+                this.$dialog.error(
+                    this.$t('windward.integrations.shared.error.save_failed')
+                )
+            }
+        },
+        async onSave() {
+            if (this.formValid) {
+                await this.save()
+            }
+        },
+
+        onIntegrationLoaded() {
+            console.warn(
+                'Integration/Driver/ManageBase.vue onIntegrationLoaded called. Not extended!'
+            )
+        },
+    },
+}
+</script>
+
+<style scoped>
+.integration-loading {
+    text-align: center;
+    height: 150px;
+}
+</style>

package/components/Integration/JobTable.vue

@@ -0,0 +1,308 @@
+<template>
+    <div>
+        <v-simple-table>
+            <template #default>
+                <thead>
+                    <tr>
+                        <th class="text-left">
+                            {{
+                                $t(
+                                    'windward.integrations.components.integration.job.job_id'
+                                )
+                            }}
+                        </th>
+                        <th class="text-left">
+                            {{
+                                $t(
+                                    'windward.integrations.components.integration.job.vendor_name'
+                                )
+                            }}
+                        </th>
+                        <th class="text-left">
+                            {{
+                                $t(
+                                    'windward.integrations.components.integration.job.status'
+                                )
+                            }}
+                        </th>
+                        <th class="text-left col-progress">
+                            {{
+                                $t(
+                                    'windward.integrations.components.integration.job.progress'
+                                )
+                            }}
+                        </th>
+                        <th class="text-left col-details">
+                            {{
+                                $t(
+                                    'windward.integrations.components.integration.job.details'
+                                )
+                            }}
+                        </th>
+                        <th class="text-left">
+                            {{
+                                $t(
+                                    'windward.integrations.components.integration.job.created'
+                                )
+                            }}
+                        </th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-if="jobs.length === 0">
+                        <td colspan="100%">
+                            {{
+                                $t(
+                                    'windward.integrations.components.integration.job.no_recent_jobs'
+                                )
+                            }}
+                        </td>
+                    </tr>
+                    <tr v-for="item in jobs" :key="item.id">
+                        <td>{{ shortUuid(item.id) }}</td>
+                        <td>
+                            {{
+                                vendorFromOrgIntegration(
+                                    item.organization_integration_id
+                                ).name
+                            }}
+                        </td>
+                        <td>
+                            {{
+                                $t(
+                                    'windward.integrations.components.integration.job.job_status.' +
+                                        item.status
+                                )
+                            }}
+                        </td>
+                        <td class="col-progress">
+                            <v-row
+                                v-if="
+                                    item.status !== 'failed' &&
+                                    item.progress < 100
+                                "
+                            >
+                                <v-col cols="2">
+                                    {{ Math.ceil(item.progress) }}%
+                                </v-col>
+                                <v-col cols="10">
+                                    <v-progress-linear
+                                        v-model="item.progress"
+                                        buffer-value="0"
+                                        height="15"
+                                        color="primary"
+                                        stream
+                                    >
+                                    </v-progress-linear>
+                                </v-col>
+                            </v-row>
+                            <span v-else-if="item.status !== 'failed'">
+                                {{
+                                    $t(
+                                        'windward.integrations.components.integration.job.job_completed'
+                                    )
+                                }}
+                            </span>
+                            <div v-else>
+                                <v-icon color="error"> mdi-close </v-icon>
+                                <span class="sr-only">
+                                    {{
+                                        $t(
+                                            'windward.integrations.components.integration.job.job_status.failed'
+                                        )
+                                    }}
+                                </span>
+                                {{ Math.ceil(item.progress) }}%
+                            </div>
+                        </td>
+                        <td class="col-details">
+                            {{ jobDetails(item) }}
+                        </td>
+                        <td>{{ $d(new Date(item.created_at), 'long') }}</td>
+                    </tr>
+                </tbody>
+            </template>
+        </v-simple-table>
+    </div>
+</template>
+
+<script>
+import Confetti from 'canvas-confetti'
+import _ from 'lodash'
+import { mapGetters } from 'vuex'
+import Vendor from '../../models/Vendor'
+import Organization from '../../models/Organization'
+
+export default {
+    name: 'IntegrationJobs',
+    props: {
+        channel: { type: String, required: true },
+        event: { type: String, required: true },
+    },
+    data() {
+        return {
+            socket: null,
+            vendors: [],
+            orgIntegrations: [],
+            jobs: [],
+        }
+    },
+    async fetch() {
+        await this.loadJobs()
+    },
+    computed: {
+        ...mapGetters({
+            organization: 'organization/get',
+        }),
+        // Filters are deprecated. Use computed methods instead
+        shortUuid() {
+            return (v) => {
+                if (typeof v === 'undefined' || v === '') {
+                    return '-'
+                }
+                return v.substring(v.length - 6).toUpperCase()
+            }
+        },
+        vendorFromOrgIntegration() {
+            return (id) => {
+                const orgIntegration = this.orgIntegrations.find(
+                    (o) => o.id === id
+                )
+                let vendor = { name: '???' }
+                if (orgIntegration) {
+                    const foundVendor = this.vendors.find(
+                        (v) => v.id === orgIntegration.integration_vendor_id
+                    )
+                    if (foundVendor) {
+                        vendor = foundVendor
+                    }
+                }
+                // this.orgIntegrations.map(({ foo }) => foo)
+                return vendor
+            }
+        },
+        jobDetails() {
+            return (job) => {
+                if (
+                    _.get(job.metadata, 'import.remote_course.id') &&
+                    _.get(job.metadata, 'import.remote_course.name')
+                ) {
+                    return this.$t(
+                        'windward.integrations.components.integration.job.job_details.import_course',
+                        [
+                            _.get(job.metadata, 'import.remote_course.id'),
+                            _.get(job.metadata, 'import.remote_course.name'),
+                        ]
+                    )
+                }
+
+                return this.$t(
+                    'windward.integrations.components.integration.job.job_details.none'
+                )
+            }
+        },
+    },
+    beforeUnmount() {
+        this.socket.leave(this.channel)
+    },
+    mounted() {
+        this.socket = this.$Integration.getSocket()
+        this.connect(this.channel, this.event)
+    },
+    methods: {
+        doConfetti() {
+            // launch a few confetti from the left edge
+            Confetti({
+                particleCount: 150,
+                angle: 60,
+                spread: 55,
+                origin: { x: 0 },
+            })
+            // and launch a few from the right edge
+            Confetti({
+                particleCount: 150,
+                angle: 120,
+                spread: 55,
+                origin: { x: 1 },
+            })
+        },
+        async loadJobs() {
+            this.vendors = await Vendor.get()
+
+            this.orgIntegrations = await new Organization({
+                id: this.organization.id,
+            })
+                .integrations()
+                .include('vendor')
+                .get()
+
+            this.jobs = await new Organization({
+                id: this.organization.id,
+            })
+                .integrationJobs()
+                .orderBy('-created_at')
+                .limit(10)
+                .get()
+        },
+        connect(channel, event) {
+            this.socket.connector.pusher.connection.bind(
+                'connected',
+                function (socket) {
+                    // Connected to socket id: socket.socket_id
+                }
+            )
+            this.socket.connector.pusher.connection.bind(
+                'disconnected',
+                function () {
+                    // disconnected
+                }
+            )
+
+            // `Connecting to channel '${channel}' for event: '${event}`
+            this.socket.private(channel).listen(event, (eventData) => {
+                this.onSocketJob(eventData)
+            })
+        },
+
+        onSocketJob(data) {
+            if (_.isEmpty(data.integrationJob)) {
+                console.error('onSocketJob Missing data', data)
+                return false
+            }
+            let found = false
+
+            for (const job of this.jobs) {
+                if (job.id === data.integrationJob.id) {
+                    // If we found the job and it isn't completed
+                    // We check our local status state because if a socket message is "late" we don't want to un-complete a job by accident
+                    if (job.status !== 'completed') {
+                        job.status = data.integrationJob.status
+                        job.progress = data.integrationJob.progress
+                        job.metadata = data.integrationJob.metadata
+                    }
+
+                    if (job.status === 'completed') {
+                        this.doConfetti()
+                    }
+
+                    found = true
+                }
+            }
+            if (!found) {
+                const newJob = data.integrationJob
+                // Push to the top
+                this.jobs.unshift(newJob)
+            }
+        },
+    },
+}
+</script>
+
+<style scoped>
+.col-progress {
+    min-width: 200px;
+}
+.col-details {
+    max-width: 100px;
+}
+</style>