"features/steps/project/labels.rb" did not exist on "178c80a561fa10a157bae6e5d4682b232ae727c7"
repo_editor.vue 6.57 KB
Newer Older
Phil Hughes's avatar
Phil Hughes committed
1
<script>
Tim Zallmann's avatar
Tim Zallmann committed
2
import { mapState, mapGetters, mapActions } from 'vuex';
Phil Hughes's avatar
Phil Hughes committed
3
import flash from '~/flash';
Tim Zallmann's avatar
Tim Zallmann committed
4
import ContentViewer from '~/vue_shared/components/content_viewer/content_viewer.vue';
5
import DiffViewer from '~/vue_shared/components/diff_viewer/diff_viewer.vue';
6
import { activityBarViews, viewerTypes } from '../constants';
Phil Hughes's avatar
Phil Hughes committed
7
import Editor from '../lib/editor';
8
import ExternalLink from './external_link.vue';
Phil Hughes's avatar
Phil Hughes committed
9 10

export default {
Tim Zallmann's avatar
Tim Zallmann committed
11 12
  components: {
    ContentViewer,
13
    DiffViewer,
14
    ExternalLink,
Tim Zallmann's avatar
Tim Zallmann committed
15
  },
Phil Hughes's avatar
Phil Hughes committed
16 17 18 19 20 21 22
  props: {
    file: {
      type: Object,
      required: true,
    },
  },
  computed: {
23
    ...mapState(['rightPanelCollapsed', 'viewer', 'panelResizing', 'currentActivityView']),
24 25 26
    ...mapGetters([
      'currentMergeRequest',
      'getStagedFile',
27
      'isEditModeActive',
28
      'isCommitModeActive',
Phil Hughes's avatar
Phil Hughes committed
29
      'isReviewModeActive',
30
    ]),
Phil Hughes's avatar
Phil Hughes committed
31
    shouldHideEditor() {
32
      return this.file && this.file.binary && !this.file.content;
Phil Hughes's avatar
Phil Hughes committed
33
    },
34 35 36 37 38 39 40 41 42
    showContentViewer() {
      return (
        (this.shouldHideEditor || this.file.viewMode === 'preview') &&
        (this.viewer !== viewerTypes.mr || !this.file.mrChange)
      );
    },
    showDiffViewer() {
      return this.shouldHideEditor && this.file.mrChange && this.viewer === viewerTypes.mr;
    },
Tim Zallmann's avatar
Tim Zallmann committed
43 44
    editTabCSS() {
      return {
45
        active: this.file.viewMode === 'editor',
Tim Zallmann's avatar
Tim Zallmann committed
46 47 48 49 50 51 52
      };
    },
    previewTabCSS() {
      return {
        active: this.file.viewMode === 'preview',
      };
    },
Phil Hughes's avatar
Phil Hughes committed
53 54
  },
  watch: {
55 56 57 58 59
    file(newVal, oldVal) {
      if (oldVal.pending) {
        this.removePendingTab(oldVal);
      }

60
      // Compare key to allow for files opened in review mode to be cached differently
61
      if (oldVal.key !== this.file.key) {
62
        this.initEditor();
63 64 65 66

        if (this.currentActivityView !== activityBarViews.edit) {
          this.setFileViewMode({
            file: this.file,
67
            viewMode: 'editor',
68 69 70 71 72 73 74 75
          });
        }
      }
    },
    currentActivityView() {
      if (this.currentActivityView !== activityBarViews.edit) {
        this.setFileViewMode({
          file: this.file,
76
          viewMode: 'editor',
77
        });
Phil Hughes's avatar
Phil Hughes committed
78 79 80 81 82 83
      }
    },
    rightPanelCollapsed() {
      this.editor.updateDimensions();
    },
    viewer() {
84
      this.createEditorInstance();
Phil Hughes's avatar
Phil Hughes committed
85
    },
86 87 88 89 90
    panelResizing() {
      if (!this.panelResizing) {
        this.editor.updateDimensions();
      }
    },
Phil Hughes's avatar
Phil Hughes committed
91 92 93 94 95
  },
  beforeDestroy() {
    this.editor.dispose();
  },
  mounted() {
96 97
    if (!this.editor) {
      this.editor = Editor.create();
Phil Hughes's avatar
Phil Hughes committed
98
    }
99
    this.initEditor();
Phil Hughes's avatar
Phil Hughes committed
100 101 102 103 104 105 106
  },
  methods: {
    ...mapActions([
      'getRawFileData',
      'changeFileContent',
      'setFileLanguage',
      'setEditorPosition',
Tim Zallmann's avatar
Tim Zallmann committed
107
      'setFileViewMode',
Phil Hughes's avatar
Phil Hughes committed
108 109
      'setFileEOL',
      'updateViewer',
110
      'removePendingTab',
Phil Hughes's avatar
Phil Hughes committed
111
    ]),
112
    initEditor() {
Phil Hughes's avatar
Phil Hughes committed
113 114 115 116
      if (this.shouldHideEditor) return;

      this.editor.clearEditor();

Tim Zallmann's avatar
Tim Zallmann committed
117 118
      this.getRawFileData({
        path: this.file.path,
119
        baseSha: this.currentMergeRequest ? this.currentMergeRequest.baseCommitSha : '',
Tim Zallmann's avatar
Tim Zallmann committed
120
      })
Phil Hughes's avatar
Phil Hughes committed
121 122 123
        .then(() => {
          this.createEditorInstance();
        })
124
        .catch(err => {
125
          flash('Error setting up editor. Please try again.', 'alert', document, null, false, true);
Phil Hughes's avatar
Phil Hughes committed
126 127 128 129 130 131 132
          throw err;
        });
    },
    createEditorInstance() {
      this.editor.dispose();

      this.$nextTick(() => {
133
        if (this.viewer === viewerTypes.edit) {
Phil Hughes's avatar
Phil Hughes committed
134 135
          this.editor.createInstance(this.$refs.editor);
        } else {
136
          this.editor.createDiffInstance(this.$refs.editor, !this.isReviewModeActive);
Phil Hughes's avatar
Phil Hughes committed
137 138 139 140 141 142 143 144
        }

        this.setupEditor();
      });
    },
    setupEditor() {
      if (!this.file || !this.editor.instance) return;

145 146 147 148 149 150
      const head = this.getStagedFile(this.file.path);

      this.model = this.editor.createModel(
        this.file,
        this.file.staged && this.file.key.indexOf('unstaged-') === 0 ? head : null,
      );
Phil Hughes's avatar
Phil Hughes committed
151

152
      if (this.viewer === viewerTypes.mr && this.file.mrChange) {
Tim Zallmann's avatar
Tim Zallmann committed
153 154 155 156
        this.editor.attachMergeRequestModel(this.model);
      } else {
        this.editor.attachModel(this.model);
      }
Phil Hughes's avatar
Phil Hughes committed
157

158
      this.model.onChange(model => {
Phil Hughes's avatar
Phil Hughes committed
159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192
        const { file } = model;

        if (file.active) {
          this.changeFileContent({
            path: file.path,
            content: model.getModel().getValue(),
          });
        }
      });

      // Handle Cursor Position
      this.editor.onPositionChange((instance, e) => {
        this.setEditorPosition({
          editorRow: e.position.lineNumber,
          editorColumn: e.position.column,
        });
      });

      this.editor.setPosition({
        lineNumber: this.file.editorRow,
        column: this.file.editorColumn,
      });

      // Handle File Language
      this.setFileLanguage({
        fileLanguage: this.model.language,
      });

      // Get File eol
      this.setFileEOL({
        eol: this.model.eol,
      });
    },
  },
193
  viewerTypes,
Phil Hughes's avatar
Phil Hughes committed
194 195 196 197 198 199 200 201
};
</script>

<template>
  <div
    id="ide"
    class="blob-viewer-container blob-editor-container"
  >
202
    <div class="ide-mode-tabs clearfix" >
203
      <ul
204
        v-if="!shouldHideEditor && isEditModeActive"
205
        class="nav-links float-left"
206
      >
Tim Zallmann's avatar
Tim Zallmann committed
207 208 209 210
        <li :class="editTabCSS">
          <a
            href="javascript:void(0);"
            role="button"
211
            @click.prevent="setFileViewMode({ file, viewMode: 'editor' })">
212
            <template v-if="viewer === $options.viewerTypes.edit">
Tim Zallmann's avatar
Tim Zallmann committed
213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230
              {{ __('Edit') }}
            </template>
            <template v-else>
              {{ __('Review') }}
            </template>
          </a>
        </li>
        <li
          v-if="file.previewMode"
          :class="previewTabCSS">
          <a
            href="javascript:void(0);"
            role="button"
            @click.prevent="setFileViewMode({ file, viewMode:'preview' })">
            {{ file.previewMode.previewTitle }}
          </a>
        </li>
      </ul>
231
      <external-link
Tim Zallmann's avatar
Tim Zallmann committed
232 233
        :file="file"
      />
Phil Hughes's avatar
Phil Hughes committed
234 235
    </div>
    <div
236
      v-show="!shouldHideEditor && file.viewMode ==='editor'"
Phil Hughes's avatar
Phil Hughes committed
237
      ref="editor"
238 239 240
      :class="{
        'is-readonly': isCommitModeActive,
      }"
241
      class="multi-file-editor-holder"
Phil Hughes's avatar
Phil Hughes committed
242 243
    >
    </div>
Tim Zallmann's avatar
Tim Zallmann committed
244
    <content-viewer
245
      v-if="showContentViewer"
Tim Zallmann's avatar
Tim Zallmann committed
246
      :content="file.content || file.raw"
247
      :path="file.rawPath || file.path"
248
      :file-size="file.size"
Tim Zallmann's avatar
Tim Zallmann committed
249
      :project-path="file.projectId"/>
250 251 252 253 254 255 256 257
    <diff-viewer
      v-if="showDiffViewer"
      :diff-mode="file.mrChange.diffMode"
      :new-path="file.mrChange.new_path"
      :new-sha="currentMergeRequest.sha"
      :old-path="file.mrChange.old_path"
      :old-sha="currentMergeRequest.baseCommitSha"
      :project-path="file.projectId"/>
Phil Hughes's avatar
Phil Hughes committed
258 259
  </div>
</template>