@windward/integrations 0.0.6 → 0.0.7

package/components/Content/Blocks/ExternalIntegration/LtiConsumer.vue

@@ -28,16 +28,16 @@
             </v-alert>
 
             <v-form
-                name="ltiForm"
                 ref="ltiForm"
+                name="ltiForm"
                 :target="target"
                 :action="launchData.target || ''"
                 :method="launchData.method || 'POST'"
             >
                 <input
-                    type="hidden"
                     v-for="(value, key) of launchData.payload"
                     :key="key"
+                    type="hidden"
                     :name="key"
                     :value="value"
                 />
@@ -83,17 +83,8 @@ import Lti1p1Consumer from '../../../../models/ExternalIntegration/Lti1p1Consume
 
 export default {
     name: 'ContentBlockExternalIntegrationLti1p1Consumer',
-    extends: BaseContentBlock,
     components: { TextViewer },
     extends: BaseContentBlock,
-    beforeMount() {
-        if (_.isEmpty(this.block.metadata.config)) {
-            this.block.metadata.config = {}
-        }
-        if (_.isEmpty(this.block.metadata.config.tool_id)) {
-            this.block.metadata.config.tool_id = null
-        }
-    },
     data() {
         return {
             consumer: null,
@@ -105,6 +96,17 @@ export default {
             launched: false,
         }
     },
+    async fetch() {
+        this.target = this.frameId
+        await this.loadConsumer()
+    },
+    computed: {
+        ...mapGetters({
+            organization: 'organization/get',
+            course: 'course/get',
+            enrollment: 'enrollment/get',
+        }),
+    },
     watch: {
         'block.metadata.config.tool_id': {
             deep: true,
@@ -116,16 +118,13 @@ export default {
             },
         },
     },
-    async fetch() {
-        this.target = this.frameId
-        this.loadConsumer()
-    },
-    computed: {
-        ...mapGetters({
-            organization: 'organization/get',
-            course: 'course/get',
-            enrollment: 'enrollment/get',
-        }),
+    beforeMount() {
+        if (_.isEmpty(this.block.metadata.config)) {
+            this.block.metadata.config = {}
+        }
+        if (_.isEmpty(this.block.metadata.config.tool_id)) {
+            this.block.metadata.config.tool_id = null
+        }
     },
     mounted() {},
     methods: {
@@ -186,8 +185,8 @@ export default {
                     )
                 }
             } catch (e) {
-                console.error('LTI Link Launch Fail')
-                console.error(e)
+                // eslint-disable-next-line no-console
+                console.error('LTI Link Launch Fail', e)
             }
         },
         onBeforeSave() {

package/components/ExternalIntegration/Driver/Lti1p1/ManageConsumer.vue

@@ -31,8 +31,8 @@
                             $t('shared.forms.description')
                         }}</label>
                         <TextEditor
-                            v-model="consumer.description"
                             id="description"
+                            v-model="consumer.description"
                             :height="200"
                         ></TextEditor>
 
@@ -86,7 +86,7 @@
                             hide-default-footer
                             class="elevation-1"
                         >
-                            <template #item.key="{ index }">
+                            <template #[`item.key`]="{ index }">
                                 <v-text-field
                                     v-model="
                                         consumer.metadata.custom[index].key
@@ -98,7 +98,7 @@
                                     "
                                 />
                             </template>
-                            <template #item.value="{ index }">
+                            <template #[`item.value`]="{ index }">
                                 <v-text-field
                                     v-model="
                                         consumer.metadata.custom[index].value
@@ -110,7 +110,7 @@
                                     "
                                 />
                             </template>
-                            <template #item.actions="{ index }">
+                            <template #[`item.actions`]="{ index }">
                                 <v-btn
                                     text
                                     color="primary"
@@ -152,11 +152,11 @@
 <script>
 import _ from 'lodash'
 import { mapGetters } from 'vuex'
-import Lti1p1Consumer from '../../../../models/ExternalIntegration/Lti1p1Consumer'
-import FormVue from '~/components/Form'
 import Organization from '~/models/Organization'
 import Course from '~/models/Course'
 import TextEditor from '~/components/Text/TextEditor.vue'
+import Lti1p1Consumer from '../../../../models/ExternalIntegration/Lti1p1Consumer'
+import FormVue from '~/components/Form'
 
 export default {
     name: 'ManageLti1p1ConsumerDriver',
@@ -240,11 +240,13 @@ export default {
                 duration: null,
                 action: {
                     text: this.$t('shared.forms.close'),
-                    onClick: (e, toastObject) => {
+                    onClick: (_e, toastObject) => {
                         toastObject.goAway(0)
                     },
                 },
             })
+
+            // eslint-disable-next-line no-console
             console.error('You do not have access to this consumer!')
 
             // Return so we don't even attempt loading

package/components/ExternalIntegration/Driver/Lti1p1/ManageConsumers.vue

@@ -23,11 +23,11 @@
             :items-per-page="10"
             class="elevation-1"
         >
-            <template #item.description="{ item }">
+            <template #[`item.description`]="{ item }">
                 {{ item.description.replace(/(<([^>]+)>)/gi, '').trim() }}
             </template>
 
-            <template #item.enabled="{ item }">
+            <template #[`item.enabled`]="{ item }">
                 <v-icon :color="item.enabled ? 'success' : 'error'"
                     >{{ item.enabled ? 'mdi-check' : 'mdi-close' }}
                 </v-icon>
@@ -38,7 +38,7 @@
                 }}</span>
             </template>
 
-            <template #item.created_at="{ item }">
+            <template #[`item.created_at`]="{ item }">
                 {{ $d(new Date(item.created_at), 'long') }}
             </template>
             <template #[`item.actions`]="{ index, item }">
@@ -77,16 +77,15 @@
 <script>
 import _ from 'lodash'
 import { mapGetters } from 'vuex'
-import Lti1p1Consumer from '../../../../models/ExternalIntegration/Lti1p1Consumer'
-import SecretField from '../../../SecretField.vue'
-import ManageConsumer from './ManageConsumer.vue'
 import Course from '~/models/Course'
 import Organization from '~/models/Organization'
 import Dialog from '~/components/Dialog.vue'
+import Lti1p1Consumer from '../../../../models/ExternalIntegration/Lti1p1Consumer'
+import ManageConsumer from './ManageConsumer.vue'
 
 export default {
     name: 'ManageLti1p1ConsumersDriver',
-    components: { SecretField, Dialog, ManageConsumer },
+    components: { Dialog, ManageConsumer },
     data() {
         return {
             consumers: [],
@@ -139,16 +138,18 @@ export default {
                 duration: null,
                 action: {
                     text: this.$t('shared.forms.close'),
-                    onClick: (e, toastObject) => {
+                    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!'
                 )
@@ -167,7 +168,7 @@ export default {
         }),
     },
     methods: {
-        onSaved(e) {
+        onSaved() {
             this.loadConsumers()
         },
         async loadConsumers() {
@@ -185,14 +186,14 @@ export default {
                 action: [
                     {
                         text: this.$t('shared.forms.cancel'),
-                        onClick: (e, toastObject) => {
+                        onClick: (_e, toastObject) => {
                             toastObject.goAway(0)
                         },
                     },
                     {
                         text: this.$t('shared.forms.confirm'),
                         // router navigation
-                        onClick: (e, toastObject) => {
+                        onClick: (_e, toastObject) => {
                             this.deleteConsumer(consumer)
                             toastObject.goAway(0)
                         },

package/components/ExternalIntegration/Driver/Lti1p1/ManageProvider.vue

@@ -4,11 +4,18 @@
             <v-progress-circular size="128" indeterminate />
         </div>
         <div v-if="render">
-            <v-form v-model="formValid" @submit.prevent>
-                <v-row justify="center" align="center" class="mt-5">
+            <v-form ref="form" v-model="formValid" @submit.prevent>
+                <v-row justify="center" align="center">
                     <v-col cols="12">
+                        <ProviderTargetPicker
+                            :target.sync="provider.target"
+                            :metadata.sync="provider.metadata"
+                        ></ProviderTargetPicker>
+
                         <v-text-field
+                            id="target-url"
                             v-model="provider.target"
+                            disabled
                             :label="
                                 $t(
                                     'windward.integrations.components.external_integration.driver.lti1p1.target_url'
@@ -19,6 +26,7 @@
                                     'windward.integrations.components.external_integration.driver.lti1p1.target_url'
                                 )
                             "
+                            :rules="validation.existsRules"
                         ></v-text-field>
 
                         <v-switch
@@ -31,6 +39,7 @@
                         />
 
                         <v-text-field
+                            id="lti-key"
                             v-model="provider.metadata.key"
                             :placeholder="
                                 $t(
@@ -50,6 +59,7 @@
                         ></v-text-field>
 
                         <v-text-field
+                            id="lti-secret"
                             v-model="provider.metadata.secret"
                             :placeholder="
                                 $t(
@@ -240,15 +250,16 @@
 <script>
 import _ from 'lodash'
 import { mapGetters } from 'vuex'
-import Lti1p1Provider from '../../../../models/ExternalIntegration/Lti1p1Provider'
-import FormVue from '~/components/Form'
+import FormVue from '~/components/Form.vue'
 import Role from '~/models/Role'
 import Organization from '~/models/Organization'
 import Course from '~/models/Course'
+import ProviderTargetPicker from '../../ProviderTargetPicker.vue'
+import Lti1p1Provider from '../../../../models/ExternalIntegration/Lti1p1Provider'
 
 export default {
     name: 'ManageLti1p1ProviderDriver',
-    components: {},
+    components: { ProviderTargetPicker },
     extends: FormVue,
     props: {
         value: {
@@ -293,6 +304,7 @@ export default {
         ...mapGetters({
             organization: 'organization/get',
             course: 'course/get',
+            contentTree: 'content/getTree',
         }),
     },
     created() {
@@ -317,11 +329,12 @@ export default {
                 duration: null,
                 action: {
                     text: this.$t('shared.forms.close'),
-                    onClick: (e, toastObject) => {
+                    onClick: (_e, toastObject) => {
                         toastObject.goAway(0)
                     },
                 },
             })
+            // eslint-disable-next-line no-console
             console.error('You do not have access to this provider!')
 
             // Return so we don't even attempt loading
@@ -358,13 +371,30 @@ export default {
 
                 this.$dialog.success(this.$t('shared.forms.saved'))
                 this.$emit('update:provider', providerEvent)
+                this.$emit('input', provider)
             } catch (e) {
                 this.$dialog.error(
                     this.$t('windward.integrations.shared.error.save_failed')
                 )
             }
+
+            // Create a new provider to clear the form if the original value is empty aka new
+            if (_.isEmpty(this.value)) {
+                this.provider = new Lti1p1Provider({
+                    role_metadata: {},
+                    metadata: {},
+                })
+            }
         },
         async onSave() {
+            this.$refs.form.validate()
+            if (this.formValid) {
+                await this.save()
+            }
+        },
+
+        async onSaveAndNew() {
+            this.$refs.form.validate()
             if (this.formValid) {
                 await this.save()
             }

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

@@ -23,17 +23,23 @@
             :items-per-page="10"
             class="elevation-1"
         >
-            <template #item.metadata.key="{ item }">
+            <template #[`item.target`]="{ item }">
+                <ProviderTargetViewer
+                    class="field--target text-truncate"
+                    :target="item.target"
+                ></ProviderTargetViewer>
+            </template>
+            <template #[`item.metadata.key`]="{ item }">
                 <SecretField v-model="item.metadata.key"></SecretField>
             </template>
-            <template #item.metadata.secret="{ item }">
+            <template #[`item.metadata.secret`]="{ item }">
                 <SecretField v-model="item.metadata.secret"></SecretField>
             </template>
-            <template #item.url="{ item }">
+            <template #[`item.url`]="{ item }">
                 <SecretField v-model="item.url" :hidden="false"></SecretField>
             </template>
 
-            <template #item.enabled="{ item }">
+            <template #[`item.enabled`]="{ item }">
                 <v-icon :color="item.enabled ? 'success' : 'error'"
                     >{{ item.enabled ? 'mdi-check' : 'mdi-close' }}
                 </v-icon>
@@ -44,8 +50,8 @@
                 }}</span>
             </template>
 
-            <template #item.created_at="{ item }">
-                {{ $d(new Date(item.created_at), 'long') }}
+            <template #[`item.created_at`]="{ item }">
+                {{ $d(new Date(item.created_at), 'shorttime') }}
             </template>
             <template #[`item.actions`]="{ index, item }">
                 <Dialog color="primary" action-save @click:save="onSaved">
@@ -83,23 +89,24 @@
 <script>
 import _ from 'lodash'
 import { mapGetters } from 'vuex'
-import Lti1p1Provider from '../../../../models/ExternalIntegration/Lti1p1Provider'
-import SecretField from '../../../SecretField.vue'
-import ManageProvider from './ManageProvider.vue'
 import Course from '~/models/Course'
 import Organization from '~/models/Organization'
 import Dialog from '~/components/Dialog.vue'
+import Lti1p1Provider from '../../../../models/ExternalIntegration/Lti1p1Provider'
+import SecretField from '../../../SecretField.vue'
+import ProviderTargetViewer from '../../ProviderTargetViewer.vue'
+import ManageProvider from './ManageProvider.vue'
 
 export default {
     name: 'ManageLti1p1ProvidersDriver',
-    components: { SecretField, Dialog, ManageProvider },
+    components: { SecretField, Dialog, ManageProvider, ProviderTargetViewer },
     data() {
         return {
             providers: [],
             headers: [
                 {
                     text: this.$t(
-                        'windward.integrations.components.external_integration.driver.lti1p1.target_url'
+                        'windward.integrations.components.external_integration.driver.lti1p1.target'
                     ),
                     value: 'target',
                 },
@@ -151,16 +158,18 @@ export default {
                 duration: null,
                 action: {
                     text: this.$t('shared.forms.close'),
-                    onClick: (e, toastObject) => {
+                    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!'
                 )
@@ -179,7 +188,7 @@ export default {
         }),
     },
     methods: {
-        onSaved(e) {
+        onSaved() {
             this.loadProviders()
         },
         async loadProviders() {
@@ -197,14 +206,14 @@ export default {
                 action: [
                     {
                         text: this.$t('shared.forms.cancel'),
-                        onClick: (e, toastObject) => {
+                        onClick: (_e, toastObject) => {
                             toastObject.goAway(0)
                         },
                     },
                     {
                         text: this.$t('shared.forms.confirm'),
                         // router navigation
-                        onClick: (e, toastObject) => {
+                        onClick: (_e, toastObject) => {
                             this.deleteProvider(provider)
                             toastObject.goAway(0)
                         },
@@ -212,9 +221,19 @@ export default {
                 ],
             })
         },
-        deleteProvider(provider) {
-            provider.delete()
+        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/ProviderTargetPicker.vue

@@ -0,0 +1,234 @@
+<template>
+    <div>
+        <v-radio-group
+            v-model="localMetadata.target_type"
+            row
+            @change="onTargetTypeChange"
+        >
+            <template #label>
+                <div>
+                    {{
+                        $t(
+                            'windward.integrations.components.external_integration.provider_target.link_to'
+                        )
+                    }}:
+                </div>
+            </template>
+            <v-radio
+                :label="
+                    $t(
+                        'windward.integrations.components.external_integration.provider_target.whole_course'
+                    )
+                "
+                value="course"
+            ></v-radio>
+            <v-radio
+                :label="
+                    $t(
+                        'windward.integrations.components.external_integration.provider_target.content_with_children'
+                    )
+                "
+                value="locked_course_content_children"
+            ></v-radio>
+            <v-radio
+                :label="
+                    $t(
+                        'windward.integrations.components.external_integration.provider_target.content_no_children'
+                    )
+                "
+                value="locked_course_content"
+            ></v-radio>
+            <v-radio
+                :label="
+                    $t(
+                        'windward.integrations.components.external_integration.provider_target.whole_course_page'
+                    )
+                "
+                value="course_content"
+            ></v-radio>
+        </v-radio-group>
+
+        <div
+            v-if="
+                localMetadata.target_type === 'course_content' ||
+                localMetadata.target_type ===
+                    'locked_course_content_children' ||
+                localMetadata.target_type === 'locked_course_content'
+            "
+            class="content-tree secondary"
+        >
+            <v-treeview
+                v-model="selectedTreeviewContent"
+                selectable
+                selected-color="primary"
+                selection-type="independent"
+                return-object
+                open-all
+                :items="contentTree"
+                @input="onTreeChange"
+            >
+                <template #prepend="{ item }">
+                    <v-chip v-if="isIncludedChild(item)" color="primary">
+                        {{
+                            $t(
+                                'windward.integrations.components.external_integration.provider_target.included'
+                            )
+                        }}
+                    </v-chip>
+                </template>
+                <template #label="{ item }">
+                    {{ item.content.name_prefix }}
+                    {{ item.content.name }}
+                </template>
+            </v-treeview>
+        </div>
+    </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import { mapGetters } from 'vuex'
+export default {
+    name: 'ExternalIntegrationProviderTargetPicker',
+    props: {
+        target: { type: String, required: true, default: '' },
+        metadata: { type: Object, required: true, default: () => {} },
+    },
+    data() {
+        return {
+            selectedContent: null,
+            selectedTreeviewContent: [],
+            localTarget: '',
+            localMetadata: {},
+        }
+    },
+    computed: {
+        ...mapGetters({
+            contentTree: 'content/getTree',
+            course: 'course/get',
+        }),
+    },
+    watch: {
+        // Apply any changes coming up
+        target: {
+            handler(value) {
+                this.localTarget = _.cloneDeep(value)
+            },
+        },
+        metadata: {
+            deep: true,
+            handler(value) {
+                this.localMetadata = _.cloneDeep(value)
+            },
+        },
+    },
+    mounted() {
+        // Init our local vars
+        this.localTarget = _.cloneDeep(this.target)
+        this.localMetadata = _.cloneDeep(this.metadata)
+
+        // Set the target_type key if it doesn't exist
+        if (!this.localMetadata.target_type) {
+            this.localMetadata.target_type = ''
+        }
+
+        // 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)
+                )
+            }
+        }
+        this.sync(this.localMetadata.target_type)
+    },
+    methods: {
+        setSelectedContentById(id) {
+            this.selectedContent = { id }
+            this.selectedTreeviewContent = [{ id }]
+        },
+        sync(targetType) {
+            let url = ''
+
+            if (
+                this.selectedContent &&
+                (targetType === 'course_content' ||
+                    targetType === 'locked_course_content' ||
+                    targetType === 'locked_course_content_children')
+            ) {
+                url = `/course/${this.course.id}/content/${this.selectedContent.id}`
+            } else if (targetType === 'course') {
+                url = `/course/${this.course.id}/`
+            }
+            this.localTarget = url
+            // Sync up the changes to the parent component
+            this.$emit('update:target', this.localTarget)
+            this.$emit('update:metadata', this.localMetadata)
+        },
+        onTargetTypeChange(e) {
+            // Reset the selected content if you pick by course
+            if (e === 'course') {
+                this.selectedContent = null
+                this.selectedTreeviewContent = []
+            }
+
+            this.sync(e)
+        },
+        isIncludedChild(page, children = null) {
+            let isIncluded = false
+            // If we aren't including children then return hard false
+            if (
+                this.localMetadata.target_type !==
+                'locked_course_content_children'
+            ) {
+                return false
+            }
+
+            // First run, assign the children from the selected page
+            if (this.selectedContent && children === null) {
+                children = _.get(this.selectedContent, 'children', [])
+            }
+
+            if (this.selectedContent && page.parent_id) {
+                if (this.selectedContent.id === page.parent_id) {
+                    return true
+                }
+
+                for (let i = 0; i < children.length; i++) {
+                    const child = children[i]
+
+                    if (child.id === page.parent_id) {
+                        return true
+                    } else if (child.children && child.children.length) {
+                        isIncluded = this.isIncludedChild(page, child.children)
+                    }
+                }
+            }
+            return isIncluded
+        },
+        onTreeChange() {
+            // Enforce that only 1 item is selected at a time in the treeview
+            if (this.selectedTreeviewContent.length > 0) {
+                const last = this.selectedTreeviewContent.pop()
+                this.selectedTreeviewContent = [last]
+                this.selectedContent = last
+            } else {
+                this.selectedContent = null
+            }
+
+            this.sync(this.localMetadata.target_type)
+        },
+    },
+}
+</script>
+
+<style scoped>
+.content-tree {
+    height: 230px;
+    overflow-y: auto;
+}
+</style>

package/components/ExternalIntegration/ProviderTargetViewer.vue

@@ -0,0 +1,50 @@
+<template>
+    <span>{{ targetDisplayName }}</span>
+</template>
+
+<script>
+import _ from 'lodash'
+import { mapGetters } from 'vuex'
+export default {
+    name: 'ExternalIntegrationProviderTargetViewer',
+    props: {
+        target: { type: String, required: true, default: '' },
+    },
+    computed: {
+        ...mapGetters({
+            organization: 'organization/get',
+            course: 'course/get',
+            contentTree: 'content/getTree',
+        }),
+        targetDisplayName() {
+            if (_.isEmpty(this.target)) {
+                return ''
+            }
+            const match = this.target.match(
+                /\/content\/(?<content_id>[a-zA-Z0-9-]{36})/i
+            )
+            if (!_.isEmpty(match) && _.get(match, 'groups.content_id', null)) {
+                const flatTree = this.$ContentService.flattenTree(
+                    this.contentTree
+                )
+                const item = flatTree.find(
+                    (c) => c.id === _.get(match, 'groups.content_id', null)
+                )
+
+                if (!_.isEmpty(item)) {
+                    return (
+                        _.get(item, 'content.name_prefix', '') +
+                        ' ' +
+                        _.get(item, 'content.name', '')
+                    )
+                }
+            } else {
+                return this.$t(
+                    'windward.integrations.components.external_integration.provider_target.whole_course'
+                )
+            }
+            return ''
+        },
+    },
+}
+</script>

package/components/Integration/Driver/ManageBase.vue

@@ -38,11 +38,12 @@ export default {
                 duration: null,
                 action: {
                     text: this.$t('shared.forms.close'),
-                    onClick: (e, toastObject) => {
+                    onClick: (_e, toastObject) => {
                         toastObject.goAway(0)
                     },
                 },
             })
+            // eslint-disable-next-line no-console
             console.error('You do not have access to this integration!')
 
             // Return so we don't even attempt loading
@@ -129,6 +130,7 @@ export default {
         },
 
         onIntegrationLoaded() {
+            // eslint-disable-next-line no-console
             console.warn(
                 'Integration/Driver/ManageBase.vue onIntegrationLoaded called. Not extended!'
             )

package/components/Integration/JobTable.vue

@@ -247,7 +247,7 @@ export default {
         connect(channel, event) {
             this.socket.connector.pusher.connection.bind(
                 'connected',
-                function (socket) {
+                function (_socket) {
                     // Connected to socket id: socket.socket_id
                 }
             )
@@ -266,6 +266,7 @@ export default {
 
         onSocketJob(data) {
             if (_.isEmpty(data.integrationJob)) {
+                // eslint-disable-next-line no-console
                 console.error('onSocketJob Missing data', data)
                 return false
             }

package/components/SecretField.vue

@@ -1,5 +1,5 @@
 <template>
-    <v-text-field :value="value" readonly :type="fieldType">
+    <v-text-field id="secret-field" :value="value" readonly :type="fieldType">
         <template #append>
             <v-btn icon @click="toggleClear">
                 <v-icon>{{ showClear ? 'mdi-eye-off' : 'mdi-eye' }}</v-icon>

package/components/Settings/ExternalIntegration/LtiConsumerSettings.vue

@@ -46,10 +46,8 @@
 </template>
 
 <script>
-import _ from 'lodash'
 import { mapGetters } from 'vuex'
 import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
-import ManageConsumer from '../../ExternalIntegration/Driver/Lti1p1/ManageConsumer.vue'
 import Course from '~/models/Course'
 import Organization from '~/models/Organization'
 import Lti1p1Consumer from '../../../models/ExternalIntegration/Lti1p1Consumer'
@@ -57,27 +55,10 @@ import Lti1p1Consumer from '../../../models/ExternalIntegration/Lti1p1Consumer'
 export default {
     name: 'ContentBlockExternalIntegrationLti1p1ConsumerSettings',
     extends: BaseContentSettings,
-    components: { ManageConsumer },
     props: {
         settings: { type: Object, required: false, default: null },
         context: { type: String, required: false, default: 'block' },
     },
-    async fetch() {
-        this.consumers = await new Lti1p1Consumer()
-            .for(
-                new Organization({ id: this.organization.id }),
-                new Course({ id: this.course.id })
-            )
-            .orderBy('name')
-            .get()
-    },
-    computed: {
-        ...mapGetters({
-            organization: 'organization/get',
-            course: 'course/get',
-        }),
-    },
-    beforeMount() {},
     data() {
         return {
             consumers: [],
@@ -97,7 +78,23 @@ export default {
             ],
         }
     },
+    async fetch() {
+        this.consumers = await new Lti1p1Consumer()
+            .for(
+                new Organization({ id: this.organization.id }),
+                new Course({ id: this.course.id })
+            )
+            .orderBy('name')
+            .get()
+    },
+    computed: {
+        ...mapGetters({
+            organization: 'organization/get',
+            course: 'course/get',
+        }),
+    },
     watch: {},
+    beforeMount() {},
     mounted() {},
     methods: {
         onSelectLink(consumer) {

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

@@ -11,6 +11,7 @@ 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',

package/i18n/en-US/components/external_integration/index.ts

@@ -1,5 +1,6 @@
 import lti1p1 from './driver/lti1p1'
-
+import providerTarget from './provider_target'
 export default {
     driver: { lti1p1 },
+    provider_target: providerTarget,
 }

package/i18n/en-US/components/external_integration/provider_target.ts

@@ -0,0 +1,9 @@
+export default {
+    name: 'Target Name',
+    link_to: 'Link To',
+    included: 'Included',
+    whole_course: 'Whole Course',
+    whole_course_page: 'Whole Course Choose Landing Page',
+    content_with_children: 'Content with Child Pages',
+    content_no_children: 'Single Content Page',
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@windward/integrations",
-    "version": "0.0.6",
+    "version": "0.0.7",
     "description": "Windward UI Plugin Integrations for 3rd Party Systems",
     "main": "plugin.js",
     "scripts": {

package/pages/admin/importCourse.vue

@@ -287,6 +287,7 @@ export default {
                         .get()
                 } catch (e) {
                     if (e.response.status === 404) {
+                        // eslint-disable-next-line no-console
                         console.error(e)
                         this.$dialog.error(
                             this.$t(
@@ -329,6 +330,7 @@ export default {
                     .get()
             } catch (e) {
                 if (e.response.status === 404) {
+                    // eslint-disable-next-line no-console
                     console.error(e)
                     this.$dialog.error(
                         this.$t(
@@ -374,6 +376,7 @@ export default {
                     }
                 } catch (e) {
                     if (e.response.status === 404) {
+                        // eslint-disable-next-line no-console
                         console.error(e)
                         this.$dialog.error(
                             this.$t(

package/pages/admin/vendors.vue

@@ -151,9 +151,9 @@
 import _ from 'lodash'
 import { mapGetters } from 'vuex'
 
+import Dialog from '~/components/Dialog.vue'
 import Organization from '../../models/Organization'
 import IntegrationJobTable from '../../components/Integration/JobTable.vue'
-import Dialog from '~/components/Dialog.vue'
 
 export default {
     name: 'PluginIntegrationsAdminVendorsPage',
@@ -216,6 +216,7 @@ export default {
                     .integrations()
                     .get()
             } catch (e) {
+                // eslint-disable-next-line no-console
                 console.error('Could not load organization integrations', e)
             }
         },

package/plugin.js

@@ -18,7 +18,7 @@ export default {
         beforeDestroy: () => {},
         beforeNavigate: () => {},
         onNavigate: () => {},
-        onLoad: (page) => {},
+        onLoad: (_page) => {},
         onContent: () => {},
     },
     i18n: {

package/test/Components/ExternalIntegration/ProviderTargetPicker.spec.js

@@ -0,0 +1,22 @@
+import { shallowMount } from '@vue/test-utils'
+
+import Vue from 'vue'
+import Vuetify from 'vuetify'
+import { defaultMocks } from '@/test/mocks'
+
+import ProviderTargetPicker from '@/components/ExternalIntegration/ProviderTargetPicker.vue'
+
+Vue.use(Vuetify)
+
+describe('ProviderTargetPicker', () => {
+    test('ProviderTargetPicker is a Vue instance', () => {
+        const wrapper = shallowMount(ProviderTargetPicker, {
+            vuetify: new Vuetify(),
+            mocks: defaultMocks,
+            propsData: {
+                metadata: {},
+            },
+        })
+        expect(wrapper.vm).toBeTruthy()
+    })
+})

package/test/Components/ExternalIntegration/ProviderTargetViewer.spec.js

@@ -0,0 +1,22 @@
+import { shallowMount } from '@vue/test-utils'
+
+import Vue from 'vue'
+import Vuetify from 'vuetify'
+import { defaultMocks } from '@/test/mocks'
+
+import ProviderTargetViewer from '@/components/ExternalIntegration/ProviderTargetViewer.vue'
+
+Vue.use(Vuetify)
+
+describe('ProviderTargetViewer', () => {
+    test('ProviderTargetViewer is a Vue instance', () => {
+        const wrapper = shallowMount(ProviderTargetViewer, {
+            vuetify: new Vuetify(),
+            mocks: defaultMocks,
+            propsData: {
+                target: '',
+            },
+        })
+        expect(wrapper.vm).toBeTruthy()
+    })
+})

package/test/__mocks__/componentsMock.js

@@ -0,0 +1,12 @@
+// TODO find better way for jest to recognize utils imports
+jest.mock(
+    '~/components/Form.vue',
+    () => {
+        return {
+            data() {
+                return { validation: {} }
+            },
+        }
+    },
+    { virtual: true }
+)

package/test/__mocks__/modelMock.js

@@ -44,7 +44,7 @@ class mockBaseModel extends mockModel {
         return 'http://windwardapi.local'
     }
 
-    request(config) {
+    request(_config) {
         return new Promise((resolve) => {
             resolve({ data: {} })
         })

package/test/mocks.js

@@ -1,6 +1,7 @@
 import { defaultMocks as mocks } from '@windward/core/test/mocks'
 
 require('./__mocks__/modelMock')
+require('./__mocks__/componentsMock')
 
 mocks.$Integration = {
     async load() {