Prettify sidebar modules

app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue

@@ -69,7 +69,8 @@ export default {
         this.loading = false;
       }
 
-      this.mediator.saveAssignees(this.field)
+      this.mediator
+        .saveAssignees(this.field)
         .then(setLoadingFalse.bind(this))
         .catch(() => {
           setLoadingFalse();

app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue

@@ -56,11 +56,7 @@ export default {
         .update('issue', { confidential })
         .then(() => window.location.reload())
         .catch(() => {
-          Flash(
-            __(
-              'Something went wrong trying to change the confidentiality of this issue',
-            ),
-          );
+          Flash(__('Something went wrong trying to change the confidentiality of this issue'));
         });
     },
   },

app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue

@@ -34,11 +34,7 @@ export default {
       required: true,
       type: Object,
       validator(mediatorObject) {
-        return (
-          mediatorObject.service &&
-          mediatorObject.service.update &&
-          mediatorObject.store
-        );
+        return mediatorObject.service && mediatorObject.service.update && mediatorObject.store;
       },
     },
   },
@@ -67,8 +63,7 @@ export default {
 
   methods: {
     toggleForm() {
-      this.mediator.store.isLockDialogOpen = !this.mediator.store
-        .isLockDialogOpen;
+      this.mediator.store.isLockDialogOpen = !this.mediator.store.isLockDialogOpen;
     },
 
     updateLockedAttribute(locked) {
@@ -79,9 +74,14 @@ export default {
         .then(() => window.location.reload())
         .catch(() =>
           Flash(
-            sprintf(__('Something went wrong trying to change the locked state of this %{issuableDisplayName}'), {
-              issuableDisplayName: this.issuableDisplayName,
-            }),
+            sprintf(
+              __(
+                'Something went wrong trying to change the locked state of this %{issuableDisplayName}',
+              ),
+              {
+                issuableDisplayName: this.issuableDisplayName,
+              },
+            ),
           ),
         );
     },

app/assets/javascripts/sidebar/components/participants/participants.vue

 <script>
-  import { __, n__, sprintf } from '~/locale';
-  import tooltip from '~/vue_shared/directives/tooltip';
-  import userAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
+import { __, n__, sprintf } from '~/locale';
+import tooltip from '~/vue_shared/directives/tooltip';
+import userAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
 
-  export default {
-    directives: {
-      tooltip,
+export default {
+  directives: {
+    tooltip,
+  },
+  components: {
+    userAvatarImage,
+  },
+  props: {
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
     },
-    components: {
-      userAvatarImage,
+    participants: {
+      type: Array,
+      required: false,
+      default: () => [],
     },
-    props: {
-      loading: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
-      participants: {
-        type: Array,
-        required: false,
-        default: () => [],
-      },
-      numberOfLessParticipants: {
-        type: Number,
-        required: false,
-        default: 7,
-      },
+    numberOfLessParticipants: {
+      type: Number,
+      required: false,
+      default: 7,
     },
-    data() {
-      return {
-        isShowingMoreParticipants: false,
-      };
+  },
+  data() {
+    return {
+      isShowingMoreParticipants: false,
+    };
+  },
+  computed: {
+    lessParticipants() {
+      return this.participants.slice(0, this.numberOfLessParticipants);
     },
-    computed: {
-      lessParticipants() {
-        return this.participants.slice(0, this.numberOfLessParticipants);
-      },
-      visibleParticipants() {
-        return this.isShowingMoreParticipants ? this.participants : this.lessParticipants;
-      },
-      hasMoreParticipants() {
-        return this.participants.length > this.numberOfLessParticipants;
-      },
-      toggleLabel() {
-        let label = '';
-        if (this.isShowingMoreParticipants) {
-          label = __('- show less');
-        } else {
-          label = sprintf(__('+ %{moreCount} more'), {
-            moreCount: this.participants.length - this.numberOfLessParticipants,
-          });
-        }
+    visibleParticipants() {
+      return this.isShowingMoreParticipants ? this.participants : this.lessParticipants;
+    },
+    hasMoreParticipants() {
+      return this.participants.length > this.numberOfLessParticipants;
+    },
+    toggleLabel() {
+      let label = '';
+      if (this.isShowingMoreParticipants) {
+        label = __('- show less');
+      } else {
+        label = sprintf(__('+ %{moreCount} more'), {
+          moreCount: this.participants.length - this.numberOfLessParticipants,
+        });
+      }
 
-        return label;
-      },
-      participantLabel() {
-        return sprintf(
-          n__('%{count} participant', '%{count} participants', this.participants.length),
-          { count: this.loading ? '' : this.participantCount },
-        );
-      },
-      participantCount() {
-        return this.participants.length;
-      },
+      return label;
+    },
+    participantLabel() {
+      return sprintf(
+        n__('%{count} participant', '%{count} participants', this.participants.length),
+        { count: this.loading ? '' : this.participantCount },
+      );
+    },
+    participantCount() {
+      return this.participants.length;
+    },
+  },
+  methods: {
+    toggleMoreParticipants() {
+      this.isShowingMoreParticipants = !this.isShowingMoreParticipants;
     },
-    methods: {
-      toggleMoreParticipants() {
-        this.isShowingMoreParticipants = !this.isShowingMoreParticipants;
-      },
-      onClickCollapsedIcon() {
-        this.$emit('toggleSidebar');
-      },
+    onClickCollapsedIcon() {
+      this.$emit('toggleSidebar');
     },
-  };
+  },
+};
 </script>
 
 <template>

app/assets/javascripts/sidebar/components/participants/sidebar_participants.vue

 <script>
-  import Store from '../../stores/sidebar_store';
-  import participants from './participants.vue';
+import Store from '../../stores/sidebar_store';
+import participants from './participants.vue';
 
-  export default {
-    components: {
-      participants,
+export default {
+  components: {
+    participants,
+  },
+  props: {
+    mediator: {
+      type: Object,
+      required: true,
     },
-    props: {
-      mediator: {
-        type: Object,
-        required: true,
-      },
-    },
-    data() {
-      return {
-        store: new Store(),
-      };
-    },
-  };
+  },
+  data() {
+    return {
+      store: new Store(),
+    };
+  },
+};
 </script>
 
 <template>

app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions.vue

@@ -21,10 +21,9 @@ export default {
   },
   methods: {
     onToggleSubscription() {
-      this.mediator.toggleSubscription()
-        .catch(() => {
-          Flash(__('Error occurred when toggling the notification subscription'));
-        });
+      this.mediator.toggleSubscription().catch(() => {
+        Flash(__('Error occurred when toggling the notification subscription'));
+      });
     },
   },
 };

app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.vue

 <script>
-  import { __, sprintf } from '~/locale';
-  import { abbreviateTime } from '~/lib/utils/pretty_time';
-  import icon from '~/vue_shared/components/icon.vue';
-  import tooltip from '~/vue_shared/directives/tooltip';
+import { __, sprintf } from '~/locale';
+import { abbreviateTime } from '~/lib/utils/pretty_time';
+import icon from '~/vue_shared/components/icon.vue';
+import tooltip from '~/vue_shared/directives/tooltip';
 
-  export default {
-    name: 'TimeTrackingCollapsedState',
-    components: {
-      icon,
+export default {
+  name: 'TimeTrackingCollapsedState',
+  components: {
+    icon,
+  },
+  directives: {
+    tooltip,
+  },
+  props: {
+    showComparisonState: {
+      type: Boolean,
+      required: true,
     },
-    directives: {
-      tooltip,
+    showSpentOnlyState: {
+      type: Boolean,
+      required: true,
     },
-    props: {
-      showComparisonState: {
-        type: Boolean,
-        required: true,
-      },
-      showSpentOnlyState: {
-        type: Boolean,
-        required: true,
-      },
-      showEstimateOnlyState: {
-        type: Boolean,
-        required: true,
-      },
-      showNoTimeTrackingState: {
-        type: Boolean,
-        required: true,
-      },
-      timeSpentHumanReadable: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      timeEstimateHumanReadable: {
-        type: String,
-        required: false,
-        default: '',
-      },
+    showEstimateOnlyState: {
+      type: Boolean,
+      required: true,
     },
-    computed: {
-      timeSpent() {
-        return this.abbreviateTime(this.timeSpentHumanReadable);
-      },
-      timeEstimate() {
-        return this.abbreviateTime(this.timeEstimateHumanReadable);
-      },
-      divClass() {
-        if (this.showComparisonState) {
-          return 'compare';
-        } else if (this.showEstimateOnlyState) {
-          return 'estimate-only';
-        } else if (this.showSpentOnlyState) {
-          return 'spend-only';
-        } else if (this.showNoTimeTrackingState) {
-          return 'no-tracking';
-        }
+    showNoTimeTrackingState: {
+      type: Boolean,
+      required: true,
+    },
+    timeSpentHumanReadable: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    timeEstimateHumanReadable: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  computed: {
+    timeSpent() {
+      return this.abbreviateTime(this.timeSpentHumanReadable);
+    },
+    timeEstimate() {
+      return this.abbreviateTime(this.timeEstimateHumanReadable);
+    },
+    divClass() {
+      if (this.showComparisonState) {
+        return 'compare';
+      } else if (this.showEstimateOnlyState) {
+        return 'estimate-only';
+      } else if (this.showSpentOnlyState) {
+        return 'spend-only';
+      } else if (this.showNoTimeTrackingState) {
+        return 'no-tracking';
+      }
 
+      return '';
+    },
+    spanClass() {
+      if (this.showComparisonState) {
         return '';
-      },
-      spanClass() {
-        if (this.showComparisonState) {
-          return '';
-        } else if (this.showEstimateOnlyState || this.showSpentOnlyState) {
-          return 'bold';
-        } else if (this.showNoTimeTrackingState) {
-          return 'no-value';
-        }
+      } else if (this.showEstimateOnlyState || this.showSpentOnlyState) {
+        return 'bold';
+      } else if (this.showNoTimeTrackingState) {
+        return 'no-value';
+      }
 
-        return '';
-      },
-      text() {
-        if (this.showComparisonState) {
-          return `${this.timeSpent} / ${this.timeEstimate}`;
-        } else if (this.showEstimateOnlyState) {
-          return `-- / ${this.timeEstimate}`;
-        } else if (this.showSpentOnlyState) {
-          return `${this.timeSpent} / --`;
-        } else if (this.showNoTimeTrackingState) {
-          return 'None';
-        }
+      return '';
+    },
+    text() {
+      if (this.showComparisonState) {
+        return `${this.timeSpent} / ${this.timeEstimate}`;
+      } else if (this.showEstimateOnlyState) {
+        return `-- / ${this.timeEstimate}`;
+      } else if (this.showSpentOnlyState) {
+        return `${this.timeSpent} / --`;
+      } else if (this.showNoTimeTrackingState) {
+        return 'None';
+      }
 
-        return '';
-      },
-      timeTrackedTooltipText() {
-        let title;
-        if (this.showComparisonState) {
-          title = __('Time remaining');
-        } else if (this.showEstimateOnlyState) {
-          title = __('Estimated');
-        } else if (this.showSpentOnlyState) {
-          title = __('Time spent');
-        }
+      return '';
+    },
+    timeTrackedTooltipText() {
+      let title;
+      if (this.showComparisonState) {
+        title = __('Time remaining');
+      } else if (this.showEstimateOnlyState) {
+        title = __('Estimated');
+      } else if (this.showSpentOnlyState) {
+        title = __('Time spent');
+      }
 
-        return sprintf('%{title}: %{text}', ({ title, text: this.text }));
-      },
-      tooltipText() {
-        return this.showNoTimeTrackingState ? __('Time tracking') : this.timeTrackedTooltipText;
-      },
+      return sprintf('%{title}: %{text}', { title, text: this.text });
+    },
+    tooltipText() {
+      return this.showNoTimeTrackingState ? __('Time tracking') : this.timeTrackedTooltipText;
     },
-    methods: {
-      abbreviateTime(timeStr) {
-        return abbreviateTime(timeStr);
-      },
+  },
+  methods: {
+    abbreviateTime(timeStr) {
+      return abbreviateTime(timeStr);
     },
-  };
+  },
+};
 </script>
 
 <template>

app/assets/javascripts/sidebar/components/time_tracking/help_state.vue

@@ -15,16 +15,22 @@ export default {
     },
     estimateText() {
       return sprintf(
-        s__('estimateCommand|%{slash_command} will update the estimated time with the latest command.'), {
+        s__(
+          'estimateCommand|%{slash_command} will update the estimated time with the latest command.',
+        ),
+        {
           slash_command: '<code>/estimate</code>',
-        }, false,
+        },
+        false,
       );
     },
     spendText() {
       return sprintf(
-        s__('spendCommand|%{slash_command} will update the sum of the time spent.'), {
+        s__('spendCommand|%{slash_command} will update the sum of the time spent.'),
+        {
           slash_command: '<code>/spend</code>',
-        }, false,
+        },
+        false,
       );
     },
   },

app/assets/javascripts/sidebar/components/time_tracking/sidebar_time_tracking.vue

@@ -26,7 +26,7 @@ export default {
   methods: {
     listenForQuickActions() {
       $(document).on('ajax:success', '.gfm-form', this.quickActionListened);
-      eventHub.$on('timeTrackingUpdated', (data) => {
+      eventHub.$on('timeTrackingUpdated', data => {
         this.quickActionListened(null, data);
       });
     },
@@ -34,9 +34,7 @@ export default {
       const subscribedCommands = ['spend_time', 'time_estimate'];
       let changedCommands;
       if (data !== undefined) {
-        changedCommands = data.commands_changes
-          ? Object.keys(data.commands_changes)
-          : [];
+        changedCommands = data.commands_changes ? Object.keys(data.commands_changes) : [];
       } else {
         changedCommands = [];
       }

app/assets/javascripts/sidebar/components/todo_toggle/todo.vue

@@ -41,9 +41,9 @@ export default {
   },
   computed: {
     buttonClasses() {
-      return this.collapsed ?
-        'btn-blank btn-todo sidebar-collapsed-icon dont-change-state' :
-        'btn btn-default btn-todo issuable-header-btn float-right';
+      return this.collapsed
+        ? 'btn-blank btn-todo sidebar-collapsed-icon dont-change-state'
+        : 'btn btn-default btn-todo issuable-header-btn float-right';
     },
     buttonLabel() {
       return this.isTodo ? MARK_TEXT : TODO_TEXT;

app/assets/javascripts/sidebar/lib/sidebar_move_issue.js

@@ -37,7 +37,8 @@ class SidebarMoveIssue {
       // Keep the dropdown open after selecting an option
       shouldPropagate: false,
       data: (searchTerm, callback) => {
-        this.mediator.fetchAutocompleteProjects(searchTerm)
+        this.mediator
+          .fetchAutocompleteProjects(searchTerm)
           .then(callback)
           .catch(() => new window.Flash('An error occurred while fetching projects autocomplete.'));
       },
@@ -48,7 +49,7 @@ class SidebarMoveIssue {
           </a>
         </li>
       `,
-      clicked: (options) => {
+      clicked: options => {
         const project = options.selectedObj;
         const selectedProjectId = options.isMarking ? project.id : 0;
         this.mediator.setMoveToProjectId(selectedProjectId);
@@ -68,17 +69,12 @@ class SidebarMoveIssue {
 
   onConfirmClicked() {
     if (isValidProjectId(this.mediator.store.moveToProjectId)) {
-      this.$confirmButton
-        .disable()
-        .addClass('is-loading');
+      this.$confirmButton.disable().addClass('is-loading');
 
-      this.mediator.moveIssue()
-        .catch(() => {
-          window.Flash('An error occurred while moving the issue.');
-          this.$confirmButton
-            .enable()
-            .removeClass('is-loading');
-        });
+      this.mediator.moveIssue().catch(() => {
+        window.Flash('An error occurred while moving the issue.');
+        this.$confirmButton.enable().removeClass('is-loading');
+      });
     }
   }
 }

app/assets/javascripts/sidebar/mount_milestone_sidebar.js

@@ -15,15 +15,16 @@ export default class SidebarMilestone {
       components: {
         timeTracker,
       },
-      render: createElement => createElement('timeTracker', {
-        props: {
-          timeEstimate: parseInt(timeEstimate, 10),
-          timeSpent: parseInt(timeSpent, 10),
-          humanTimeEstimate,
-          humanTimeSpent,
-          rootPath: '/',
-        },
-      }),
+      render: createElement =>
+        createElement('timeTracker', {
+          props: {
+            timeEstimate: parseInt(timeEstimate, 10),
+            timeSpent: parseInt(timeSpent, 10),
+            humanTimeEstimate,
+            humanTimeSpent,
+            rootPath: '/',
+          },
+        }),
     });
   }
 }

app/assets/javascripts/sidebar/mount_sidebar.js

@@ -22,14 +22,15 @@ function mountAssigneesComponent(mediator) {
     components: {
       SidebarAssignees,
     },
-    render: createElement => createElement('sidebar-assignees', {
-      props: {
-        mediator,
-        field: el.dataset.field,
-        signedIn: el.hasAttribute('data-signed-in'),
-        issuableType: gl.utils.isInIssuePage() ? 'issue' : 'merge_request',
-      },
-    }),
+    render: createElement =>
+      createElement('sidebar-assignees', {
+        props: {
+          mediator,
+          field: el.dataset.field,
+          signedIn: el.hasAttribute('data-signed-in'),
+          issuableType: gl.utils.isInIssuePage() ? 'issue' : 'merge_request',
+        },
+      }),
   });
 }
 
@@ -83,11 +84,12 @@ function mountParticipantsComponent(mediator) {
     components: {
       sidebarParticipants,
     },
-    render: createElement => createElement('sidebar-participants', {
-      props: {
-        mediator,
-      },
-    }),
+    render: createElement =>
+      createElement('sidebar-participants', {
+        props: {
+          mediator,
+        },
+      }),
   });
 }
 
@@ -102,11 +104,12 @@ function mountSubscriptionsComponent(mediator) {
     components: {
       sidebarSubscriptions,
     },
-    render: createElement => createElement('sidebar-subscriptions', {
-      props: {
-        mediator,
-      },
-    }),
+    render: createElement =>
+      createElement('sidebar-subscriptions', {
+        props: {
+          mediator,
+        },
+      }),
   });
 }
 

app/assets/javascripts/sidebar/services/sidebar_service.js

@@ -22,11 +22,15 @@ export default class SidebarService {
   }
 
   update(key, data) {
-    return Vue.http.put(this.endpoint, {
-      [key]: data,
-    }, {
-      emulateJSON: true,
-    });
+    return Vue.http.put(
+      this.endpoint,
+      {
+        [key]: data,
+      },
+      {
+        emulateJSON: true,
+      },
+    );
   }
 
   getProjectsAutocomplete(searchTerm) {