Add latest changes from gitlab-org/gitlab@master

2 files changed, 127 insertions, 85 deletions

diff --git a/app/assets/javascripts/vue_shared/components/actions_button.vue b/app/assets/javascripts/vue_shared/components/actions_button.vue
index e3b22bcaf98..175aef59ae5 100644
--- a/app/assets/javascripts/vue_shared/components/actions_button.vue
+++ b/app/assets/javascripts/vue_shared/components/actions_button.vue
@@ -1,11 +1,5 @@
 <script>
-import {
-  GlDropdown,
-  GlDropdownItem,
-  GlDropdownDivider,
-  GlButton,
-  GlTooltipDirective,
-} from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem, GlDropdownDivider, GlButton, GlTooltip } from '@gitlab/ui';
 
 export default {
   components: {
@@ -13,11 +7,14 @@ export default {
     GlDropdownItem,
     GlDropdownDivider,
     GlButton,
-  },
-  directives: {
-    GlTooltip: GlTooltipDirective,
+    GlTooltip,
   },
   props: {
+    id: {
+      type: String,
+      required: false,
+      default: '',
+    },
     actions: {
       type: Array,
       required: true,
@@ -37,6 +34,11 @@ export default {
       required: false,
       default: 'default',
     },
+    showActionTooltip: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   computed: {
     hasMultipleActions() {
@@ -51,6 +53,7 @@ export default {
       this.$emit('select', action.key);
     },
     handleClick(action, evt) {
+      this.$emit('actionClicked', { action });
       return action.handle?.(evt);
     },
   },
@@ -58,46 +61,51 @@ export default {
 </script>
 
 <template>
-  <gl-dropdown
-    v-if="hasMultipleActions"
-    v-gl-tooltip="selectedAction.tooltip"
-    :text="selectedAction.text"
-    :split-href="selectedAction.href"
-    :variant="variant"
-    :category="category"
-    split
-    data-qa-selector="action_dropdown"
-    @click="handleClick(selectedAction, $event)"
-  >
-    <template #button-content>
-      <span class="gl-dropdown-button-text" v-bind="selectedAction.attrs">
-        {{ selectedAction.text }}
-      </span>
-    </template>
-    <template v-for="(action, index) in actions">
-      <gl-dropdown-item
-        :key="action.key"
-        is-check-item
-        :is-checked="action.key === selectedAction.key"
-        :secondary-text="action.secondaryText"
-        :data-qa-selector="`${action.key}_menu_item`"
-        :data-testid="`action_${action.key}`"
-        @click="handleItemClick(action)"
-      >
-        <span class="gl-font-weight-bold">{{ action.text }}</span>
-      </gl-dropdown-item>
-      <gl-dropdown-divider v-if="index != actions.length - 1" :key="action.key + '_divider'" />
-    </template>
-  </gl-dropdown>
-  <gl-button
-    v-else-if="selectedAction"
-    v-gl-tooltip="selectedAction.tooltip"
-    v-bind="selectedAction.attrs"
-    :variant="variant"
-    :category="category"
-    :href="selectedAction.href"
-    @click="handleClick(selectedAction, $event)"
-  >
-    {{ selectedAction.text }}
-  </gl-button>
+  <span>
+    <gl-dropdown
+      v-if="hasMultipleActions"
+      :id="id"
+      :text="selectedAction.text"
+      :split-href="selectedAction.href"
+      :variant="variant"
+      :category="category"
+      split
+      data-qa-selector="action_dropdown"
+      @click="handleClick(selectedAction, $event)"
+    >
+      <template #button-content>
+        <span class="gl-dropdown-button-text" v-bind="selectedAction.attrs">
+          {{ selectedAction.text }}
+        </span>
+      </template>
+      <template v-for="(action, index) in actions">
+        <gl-dropdown-item
+          :key="action.key"
+          is-check-item
+          :is-checked="action.key === selectedAction.key"
+          :secondary-text="action.secondaryText"
+          :data-qa-selector="`${action.key}_menu_item`"
+          :data-testid="`action_${action.key}`"
+          @click="handleItemClick(action)"
+        >
+          <span class="gl-font-weight-bold">{{ action.text }}</span>
+        </gl-dropdown-item>
+        <gl-dropdown-divider v-if="index != actions.length - 1" :key="action.key + '_divider'" />
+      </template>
+    </gl-dropdown>
+    <gl-button
+      v-else-if="selectedAction"
+      :id="id"
+      v-bind="selectedAction.attrs"
+      :variant="variant"
+      :category="category"
+      :href="selectedAction.href"
+      @click="handleClick(selectedAction, $event)"
+    >
+      {{ selectedAction.text }}
+    </gl-button>
+    <gl-tooltip v-if="selectedAction.tooltip && showActionTooltip" :target="id">
+      {{ selectedAction.tooltip }}
+    </gl-tooltip>
+  </span>
 </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 6d179b3dc92..59385774212 100644
--- a/app/assets/javascripts/vue_shared/components/web_ide_link.vue
+++ b/app/assets/javascripts/vue_shared/components/web_ide_link.vue
@@ -1,9 +1,11 @@
 <script>
-import { GlModal, GlSprintf, GlLink } from '@gitlab/ui';
+import { GlModal, GlSprintf, GlLink, GlPopover } from '@gitlab/ui';
 import { s__, __ } from '~/locale';
+import UserCalloutDismisser from '~/vue_shared/components/user_callout_dismisser.vue';
 import ActionsButton from '~/vue_shared/components/actions_button.vue';
 import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 import ConfirmForkModal from '~/vue_shared/components/confirm_fork_modal.vue';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 const KEY_EDIT = 'edit';
 const KEY_WEB_IDE = 'webide';
@@ -32,9 +34,12 @@ export default {
     GlModal,
     GlSprintf,
     GlLink,
+    GlPopover,
     ConfirmForkModal,
+    UserCalloutDismisser,
   },
   i18n,
+  mixins: [glFeatureFlagsMixin()],
   props: {
     isFork: {
       type: Boolean,
@@ -296,6 +301,9 @@ export default {
         },
       };
     },
+    displayVscodeWebIdeCallout() {
+      return this.glFeatures.vscodeWebIde && !this.showEditButton;
+    },
   },
   methods: {
     select(key) {
@@ -305,40 +313,66 @@ export default {
       this[dataKey] = true;
     },
   },
+  webIdeButtonId: 'web-ide-link',
 };
 </script>
 
 <template>
-  <div class="gl-sm-ml-3">
-    <actions-button
-      :actions="actions"
-      :selected-key="selection"
-      :variant="isBlob ? 'confirm' : 'default'"
-      :category="isBlob ? 'primary' : 'secondary'"
-      @select="select"
-    />
-    <local-storage-sync
-      storage-key="gl-web-ide-button-selected"
-      :value="selection"
-      as-string
-      @input="select"
-    />
-    <gl-modal
-      v-if="computedShowGitpodButton && !gitpodEnabled"
-      v-model="showEnableGitpodModal"
-      v-bind="enableGitpodModalProps"
-    >
-      <gl-sprintf :message="$options.i18n.modal.content">
-        <template #link="{ content }">
-          <gl-link :href="userPreferencesGitpodPath">{{ content }}</gl-link>
-        </template>
-      </gl-sprintf>
-    </gl-modal>
-    <confirm-fork-modal
-      v-if="showWebIdeButton || showEditButton"
-      v-model="showForkModal"
-      :modal-id="forkModalId"
-      :fork-path="forkPath"
-    />
-  </div>
+  <user-callout-dismisser :skip-query="!displayVscodeWebIdeCallout" feature-name="vscode_web_ide">
+    <template #default="{ dismiss, shouldShowCallout }">
+      <div class="gl-sm-ml-3">
+        <actions-button
+          :id="$options.webIdeButtonId"
+          :actions="actions"
+          :selected-key="selection"
+          :variant="isBlob ? 'confirm' : 'default'"
+          :category="isBlob ? 'primary' : 'secondary'"
+          :show-action-tooltip="!displayVscodeWebIdeCallout || !shouldShowCallout"
+          @select="select"
+          @actionClicked="dismiss"
+        />
+        <local-storage-sync
+          storage-key="gl-web-ide-button-selected"
+          :value="selection"
+          as-string
+          @input="select"
+        />
+        <gl-modal
+          v-if="computedShowGitpodButton && !gitpodEnabled"
+          v-model="showEnableGitpodModal"
+          v-bind="enableGitpodModalProps"
+        >
+          <gl-sprintf :message="$options.i18n.modal.content">
+            <template #link="{ content }">
+              <gl-link :href="userPreferencesGitpodPath">{{ content }}</gl-link>
+            </template>
+          </gl-sprintf>
+        </gl-modal>
+        <confirm-fork-modal
+          v-if="showWebIdeButton || showEditButton"
+          v-model="showForkModal"
+          :modal-id="forkModalId"
+          :fork-path="forkPath"
+        />
+        <gl-popover
+          v-if="displayVscodeWebIdeCallout"
+          :target="$options.webIdeButtonId"
+          :show="shouldShowCallout"
+          show-close-button
+          triggers="manual"
+          @close-button-clicked="dismiss"
+        >
+          <template #title>
+            {{ __('Try out the new Web IDE') }}
+          </template>
+
+          {{
+            __(
+              'VS Code in your browser. View code and make changes from the same UI as in your local IDE 🎉',
+            )
+          }}
+        </gl-popover>
+      </div>
+    </template>
+  </user-callout-dismisser>
 </template>