add integrations tab to admin section

.estafette.yaml

@@ -12,9 +12,9 @@ version:
   semver:
     major: 1
     minor: 0
-    patch: 4
+    patch: 5
     labelTemplate: '{{branch}}-{{auto}}'
-    releaseBranch: 1.0.4
+    releaseBranch: 1.0.5
 
 stages:
   audit-and-restore:
@@ -233,4 +233,5 @@ releases:
         repoBranch: main
 
       create-github-release:
-        image: extensions/github-release:dev
+        image: extensions/github-release:dev
+        ignoreMissingMilestone: true

mocks/api/admin/integrations/GET.js

@@ -0,0 +1,4 @@
+const { delay, type, file } = require('connect-api-mocker/helpers')
+const path = require('path')
+
+module.exports = [delay(500), type('application/json'), file(path.join(__dirname, './index.json'))]

mocks/api/admin/integrations/index.json

@@ -0,0 +1,30 @@
+{
+  "bitbucket": {
+    "addonKey": "estafette-ci",
+    "redirectUri": "https://ci-integrations.estafette.io/api/integrations/bitbucket/redirect",
+    "installations":[
+      {
+        "key":"estafette-ci",
+        "baseApiUrl":"https://api.bitbucket.org",
+        "clientKey":"ari:cloud:bitbucket::app/{630c2ae3-dbaf-46d3-9fa9-c86e85c1a530}/estafette-ci",
+        "sharedSecret":"estafette.secret(***)",
+        "workspace":{
+            "slug":"estafette",
+            "name":"Estafette",
+            "uuid":"{630c2ae3-dbaf-46d3-9fa9-c86e85c1a530}"
+        }
+      },
+      {
+        "key":"estafette-ci",
+        "baseApiUrl":"https://api.bitbucket.org",
+        "clientKey":"ari:cloud:bitbucket::app/{adf77224-9d01-4ac5-88f4-c8cfb1b9b88c}/estafette-ci",
+        "sharedSecret":"estafette.secret(***)",
+        "workspace":{
+          "slug":"personal",
+          "name":"Personal account",
+          "uuid":"{adf77224-9d01-4ac5-88f4-c8cfb1b9b88c}"
+        }
+      }
+    ]
+  }
+}

src/components/InnerNavigationTabs.vue

@@ -61,10 +61,10 @@ import { mapState } from 'vuex'
 import { BNav, BNavItem, BDropdown, BDropdownItem } from 'bootstrap-vue'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faKey, faShieldAlt, faUser, faUsers, faSitemap, faShapes, faCubes, faHammer, faUserSecret, faClipboardCheck, faChartPie, faListOl, faChartLine, faHeart, faPassport, faIndustry, faTools, faUpload, faRobot, faProjectDiagram, faLightbulb, faPollH, faBook, faMobileAlt } from '@fortawesome/free-solid-svg-icons'
+import { faKey, faShieldAlt, faUser, faUsers, faSitemap, faShapes, faCubes, faHammer, faUserSecret, faClipboardCheck, faChartPie, faListOl, faChartLine, faHeart, faPassport, faIndustry, faTools, faUpload, faRobot, faProjectDiagram, faLightbulb, faPollH, faBook, faMobileAlt, faPlug } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
-library.add(faKey, faShieldAlt, faUser, faUsers, faSitemap, faShapes, faCubes, faHammer, faUserSecret, faClipboardCheck, faChartPie, faListOl, faChartLine, faHeart, faPassport, faIndustry, faTools, faUpload, faRobot, faProjectDiagram, faLightbulb, faUserSecret, faPollH, faBook, faMobileAlt)
+library.add(faKey, faShieldAlt, faUser, faUsers, faSitemap, faShapes, faCubes, faHammer, faUserSecret, faClipboardCheck, faChartPie, faListOl, faChartLine, faHeart, faPassport, faIndustry, faTools, faUpload, faRobot, faProjectDiagram, faLightbulb, faUserSecret, faPollH, faBook, faMobileAlt, faPlug)
 
 export default {
   components: {

src/router/index.js

@@ -614,6 +614,17 @@ export default new Router({
             text: 'Secrets',
             icon: 'user-secret'
           }
+        },
+        {
+          path: 'integrations',
+          name: 'AdminIntegrations',
+          props: true,
+          component: () => import(/* webpackChunkName: "admin" */ '../views/AdminIntegrations.vue'),
+          meta: {
+            requiredRole: 'administrator',
+            text: 'Integrations',
+            icon: 'plug'
+          }
         }
       ]
     },

src/views/AdminIntegrations.vue

@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <div
+      v-if="integrations.bitbucket"
+    >
+      <div class="row">
+        <div class="col">
+          <h2 class="text-primary">
+            Bitbucket
+          </h2>
+        </div>
+      </div>
+
+      <div
+        v-for="installation in integrations.bitbucket.installations"
+        :key="installation.clientKey"
+        class="row-block"
+      >
+        <property-block
+          v-if="installation.workspace"
+          label="Workspace"
+          :value="installation.workspace.slug"
+        />
+        <property-block
+          label="Key"
+          :value="installation.key"
+        />
+        <property-block
+          label="Client key"
+          :value="installation.clientKey"
+        />
+      </div>
+
+      <b-button
+        variant="primary"
+        :href="`https://bitbucket.org/site/addons/authorize?addon_key=${integrations.bitbucket.addonKey}&redirect_uri=${integrations.bitbucket.redirectUri}`"
+      >
+        <font-awesome-icon
+          :icon="['fab', 'bitbucket']"
+        />
+        Connect to Bitbucket
+      </b-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { BButton } from 'bootstrap-vue'
+import PropertyBlock from '@/components/PropertyBlock'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faBitbucket } from '@fortawesome/free-brands-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+
+library.add(faBitbucket)
+
+export default {
+  components: {
+    BButton,
+    PropertyBlock,
+    FontAwesomeIcon
+  },
+
+  data: function () {
+    return {
+      integrations: {}
+    }
+  },
+
+  created () {
+    this.loadIntegrations()
+  },
+
+  methods: {
+    loadIntegrations () {
+      return this.axios.get('/api/admin/integrations')
+        .then(response => {
+          this.integrations = response.data
+        })
+    }
+  }
+}
+</script>