@windward/integrations 0.0.7 → 0.0.9

package/components/ExternalIntegration/Driver/Lti1p3/ManageProviders.vue

@@ -0,0 +1,259 @@
+<template>
+    <div>
+        <Dialog
+            color="primary"
+            action-save
+            action-save-new
+            @click:save="onSaved"
+        >
+            <template #title>{{
+                $t(
+                    'windward.integrations.components.external_integration.driver.lti1p1.new'
+                )
+            }}</template>
+            <template #trigger>{{ $t('shared.forms.new') }}</template>
+            <template #form="{ on, attrs }"
+                ><ManageProvider v-bind="attrs" v-on="on"></ManageProvider
+            ></template>
+        </Dialog>
+
+        <v-data-table
+            :headers="headers"
+            :items="providers"
+            :items-per-page="10"
+            class="elevation-1"
+        >
+            <template #[`item.target`]="{ item }">
+                <ProviderTargetViewer
+                    class="field--target text-truncate"
+                    :target="item.target"
+                ></ProviderTargetViewer>
+            </template>
+            <template #[`item.metadata.tool_public_keyset_url`]="{ item }">
+                <SecretField
+                    v-model="item.metadata.tool_public_keyset_url"
+                    :hidden="false"
+                ></SecretField>
+            </template>
+            <template #[`item.metadata.tool_oidc_auth_endpoint`]="{ item }">
+                <SecretField
+                    v-model="item.metadata.tool_oidc_auth_endpoint"
+                    :hidden="false"
+                ></SecretField>
+            </template>
+            <template #[`item.url`]="{ item }">
+                <SecretField v-model="item.url" :hidden="false"></SecretField>
+            </template>
+
+            <template #[`item.enabled`]="{ item }">
+                <v-icon :color="item.enabled ? 'success' : 'error'"
+                    >{{ item.enabled ? 'mdi-check' : 'mdi-close' }}
+                </v-icon>
+                <span v-if="!item.enabled" class="sr-only">{{
+                    $t('shared.forms.enabled')
+                }}</span>
+            </template>
+
+            <template #[`item.grade_sync`]="{ item }">
+                <v-icon :color="item.grade_sync ? 'success' : 'error'"
+                    >{{ item.grade_sync ? 'mdi-check' : 'mdi-close' }}
+                </v-icon>
+                <span v-if="!item.grade_sync" class="sr-only">{{
+                    $t(
+                        'windward.integrations.components.external_integration.grade_sync'
+                    )
+                }}</span>
+            </template>
+
+            <template #[`item.created_at`]="{ item }">
+                {{ $d(new Date(item.created_at), 'short') }}
+            </template>
+            <template #[`item.actions`]="{ index, item }">
+                <Dialog color="primary" action-save @click:save="onSaved">
+                    <template #title>{{
+                        $t(
+                            'windward.integrations.components.external_integration.driver.lti1p3.edit'
+                        )
+                    }}</template>
+                    <template #trigger>
+                        <v-icon small>mdi-pencil</v-icon>
+                        <span class="sr-only">{{
+                            $t(
+                                'windward.integrations.components.external_integration.driver.lti1p3.edit'
+                            )
+                        }}</span>
+                    </template>
+                    <template #form="{ on, attrs }"
+                        ><ManageProvider
+                            v-model="providers[index]"
+                            v-bind="attrs"
+                            v-on="on"
+                        ></ManageProvider
+                    ></template>
+                </Dialog>
+
+                <v-btn icon>
+                    <v-icon @click="onConfirmDelete(item)"> mdi-delete </v-icon>
+                    <span class="sr-only">{{ $t('shared.forms.delete') }}</span>
+                </v-btn>
+            </template>
+        </v-data-table>
+    </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import { mapGetters } from 'vuex'
+import LtiProvider from '../../../../models/ExternalIntegration/LtiProvider'
+import SecretField from '../../../SecretField.vue'
+import ProviderTargetViewer from '../../ProviderTargetViewer.vue'
+import ManageProvider from './ManageProvider.vue'
+import Dialog from '~/components/Dialog.vue'
+import Organization from '~/models/Organization'
+import Course from '~/models/Course'
+
+export default {
+    name: 'ManageLti1p1ProvidersDriver',
+    components: { SecretField, Dialog, ManageProvider, ProviderTargetViewer },
+    data() {
+        return {
+            providers: [],
+            headers: [
+                {
+                    text: this.$t(
+                        'windward.integrations.components.external_integration.target'
+                    ),
+                    value: 'target',
+                },
+                {
+                    text: this.$t(
+                        'windward.integrations.components.external_integration.driver.lti1p3.tool_public_keyset_url'
+                    ),
+                    value: 'metadata.tool_public_keyset_url',
+                },
+                {
+                    text: this.$t(
+                        'windward.integrations.components.external_integration.driver.lti1p3.tool_oidc_auth_endpoint'
+                    ),
+                    value: 'metadata.tool_oidc_auth_endpoint',
+                },
+                {
+                    text: this.$t(
+                        'windward.integrations.components.external_integration.launch_url'
+                    ),
+                    value: 'url',
+                },
+                {
+                    text: this.$t('shared.forms.enabled'),
+                    value: 'enabled',
+                },
+                {
+                    text: this.$t(
+                        'windward.integrations.components.external_integration.grade_sync'
+                    ),
+                    value: 'grade_sync',
+                },
+                { text: this.$t('shared.forms.created'), value: 'created_at' },
+                {
+                    text: this.$t('shared.forms.actions'),
+                    value: 'actions',
+                    sortable: false,
+                },
+            ],
+        }
+    },
+
+    async fetch() {
+        if (
+            !this.$PermissionService.userHasAccessTo(
+                'plugin.windward.integrations.course.externalIntegration',
+                'readable'
+            ) ||
+            _.isEmpty(this.organization.id) ||
+            _.isEmpty(this.course.id)
+        ) {
+            // 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)
+                    },
+                },
+            })
+            if (_.isEmpty(this.organization.id) || _.isEmpty(this.course.id)) {
+                // eslint-disable-next-line no-console
+                console.error(
+                    'Cannot load external integrations because organization or course is not set!'
+                )
+            } else {
+                // eslint-disable-next-line no-console
+                console.error(
+                    'You do not have access to this external integration!'
+                )
+            }
+
+            // Return so we don't even attempt loading
+            return false
+        }
+
+        await this.loadProviders()
+    },
+    computed: {
+        ...mapGetters({
+            organization: 'organization/get',
+            course: 'course/get',
+        }),
+    },
+    methods: {
+        onSaved() {
+            this.loadProviders()
+        },
+        async loadProviders() {
+            this.providers = await new LtiProvider()
+                .for(
+                    new Organization({ id: this.organization.id }),
+                    new Course({ id: this.course.id })
+                )
+                .where('version', '1.3')
+                .get()
+        },
+        onConfirmDelete(provider) {
+            this.$dialog.show(this.$t('shared.forms.confirm_delete_text'), {
+                icon: 'mdi-help',
+                duration: null,
+                action: [
+                    {
+                        text: this.$t('shared.forms.cancel'),
+                        onClick: (_e, toastObject) => {
+                            toastObject.goAway(0)
+                        },
+                    },
+                    {
+                        text: this.$t('shared.forms.confirm'),
+                        // router navigation
+                        onClick: (_e, toastObject) => {
+                            this.deleteProvider(provider)
+                            toastObject.goAway(0)
+                        },
+                    },
+                ],
+            })
+        },
+        async deleteProvider(provider) {
+            await provider.delete()
+            this.$dialog.success(this.$t('shared.response.deleted'))
+            // Reload providers now that we deleted one
+            this.loadProviders()
+        },
+    },
+}
+</script>
+
+<style scoped>
+.field--target {
+    max-width: 15em;
+    display: inline-block;
+}
+</style>

package/components/ExternalIntegration/Driver/ManageLti1p1.vue

@@ -5,7 +5,7 @@
                 <v-expansion-panel-header>
                     {{
                         $t(
-                            'windward.integrations.components.external_integration.driver.lti1p1.provider_panel'
+                            'windward.integrations.components.external_integration.provider_panel_title'
                         )
                     }}
                 </v-expansion-panel-header>
@@ -17,7 +17,7 @@
                 <v-expansion-panel-header>
                     {{
                         $t(
-                            'windward.integrations.components.external_integration.driver.lti1p1.consumer_panel'
+                            'windward.integrations.components.external_integration.consumer_panel_title'
                         )
                     }}
                 </v-expansion-panel-header>

package/components/ExternalIntegration/Driver/ManageLti1p3.vue

@@ -0,0 +1,45 @@
+<template>
+    <div>
+        <v-expansion-panels v-model="panel">
+            <v-expansion-panel>
+                <v-expansion-panel-header>
+                    {{
+                        $t(
+                            'windward.integrations.components.external_integration.provider_panel_title'
+                        )
+                    }}
+                </v-expansion-panel-header>
+                <v-expansion-panel-content>
+                    <ManageProviders></ManageProviders>
+                </v-expansion-panel-content>
+            </v-expansion-panel>
+            <v-expansion-panel>
+                <v-expansion-panel-header>
+                    {{
+                        $t(
+                            'windward.integrations.components.external_integration.consumer_panel_title'
+                        )
+                    }}
+                </v-expansion-panel-header>
+                <v-expansion-panel-content>
+                    <!--                    <ManageConsumers></ManageConsumers>-->
+                </v-expansion-panel-content>
+            </v-expansion-panel>
+        </v-expansion-panels>
+    </div>
+</template>
+
+<script>
+import ManageProviders from './Lti1p3/ManageProviders.vue'
+/* import ManageConsumers from './Lti1p3/ManageConsumers.vue' */
+
+export default {
+    name: 'ManageLti1p3Driver',
+    components: { ManageProviders },
+    data() {
+        return {
+            panel: 0,
+        }
+    },
+}
+</script>

package/components/ExternalIntegration/ProviderTargetPicker.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <v-radio-group
-            v-model="localMetadata.target_type"
+            v-model="provider.target_type"
             row
             @change="onTargetTypeChange"
         >
@@ -50,10 +50,9 @@
 
         <div
             v-if="
-                localMetadata.target_type === 'course_content' ||
-                localMetadata.target_type ===
-                    'locked_course_content_children' ||
-                localMetadata.target_type === 'locked_course_content'
+                provider.target_type === 'course_content' ||
+                provider.target_type === 'locked_course_content_children' ||
+                provider.target_type === 'locked_course_content'
             "
             class="content-tree secondary"
         >
@@ -91,15 +90,13 @@ import { mapGetters } from 'vuex'
 export default {
     name: 'ExternalIntegrationProviderTargetPicker',
     props: {
-        target: { type: String, required: true, default: '' },
-        metadata: { type: Object, required: true, default: () => {} },
+        value: { type: Object, required: true },
     },
     data() {
         return {
             selectedContent: null,
             selectedTreeviewContent: [],
-            localTarget: '',
-            localMetadata: {},
+            provider: {},
         }
     },
     computed: {
@@ -110,41 +107,28 @@ export default {
     },
     watch: {
         // Apply any changes coming up
-        target: {
+        value: {
             handler(value) {
-                this.localTarget = _.cloneDeep(value)
-            },
-        },
-        metadata: {
-            deep: true,
-            handler(value) {
-                this.localMetadata = _.cloneDeep(value)
+                this.provider = _.cloneDeep(value)
             },
         },
     },
     mounted() {
         // Init our local vars
-        this.localTarget = _.cloneDeep(this.target)
-        this.localMetadata = _.cloneDeep(this.metadata)
+        this.provider = _.cloneDeep(this.value)
 
         // Set the target_type key if it doesn't exist
-        if (!this.localMetadata.target_type) {
-            this.localMetadata.target_type = ''
+        if (!this.provider.target_type) {
+            this.provider.target_type = 'course'
         }
 
         // Preset the selected content
-        if (this.localTarget) {
-            const match = this.localTarget.match(
-                /\/content\/(?<content_id>[a-zA-Z0-9-]{36})/i
-            )
-
-            if (!_.isEmpty(match) && _.get(match, 'groups.content_id', null)) {
-                this.setSelectedContentById(
-                    _.get(match, 'groups.content_id', null)
-                )
+        if (this.provider.target) {
+            if (!_.isEmpty(this.provider.course_content_id)) {
+                this.setSelectedContentById(this.provider.course_content_id)
             }
         }
-        this.sync(this.localMetadata.target_type)
+        this.sync(this.provider.target_type)
     },
     methods: {
         setSelectedContentById(id) {
@@ -161,13 +145,14 @@ export default {
                     targetType === 'locked_course_content_children')
             ) {
                 url = `/course/${this.course.id}/content/${this.selectedContent.id}`
+                this.provider.course_content_id = this.selectedContent.id
             } else if (targetType === 'course') {
                 url = `/course/${this.course.id}/`
+                this.provider.course_content_id = null
             }
-            this.localTarget = url
+            this.provider.target = url
             // Sync up the changes to the parent component
-            this.$emit('update:target', this.localTarget)
-            this.$emit('update:metadata', this.localMetadata)
+            this.$emit('input', this.provider)
         },
         onTargetTypeChange(e) {
             // Reset the selected content if you pick by course
@@ -182,8 +167,7 @@ export default {
             let isIncluded = false
             // If we aren't including children then return hard false
             if (
-                this.localMetadata.target_type !==
-                'locked_course_content_children'
+                this.provider.target_type !== 'locked_course_content_children'
             ) {
                 return false
             }
@@ -220,7 +204,7 @@ export default {
                 this.selectedContent = null
             }
 
-            this.sync(this.localMetadata.target_type)
+            this.sync(this.provider.target_type)
         },
     },
 }

package/components/Integration/Driver/ManageAtutor.vue

@@ -16,6 +16,7 @@
                     />
 
                     <v-text-field
+                        ref="atutor_url"
                         v-model="integration.metadata.config.url"
                         :label="
                             $t(
@@ -27,6 +28,7 @@
                                 'windward.integrations.components.integration.driver.atutor.url_hint'
                             )
                         "
+                        :rules="urlValidation"
                     ></v-text-field>
                     <v-text-field
                         v-model="integration.metadata.config.username"
@@ -47,6 +49,7 @@
                     ></v-text-field>
 
                     <v-text-field
+                        ref="aws-url"
                         v-model="integration.metadata.config.aws_secure_url"
                         :label="
                             $t(
@@ -58,6 +61,7 @@
                                 'windward.integrations.components.integration.driver.atutor.aws_secure_url_hint'
                             )
                         "
+                        :rules="urlValidation"
                     ></v-text-field>
 
                     <v-switch
@@ -100,6 +104,17 @@ export default {
             // integration: { metadata: {...} } The integration object to write to. Defined and loaded in ManageBase.vue
             errorMessage: '',
             testConnectionLoading: false,
+            urlValidation: [
+                (value) => {
+                    if (value && value.slice(-1) === '/') {
+                        return this.$t(
+                            'windward.integrations.components.integration.driver.remove_slash'
+                        )
+                    } else {
+                        return true
+                    }
+                },
+            ],
         }
     },
     methods: {

package/components/Integration/JobLog.vue

@@ -0,0 +1,98 @@
+<template>
+    <div>
+        <v-btn color="primary" outlined @click="onViewLog()">
+            <v-icon>mdi-note-search</v-icon>
+        </v-btn>
+        <Dialog v-model="logDialog" :trigger="false">
+            <template #title>{{
+                $t('windward.integrations.components.integration.job.view_log')
+            }}</template>
+            <template #form>
+                <v-progress-circular v-if="loading" size="128" indeterminate />
+                <div v-if="!loading">
+                    <SearchField v-model="search" hide-filters></SearchField>
+
+                    <v-alert
+                        v-for="logItem in filteredLog"
+                        :key="logItem.id"
+                        :type="logItem.level"
+                    >
+                        {{ logItem.message }}
+                    </v-alert>
+
+                    <p v-if="filteredLog.length === 0">
+                        {{
+                            $t(
+                                'windward.integrations.components.integration.job.log_no_results'
+                            )
+                        }}
+                    </p>
+                </div>
+            </template>
+        </Dialog>
+    </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import SearchField from '~/components/SearchField.vue'
+import Organization from '../../models/Organization'
+
+export default {
+    components: { SearchField },
+    name: 'IntegrationJobLog',
+    props: {
+        id: { type: String, required: true },
+    },
+    data() {
+        return {
+            search: {},
+            loading: true,
+            log: [],
+            logDialog: false,
+        }
+    },
+    computed: {
+        ...mapGetters({
+            organization: 'organization/get',
+        }),
+        filteredLog() {
+            if (!this.search.term || this.search.term.length < 3) {
+                return this.log
+            }
+            const filtered = this.log.filter((item) => {
+                return item.message
+                    .toLowerCase()
+                    .includes(this.search.term.toLowerCase())
+            })
+
+            return filtered
+        },
+    },
+    methods: {
+        async onViewLog() {
+            this.logDialog = true
+            this.log = []
+
+            const job = await new Organization({
+                id: this.organization.id,
+            })
+                .integrationJobs()
+                .with('log')
+                .find(this.id)
+
+            this.log = job.log
+            this.loading = false
+        },
+    },
+}
+</script>
+
+<style scoped>
+.col-progress {
+    min-width: 200px;
+}
+.col-details {
+    max-width: 100px;
+}
+</style>

package/components/Integration/JobTable.vue

@@ -42,7 +42,14 @@
                         <th class="text-left">
                             {{
                                 $t(
-                                    'windward.integrations.components.integration.job.created'
+                                    'windward.integrations.components.integration.job.started'
+                                )
+                            }}
+                        </th>
+                        <th class="text-left">
+                            {{
+                                $t(
+                                    'windward.integrations.components.integration.job.view_log'
                                 )
                             }}
                         </th>
@@ -119,6 +126,9 @@
                             {{ jobDetails(item) }}
                         </td>
                         <td>{{ $d(new Date(item.created_at), 'long') }}</td>
+                        <td>
+                            <JobLog :id="item.id"></JobLog>
+                        </td>
                     </tr>
                 </tbody>
             </template>
@@ -132,9 +142,11 @@ import _ from 'lodash'
 import { mapGetters } from 'vuex'
 import Vendor from '../../models/Vendor'
 import Organization from '../../models/Organization'
+import JobLog from './JobLog.vue'
 
 export default {
     name: 'IntegrationJobs',
+    components: { JobLog },
     props: {
         channel: { type: String, required: true },
         event: { type: String, required: true },
@@ -145,6 +157,8 @@ export default {
             vendors: [],
             orgIntegrations: [],
             jobs: [],
+            log: [],
+            logDialog: false,
         }
     },
     async fetch() {

package/i18n/en-US/components/content/blocks/external_integration/lti_consumer.ts

@@ -2,6 +2,8 @@ export default {
     launch: 'Launch',
     configure_warning:
         'This block needs to be configured. Please select a LTI tool in the settings panel.',
+    no_access:
+        'You do not have permissions to launch this link. Please contact your system administrator.',
     missing_tool: 'The tool id {0} is missing',
     unknown_error: 'Something went wrong! Could not launch this link!',
     link_disabled: 'Link disabled',

package/i18n/en-US/components/external_integration/driver/lti1p1.ts

@@ -1,6 +1,4 @@
 export default {
-    name: 'Name',
-    description: 'Description',
     key: 'Key',
     secret: 'Secret',
     parameter_name: 'Custom Parameter Name',
@@ -11,25 +9,6 @@ export default {
     change_secret: 'Change Secret',
     new_key: 'New Key',
     new_secret: 'New Secret',
-    target: 'Target',
-    target_url: 'Target Url',
-    launch_url: 'Launch Url',
     new: 'New LTI Link',
     edit: 'Edit LTI Link',
-    enabled: 'Enabled',
-    provider: 'Provider',
-    consumer: 'Consumer',
-    provider_panel: 'Provider (Students incoming to Windward)',
-    consumer_panel: 'Consumer (Students outgoing from Windward)',
-    role_map_panel: 'Role map',
-    role_in_host: 'Role in Host LMS',
-    role_in_local: 'Role in Windward',
-    remote_role: 'Remote Role name',
-    map_to_role: 'Map to Windward Role',
-    delete_role_map_item: 'Delete role map item',
-    add_role_map_item: 'Add role map item',
-    role_map_instructions:
-        'Only add roles to the below map if the host LMS uses different role names that you want to elevated permissions. Eg "Mentor" that you want to elevate to "External Instructor"',
-    role_map_warning:
-        'Only add roles to the below map if the host LMS uses different role names that you want to elevated permissions. Eg "Mentor" that you want to elevate to "External Instructor"',
 }