From 8743585f4501420e6ec7ba8b080712a7bb9da5bd Mon Sep 17 00:00:00 2001
From: Denys Mishunov <dmishunov@gitlab.com>
Date: Wed, 29 Mar 2023 00:37:45 +0200
Subject: [PATCH 1/3] In-context editing draft

---
 .../components/blob_content_viewer.vue        | 83 ++++++++++++++-----
 .../vue_shared/components/web_ide_link.vue    |  6 +-
 2 files changed, 65 insertions(+), 24 deletions(-)

diff --git a/app/assets/javascripts/repository/components/blob_content_viewer.vue b/app/assets/javascripts/repository/components/blob_content_viewer.vue
index 236351005e7d28..f14dd0114bc3ba 100644
--- a/app/assets/javascripts/repository/components/blob_content_viewer.vue
+++ b/app/assets/javascripts/repository/components/blob_content_viewer.vue
@@ -1,12 +1,12 @@
 <script>
-import { GlLoadingIcon, GlButton } from '@gitlab/ui';
+import { GlLoadingIcon, GlButton, GlButtonGroup } from '@gitlab/ui';
 import { uniqueId } from 'lodash';
 import BlobContent from '~/blob/components/blob_content.vue';
 import BlobHeader from '~/blob/components/blob_header.vue';
 import { SIMPLE_BLOB_VIEWER, RICH_BLOB_VIEWER } from '~/blob/components/constants';
 import { createAlert } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
-import { isLoggedIn, handleLocationHash } from '~/lib/utils/common_utils';
+import { isLoggedIn, handleLocationHash, historyReplaceState } from '~/lib/utils/common_utils';
 import { __ } from '~/locale';
 import { redirectTo, getLocationHash } from '~/lib/utils/url_utility';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
@@ -31,9 +31,11 @@ export default {
     BlobContent,
     GlLoadingIcon,
     GlButton,
+    GlButtonGroup,
     ForkSuggestion,
     WebIdeLink,
     CodeIntelligence,
+    SourceEditor: () => import('~/vue_shared/components/source_editor.vue'),
   },
   mixins: [getRefMixin, glFeatureFlagMixin()],
   inject: {
@@ -139,6 +141,8 @@ export default {
       useFallback: false,
       pathLocks: DEFAULT_BLOB_INFO.pathLocks,
       userPermissions: DEFAULT_BLOB_INFO.userPermissions,
+      isEditing: false,
+      hasEdits: false,
     };
   },
   computed: {
@@ -305,9 +309,25 @@ export default {
       const { ideEditPath, editBlobPath } = this.blobInfo;
       redirectTo(target === 'ide' ? ideEditPath : editBlobPath);
     },
+    toggleEditing(action) {
+      if (action.key === 'edit') {
+        historyReplaceState(this.blobInfo.editBlobPath);
+        this.isEditing = true;
+      }
+    },
+    saveEdits() {
+      // TODO: Implement
+    },
+    cancelEdits() {
+      this.isEditing = false;
+      historyReplaceState(this.blobInfo.webPath);
+    },
     setForkTarget(target) {
       this.forkTarget = target;
     },
+    notifyAboutUpdates({ content }) {
+      this.hasEdits = content !== this.blobInfo.rawTextBlob;
+    },
     onCopy() {
       navigator.clipboard.writeText(this.blobInfo.rawTextBlob);
     },
@@ -332,10 +352,9 @@ export default {
       >
         <template #actions>
           <web-ide-link
-            v-if="!blobInfo.archived"
+            v-if="!blobInfo.archived && !isEditing"
             :show-edit-button="!isBinaryFileType"
             class="gl-mr-3"
-            :edit-url="blobInfo.editBlobPath"
             :web-ide-url="blobInfo.ideEditPath"
             :needs-to-fork="showForkSuggestion"
             :show-pipeline-editor-button="Boolean(blobInfo.pipelineEditorPath)"
@@ -347,9 +366,19 @@ export default {
             :user-profile-enable-gitpod-path="currentUser && currentUser.profileEnableGitpodPath"
             is-blob
             disable-fork-modal
+            @click="toggleEditing($event)"
             @edit="editBlob"
           />
 
+          <gl-button-group v-if="isEditing" class="gl-mr-3">
+            <gl-button v-if="hasEdits" category="primary" variant="success" @click="saveEdits">
+              {{ __('Save') }}
+            </gl-button>
+            <gl-button v-else category="primary" variant="info" @click="cancelEdits">
+              {{ __('Cancel') }}
+            </gl-button>
+          </gl-button-group>
+
           <blob-button-group
             v-if="isLoggedIn && !blobInfo.archived"
             :path="path"
@@ -372,26 +401,34 @@ export default {
         :fork-path="forkPath"
         @cancel="setForkTarget(null)"
       />
-      <blob-content
-        v-if="!blobViewer"
-        class="js-syntax-highlight"
-        :rich-viewer="legacyRichViewer"
-        :blob="blobInfo"
-        :content="legacySimpleViewer"
-        :is-raw-content="true"
-        :active-viewer="viewer"
-        :hide-line-numbers="true"
-        :loading="isLoadingLegacyViewer"
-        :data-loading="isRenderingLegacyTextViewer"
-      />
-      <component :is="blobViewer" v-else :blob="blobInfo" class="blob-viewer" @error="onError" />
-      <code-intelligence
-        v-if="blobViewer || legacyViewerLoaded"
-        :code-navigation-path="blobInfo.codeNavigationPath"
-        :blob-path="blobInfo.path"
-        :path-prefix="blobInfo.projectBlobPathRoot"
-        :wrap-text-nodes="glFeatures.highlightJs"
+      <source-editor
+        v-if="isEditing"
+        :value="blobInfo.rawTextBlob"
+        :file-name="path"
+        @input="notifyAboutUpdates({ content: $event })"
       />
+      <template v-else>
+        <blob-content
+          v-if="!blobViewer"
+          class="js-syntax-highlight"
+          :rich-viewer="legacyRichViewer"
+          :blob="blobInfo"
+          :content="legacySimpleViewer"
+          :is-raw-content="true"
+          :active-viewer="viewer"
+          :hide-line-numbers="true"
+          :loading="isLoadingLegacyViewer"
+          :data-loading="isRenderingLegacyTextViewer"
+        />
+        <component :is="blobViewer" v-else :blob="blobInfo" class="blob-viewer" @error="onError" />
+        <code-intelligence
+          v-if="blobViewer || legacyViewerLoaded"
+          :code-navigation-path="blobInfo.codeNavigationPath"
+          :blob-path="blobInfo.path"
+          :path-prefix="blobInfo.projectBlobPathRoot"
+          :wrap-text-nodes="glFeatures.highlightJs"
+        />
+      </template>
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/web_ide_link.vue b/app/assets/javascripts/vue_shared/components/web_ide_link.vue
index 28bec63b2448f0..200961af3c44e2 100644
--- a/app/assets/javascripts/vue_shared/components/web_ide_link.vue
+++ b/app/assets/javascripts/vue_shared/components/web_ide_link.vue
@@ -345,6 +345,10 @@ export default {
         dismiss();
       }
     },
+    actionClickHandler({ action }, dismiss) {
+      this.dismissCalloutOnActionClicked(dismiss);
+      this.$emit('click', action);
+    },
   },
   webIdeButtonId: 'web-ide-link',
   PREFERRED_EDITOR_KEY,
@@ -366,7 +370,7 @@ export default {
           :category="isBlob ? 'primary' : 'secondary'"
           :show-action-tooltip="!displayVscodeWebIdeCallout || !shouldShowCallout"
           @select="select"
-          @actionClicked="dismissCalloutOnActionClicked(dismiss)"
+          @actionClicked="actionClickHandler($event, dismiss)"
         />
         <local-storage-sync
           :storage-key="$options.PREFERRED_EDITOR_KEY"
-- 
GitLab


From 1f21e275de23658d0da8c9209470969ae6fe66e0 Mon Sep 17 00:00:00 2001
From: Denys Mishunov <dmishunov@gitlab.com>
Date: Tue, 28 Mar 2023 23:22:43 +0200
Subject: [PATCH 2/3] In-line editing MVC draft

---
 .../source_viewer/components/chunk_deprecated.vue         | 5 +++++
 .../components/source_viewer/components/chunk_line.vue    | 8 ++++++++
 .../components/source_viewer/source_viewer_deprecated.vue | 2 ++
 .../stylesheets/highlight/themes/solarized-dark.scss      | 7 +++++++
 4 files changed, 22 insertions(+)

diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_deprecated.vue b/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_deprecated.vue
index 28a16cd846a2da..1071ed2ba0f3e5 100644
--- a/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_deprecated.vue
+++ b/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_deprecated.vue
@@ -63,6 +63,10 @@ export default {
       type: String,
       required: true,
     },
+    editPath: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {
@@ -114,6 +118,7 @@ export default {
         :content="line"
         :language="language"
         :blame-path="blamePath"
+        :edit-path="editPath"
       />
     </div>
     <div v-else-if="!isLoading" class="gl-display-flex gl-text-transparent">
diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue b/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue
index 1690e666d3c4c8..4f87e025963d8f 100644
--- a/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue
+++ b/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue
@@ -23,6 +23,10 @@ export default {
       type: String,
       required: true,
     },
+    editPath: {
+      type: String,
+      required: true,
+    },
   },
   computed: {
     pageSearchString() {
@@ -41,6 +45,10 @@ export default {
         class="gl-user-select-none gl-shadow-none! file-line-blame"
         :href="`${blamePath}${pageSearchString}#L${number}`"
       ></a>
+      <a
+        class="gl-user-select-none gl-shadow-none! file-line-edit"
+        :href="`${editPath}#L${number}`"
+      ></a>
       <a
         :id="`L${number}`"
         class="gl-user-select-none gl-shadow-none! file-line-num"
diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer_deprecated.vue b/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer_deprecated.vue
index 26cf45c7570ea2..741c1c04586e5b 100644
--- a/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer_deprecated.vue
+++ b/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer_deprecated.vue
@@ -205,6 +205,7 @@ export default {
       is-first-chunk
       :language="firstChunk.language"
       :blame-path="blob.blamePath"
+      :edit-path="blob.editBlobPath"
     />
 
     <gl-loading-icon v-if="isLoading" size="sm" class="gl-my-5" />
@@ -220,6 +221,7 @@ export default {
       :chunk-index="index"
       :language="chunk.language"
       :blame-path="blob.blamePath"
+      :edit-path="blob.editBlobPath"
       :total-chunks="totalChunks"
       @appear="highlightChunk"
     />
diff --git a/app/assets/stylesheets/highlight/themes/solarized-dark.scss b/app/assets/stylesheets/highlight/themes/solarized-dark.scss
index 075510e6e5f0f2..b291957ef4c4a3 100644
--- a/app/assets/stylesheets/highlight/themes/solarized-dark.scss
+++ b/app/assets/stylesheets/highlight/themes/solarized-dark.scss
@@ -127,6 +127,9 @@ $solarized-dark-il: #2aa198;
     @include hljs-override('title\\.function', $solarized-dark-nf);
     @include hljs-override('params', $solarized-dark-nb);
 
+  .file-line-action {
+
+  }
   // Line numbers
   .file-line-num {
     @include line-link($white, 'link');
@@ -136,6 +139,10 @@ $solarized-dark-il: #2aa198;
     @include line-link($white, 'git');
   }
 
+  .file-line-edit {
+    @include line-link($white, 'pencil');
+  }
+
   .line-links {
     @include line-hover-bg($solarized-dark-pre-bg);
   }
-- 
GitLab


From 135c44b346c3ac38bf155b8c0d8fdc56c035c6d8 Mon Sep 17 00:00:00 2001
From: Denys Mishunov <dmishunov@gitlab.com>
Date: Wed, 29 Mar 2023 01:17:37 +0200
Subject: [PATCH 3/3] Combined in-context and in-line editing for blobs

---
 .../components/blob_content_viewer.vue         | 18 +++++++++++++++++-
 .../components/chunk_deprecated.vue            |  1 +
 .../source_viewer/components/chunk_line.vue    |  6 ++++++
 .../source_viewer/source_viewer_deprecated.vue |  2 ++
 .../stylesheets/highlight/themes/dark.scss     |  4 ++++
 .../stylesheets/highlight/themes/monokai.scss  |  4 ++++
 .../stylesheets/highlight/themes/none.scss     |  4 ++++
 .../highlight/themes/solarized-light.scss      |  4 ++++
 8 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/repository/components/blob_content_viewer.vue b/app/assets/javascripts/repository/components/blob_content_viewer.vue
index f14dd0114bc3ba..afbb45058b5cd7 100644
--- a/app/assets/javascripts/repository/components/blob_content_viewer.vue
+++ b/app/assets/javascripts/repository/components/blob_content_viewer.vue
@@ -15,6 +15,7 @@ import CodeIntelligence from '~/code_navigation/components/app.vue';
 import LineHighlighter from '~/blob/line_highlighter';
 import blobInfoQuery from 'shared_queries/repository/blob_info.query.graphql';
 import { addBlameLink } from '~/blob/blob_blame_link';
+import { SourceEditorExtension } from '~/editor/extensions/source_editor_extension_base';
 import projectInfoQuery from '../queries/project_info.query.graphql';
 import getRefMixin from '../mixins/get_ref';
 import userInfoQuery from '../queries/user_info.query.graphql';
@@ -315,6 +316,11 @@ export default {
         this.isEditing = true;
       }
     },
+    toggleEditingForLine(number) {
+      historyReplaceState(`${this.blobInfo.editBlobPath}#L${number}`);
+      this.isEditing = true;
+      this.$refs.editor.getEditor().highlightLines([number, number]);
+    },
     saveEdits() {
       // TODO: Implement
     },
@@ -332,6 +338,7 @@ export default {
       navigator.clipboard.writeText(this.blobInfo.rawTextBlob);
     },
   },
+  sourceEditorExtensions: [{ definition: SourceEditorExtension }],
 };
 </script>
 
@@ -403,8 +410,10 @@ export default {
       />
       <source-editor
         v-if="isEditing"
+        ref="editor"
         :value="blobInfo.rawTextBlob"
         :file-name="path"
+        :extensions="$options.sourceEditorExtensions"
         @input="notifyAboutUpdates({ content: $event })"
       />
       <template v-else>
@@ -420,7 +429,14 @@ export default {
           :loading="isLoadingLegacyViewer"
           :data-loading="isRenderingLegacyTextViewer"
         />
-        <component :is="blobViewer" v-else :blob="blobInfo" class="blob-viewer" @error="onError" />
+        <component
+          :is="blobViewer"
+          v-else
+          :blob="blobInfo"
+          class="blob-viewer"
+          @error="onError"
+          @editLine="toggleEditingForLine($event)"
+        />
         <code-intelligence
           v-if="blobViewer || legacyViewerLoaded"
           :code-navigation-path="blobInfo.codeNavigationPath"
diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_deprecated.vue b/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_deprecated.vue
index 1071ed2ba0f3e5..3939f2eb592856 100644
--- a/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_deprecated.vue
+++ b/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_deprecated.vue
@@ -119,6 +119,7 @@ export default {
         :language="language"
         :blame-path="blamePath"
         :edit-path="editPath"
+        @editLine="$emit('editLine', $event)"
       />
     </div>
     <div v-else-if="!isLoading" class="gl-display-flex gl-text-transparent">
diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue b/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue
index 4f87e025963d8f..90c1233df1a7c6 100644
--- a/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue
+++ b/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue
@@ -34,6 +34,11 @@ export default {
       return getPageSearchString(this.blamePath, page);
     },
   },
+  methods: {
+    edit(number) {
+      this.$emit('editLine', number);
+    },
+  },
 };
 </script>
 <template>
@@ -48,6 +53,7 @@ export default {
       <a
         class="gl-user-select-none gl-shadow-none! file-line-edit"
         :href="`${editPath}#L${number}`"
+        @click.prevent="edit(number)"
       ></a>
       <a
         :id="`L${number}`"
diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer_deprecated.vue b/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer_deprecated.vue
index 741c1c04586e5b..335713408f53b6 100644
--- a/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer_deprecated.vue
+++ b/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer_deprecated.vue
@@ -206,6 +206,7 @@ export default {
       :language="firstChunk.language"
       :blame-path="blob.blamePath"
       :edit-path="blob.editBlobPath"
+      @editLine="$emit('editLine', $event)"
     />
 
     <gl-loading-icon v-if="isLoading" size="sm" class="gl-my-5" />
@@ -224,6 +225,7 @@ export default {
       :edit-path="blob.editBlobPath"
       :total-chunks="totalChunks"
       @appear="highlightChunk"
+      @editLine="$emit('editLine', $event)"
     />
   </div>
 </template>
diff --git a/app/assets/stylesheets/highlight/themes/dark.scss b/app/assets/stylesheets/highlight/themes/dark.scss
index 02469cf5165d37..74c33d968fb742 100644
--- a/app/assets/stylesheets/highlight/themes/dark.scss
+++ b/app/assets/stylesheets/highlight/themes/dark.scss
@@ -142,6 +142,10 @@ $dark-il: #de935f;
     @include line-link($white, 'git');
   }
 
+  .file-line-edit {
+    @include line-link($white, 'pencil');
+  }
+
   .line-links {
     @include line-hover-bg($dark-main-bg);
   }
diff --git a/app/assets/stylesheets/highlight/themes/monokai.scss b/app/assets/stylesheets/highlight/themes/monokai.scss
index 30d04b4002eff5..a8d229ffca1edf 100644
--- a/app/assets/stylesheets/highlight/themes/monokai.scss
+++ b/app/assets/stylesheets/highlight/themes/monokai.scss
@@ -133,6 +133,10 @@ $monokai-gh: #75715e;
     @include line-link($white, 'git');
   }
 
+  .file-line-edit {
+    @include line-link($white, 'pencil');
+  }
+
   .line-links {
     @include line-hover-bg($monokai-bg);
   }
diff --git a/app/assets/stylesheets/highlight/themes/none.scss b/app/assets/stylesheets/highlight/themes/none.scss
index 8339d7eff80a82..4221ee5546eded 100644
--- a/app/assets/stylesheets/highlight/themes/none.scss
+++ b/app/assets/stylesheets/highlight/themes/none.scss
@@ -32,6 +32,10 @@
     @include line-link($black, 'git');
   }
 
+  .file-line-edit {
+    @include line-link($black, 'pencil');
+  }
+
   .line-links {
     @include line-hover-bg;
   }
diff --git a/app/assets/stylesheets/highlight/themes/solarized-light.scss b/app/assets/stylesheets/highlight/themes/solarized-light.scss
index 4e244ed7420b3e..a94601cb78fa51 100644
--- a/app/assets/stylesheets/highlight/themes/solarized-light.scss
+++ b/app/assets/stylesheets/highlight/themes/solarized-light.scss
@@ -126,6 +126,10 @@ $solarized-light-il: #2aa198;
     @include line-link($black, 'git');
   }
 
+  .file-line-edit {
+    @include line-link($black, 'pencil');
+  }
+
   .line-links {
     @include line-hover-bg($solarized-light-pre-bg);
   }
-- 
GitLab