Added right sidebar components

3 files changed, 113 insertions, 0 deletions

diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue
index 1ec69adce09..d61ed36a757 100644
--- a/app/assets/javascripts/ide/components/ide.vue
+++ b/app/assets/javascripts/ide/components/ide.vue
@@ -6,6 +6,7 @@ import RepoTabs from './repo_tabs.vue';
 import IdeStatusBar from './ide_status_bar.vue';
 import RepoEditor from './repo_editor.vue';
 import FindFile from './file_finder/index.vue';
+import RightSidebar from './right_sidebar/index.vue';
 
 const originalStopCallback = Mousetrap.stopCallback;
 
@@ -16,6 +17,7 @@ export default {
     IdeStatusBar,
     RepoEditor,
     FindFile,
+    RightSidebar,
   },
   computed: {
     ...mapState([
@@ -25,6 +27,7 @@ export default {
       'currentMergeRequestId',
       'fileFindVisible',
       'emptyStateSvgPath',
+      'currentProjectId',
     ]),
     ...mapGetters(['activeFile', 'hasChanges']),
   },
@@ -122,6 +125,9 @@ export default {
           </div>
         </template>
       </div>
+      <right-sidebar
+        v-if="currentProjectId"
+      />
     </div>
     <ide-status-bar
       :file="activeFile"
diff --git a/app/assets/javascripts/ide/components/right_sidebar/index.vue b/app/assets/javascripts/ide/components/right_sidebar/index.vue
new file mode 100644
index 00000000000..2417e3976aa
--- /dev/null
+++ b/app/assets/javascripts/ide/components/right_sidebar/index.vue
@@ -0,0 +1,61 @@
+<script>
+import tooltip from '../../../vue_shared/directives/tooltip';
+import Icon from '../../../vue_shared/components/icon.vue';
+import Pipelines from './pipelines.vue';
+
+export default {
+  directives: {
+    tooltip,
+  },
+  components: {
+    Icon,
+    Pipelines,
+  },
+};
+</script>
+
+<template>
+  <div
+    class="multi-file-commit-panel ide-right-sidebar"
+  >
+    <div class="multi-file-commit-panel-inner">
+      <pipelines />
+    </div>
+    <nav class="ide-activity-bar">
+      <ul class="list-unstyled">
+        <li v-once>
+          <a
+            v-tooltip
+            data-container="body"
+            data-placement="left"
+            :title="__('Pipelines')"
+            class="ide-sidebar-link"
+            href="a"
+          >
+            <icon
+              :size="16"
+              name="log"
+            />
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</template>
+
+<style>
+.ide-right-sidebar {
+  width: auto;
+  min-width: 60px;
+}
+
+.ide-right-sidebar .ide-activity-bar {
+  border-left: 1px solid #eaeaea;
+}
+
+.ide-right-sidebar .multi-file-commit-panel-inner {
+  width: 300px;
+  background-color: #fff;
+  border-left: 1px solid #eaeaea;
+}
+</style>
diff --git a/app/assets/javascripts/ide/components/right_sidebar/pipelines.vue b/app/assets/javascripts/ide/components/right_sidebar/pipelines.vue
new file mode 100644
index 00000000000..0ff78242e6a
--- /dev/null
+++ b/app/assets/javascripts/ide/components/right_sidebar/pipelines.vue
@@ -0,0 +1,46 @@
+<script>
+import { mapActions, mapState } from 'vuex';
+import LoadingIcon from '../../../vue_shared/components/loading_icon.vue';
+import CiIcon from '../../../vue_shared/components/ci_icon.vue';
+
+export default {
+  components: {
+    LoadingIcon,
+    CiIcon,
+  },
+  computed: {
+    ...mapState('pipelines', ['isLoadingPipeline', 'latestPipeline']),
+    statusIcon() {
+      return {
+        group: this.latestPipeline.status,
+        icon: `status_${this.latestPipeline.status}`,
+      };
+    },
+  },
+  mounted() {
+    this.fetchLatestPipeline();
+  },
+  methods: {
+    ...mapActions('pipelines', ['fetchLatestPipeline']),
+  },
+};
+</script>
+
+<template>
+  <div>
+    <loading-icon
+      v-if="isLoadingPipeline"
+      class="prepend-top-default"
+      size="2"
+    />
+    <template v-else-if="latestPipeline">
+      <ci-icon
+        :status="statusIcon"
+      />
+      #{{ latestPipeline.id }}
+    </template>
+  </div>
+</template>
+
+<style>
+</style>