<commit_before><script>
import $ from 'jquery';
import JobNameComponent from './job_name_component.vue';
import JobComponent from './job_component.vue';
import tooltip from '../../../vue_shared/directives/tooltip';

/**
 * Renders the dropdown for the pipeline graph.
 *
 * The following object should be provided as `job`:
 *
 * {
 *   "id": 4256,
 *   "name": "test",
 *   "status": {
 *     "icon": "icon_status_success",
 *     "text": "passed",
 *     "label": "passed",
 *     "group": "success",
 *     "details_path": "/root/ci-mock/builds/4256",
 *     "action": {
 *       "icon": "retry",
 *       "title": "Retry",
 *       "path": "/root/ci-mock/builds/4256/retry",
 *       "method": "post"
 *     }
 *   }
 * }
 */
export default {
  directives: {
    tooltip,
  },

  components: {
    JobComponent,
    JobNameComponent,
  },

  props: {
    job: {
      type: Object,
      required: true,
    },
  },

  computed: {
    tooltipText() {
      return `${this.job.name} - ${this.job.status.label}`;
    },
  },

  mounted() {
    this.stopDropdownClickPropagation();
  },

  methods: {
    /**
     * When the user right clicks or cmd/ctrl + click in the job name or the action icon
     * the dropdown should not be closed so we stop propagation
     * of the click event inside the dropdown.
     *
     * Since this component is rendered multiple times per page we need to guarantee we only
     * target the click event of this component.
     */
    stopDropdownClickPropagation() {
      $(
        '.js-grouped-pipeline-dropdown button, .js-grouped-pipeline-dropdown a.mini-pipeline-graph-dropdown-item',
        this.$el,
      ).on('click', e => {
        e.stopPropagation();
      });
    },

    pipelineActionRequestComplete() {
      this.$emit('pipelineActionRequestComplete');
    },
  },
};
</script>
<template>
  <div class="ci-job-dropdown-container dropdown dropright">
    <button
      v-tooltip
      :title="tooltipText"
      type="button"
      data-toggle="dropdown"
      data-container="body"
      data-boundary="viewport"
      class="dropdown-menu-toggle build-content"
    >

      <job-name-component
        :name="job.name"
        :status="job.status"
      />

      <span class="dropdown-counter-badge">
        {{ job.size }}<commit_msg>Enable display static for ci job dropdowns so that they dont move when window resizes<commit_after><script>
import $ from 'jquery';
import JobNameComponent from './job_name_component.vue';
import JobComponent from './job_component.vue';
import tooltip from '../../../vue_shared/directives/tooltip';

/**
 * Renders the dropdown for the pipeline graph.
 *
 * The following object should be provided as `job`:
 *
 * {
 *   "id": 4256,
 *   "name": "test",
 *   "status": {
 *     "icon": "icon_status_success",
 *     "text": "passed",
 *     "label": "passed",
 *     "group": "success",
 *     "details_path": "/root/ci-mock/builds/4256",
 *     "action": {
 *       "icon": "retry",
 *       "title": "Retry",
 *       "path": "/root/ci-mock/builds/4256/retry",
 *       "method": "post"
 *     }
 *   }
 * }
 */
export default {
  directives: {
    tooltip,
  },

  components: {
    JobComponent,
    JobNameComponent,
  },

  props: {
    job: {
      type: Object,
      required: true,
    },
  },

  computed: {
    tooltipText() {
      return `${this.job.name} - ${this.job.status.label}`;
    },
  },

  mounted() {
    this.stopDropdownClickPropagation();
  },

  methods: {
    /**
     * When the user right clicks or cmd/ctrl + click in the job name or the action icon
     * the dropdown should not be closed so we stop propagation
     * of the click event inside the dropdown.
     *
     * Since this component is rendered multiple times per page we need to guarantee we only
     * target the click event of this component.
     */
    stopDropdownClickPropagation() {
      $(
        '.js-grouped-pipeline-dropdown button, .js-grouped-pipeline-dropdown a.mini-pipeline-graph-dropdown-item',
        this.$el,
      ).on('click', e => {
        e.stopPropagation();
      });
    },

    pipelineActionRequestComplete() {
      this.$emit('pipelineActionRequestComplete');
    },
  },
};
</script>
<template>
  <div class="ci-job-dropdown-container dropdown dropright">
    <button
      v-tooltip
      :title="tooltipText"
      type="button"
      data-toggle="dropdown"
      data-container="body"
      data-boundary="viewport"
      data-display="static"
      class="dropdown-menu-toggle build-content"
    >

      <job-name-component
        :name="job.name"
        :status="job.status"
      />

      <span class="dropdown-counter-badge">
        {{ job.size }}
{'fraction_non_alphanumeric': 0.15108834827144688, 'fraction_numerical': 0.005121638924455826, 'mean_word_length': 2.4236669101533965, 'pattern_counts': {'":': 26, '<': 17, '<?xml version=': 0, '>': 19, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '832205', 'n_tokens_mistral': 1482, 'n_tokens_neox': 1452, 'n_words': 341}