1 files changed, 58 insertions, 62 deletions
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue b/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue
index 4310d762c78..35ab3fd11df 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue
@@ -1,82 +1,78 @@
 <script>
-  import { mapActions, mapState, mapGetters } from 'vuex';
-  import tooltip from '~/vue_shared/directives/tooltip';
+import { mapActions, mapState, mapGetters } from 'vuex';
+import { __ } from '~/locale';
+import tooltip from '~/vue_shared/directives/tooltip';
 
-  export default {
-    directives: {
-      tooltip,
+export default {
+  directives: {
+    tooltip,
+  },
+  props: {
+    value: {
+      type: String,
+      required: true,
     },
-    props: {
-      value: {
-        type: String,
-        required: true,
-      },
-      label: {
-        type: String,
-        required: false,
-        default: null,
-      },
-      checked: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
-      showInput: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
-      helpText: {
-        type: String,
-        required: false,
-        default: null,
-      },
+    label: {
+      type: String,
+      required: false,
+      default: null,
     },
-    computed: {
-      ...mapState('commit', [
-        'commitAction',
-      ]),
-      ...mapGetters('commit', [
-        'newBranchName',
-      ]),
+    checked: {
+      type: Boolean,
+      required: false,
+      default: false,
     },
-    methods: {
-      ...mapActions('commit', [
-        'updateCommitAction',
-        'updateBranchName',
-      ]),
+    showInput: {
+      type: Boolean,
+      required: false,
+      default: false,
     },
-  };
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  computed: {
+    ...mapState('commit', ['commitAction']),
+    ...mapGetters('commit', ['newBranchName']),
+    tooltipTitle() {
+      return this.disabled
+        ? __('This option is disabled while you still have unstaged changes')
+        : '';
+    },
+  },
+  methods: {
+    ...mapActions('commit', ['updateCommitAction', 'updateBranchName']),
+  },
+};
 </script>
 
 <template>
   <fieldset>
-    <label>
+    <label
+      v-tooltip
+      :title="tooltipTitle"
+      :class="{
+        'is-disabled': disabled
+      }"
+    >
       <input
+        :value="value"
+        :checked="commitAction === value"
+        :disabled="disabled"
         type="radio"
         name="commit-action"
-        :value="value"
         @change="updateCommitAction($event.target.value)"
-        :checked="checked"
-        v-once
       />
       <span class="prepend-left-10">
-        <template v-if="label">
-          {{ label }}
-        </template>
-        <slot v-else></slot>
         <span
-          v-if="helpText"
-          v-tooltip
-          class="help-block inline"
-          :title="helpText"
+          v-if="label"
+          class="ide-radio-label"
         >
-          <i
-            class="fa fa-question-circle"
-            aria-hidden="true"
-          >
-          </i>
+          {{ label }}
         </span>
+        <slot v-else></slot>
       </span>
     </label>
     <div
@@ -84,9 +80,9 @@
       class="ide-commit-new-branch"
     >
       <input
-        type="text"
-        class="form-control"
         :placeholder="newBranchName"
+        type="text"
+        class="form-control monospace"
         @input="updateBranchName($event.target.value)"
       />
     </div>