All files / app/assets/javascripts/confidential_merge_request/components project_form_group.vue

80% Statements 24/30
66.67% Branches 8/12
90.91% Functions 10/11
80% Lines 24/30

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147  3x 3x 3x 3x 3x 3x                                                       3x           2x       3x 3x 3x       3x 2x       2x 2x   1x         7x             3x 3x           3x 3x                   2x       2x                                       35x                                                                    
<script>
import { GlIcon, GlLink, GlSprintf } from '@gitlab/ui';
import createFlash from '~/flash';
import Api from '../../api';
import { __ } from '../../locale';
import state from '../state';
import Dropdown from './dropdown.vue';
 
export default {
  components: {
    GlIcon,
    GlLink,
    GlSprintf,
    Dropdown,
  },
  props: {
    namespacePath: {
      type: String,
      required: true,
    },
    projectPath: {
      type: String,
      required: true,
    },
    newForkPath: {
      type: String,
      required: true,
    },
    helpPagePath: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      projects: [],
    };
  },
  computed: {
    selectedProject() {
      return state.selectedProject;
    },
  },
  mounted() {
    this.fetchProjects();
    this.createBtn = document.querySelector('.js-create-target');
    this.warningText = document.querySelector('.js-exposed-info-warning');
  },
  methods: {
    selectProject(project) {
      if (project) {
        Object.assign(state, {
          selectedProject: project,
        });
 
E        if (project.namespaceFullPath !== this.namespacePath) {
          this.showWarning();
        }
I      } else if (this.createBtn) {
        this.createBtn.setAttribute('disabled', 'disabled');
      }
    },
    normalizeProjectData(data) {
      return data.map((p) => ({
        id: p.id,
        name: p.name_with_namespace,
        pathWithNamespace: p.path_with_namespace,
        namespaceFullpath: p.namespace.full_path,
      }));
    },
    fetchProjects() {
      Api.projectForks(this.projectPath, {
        with_merge_requests_enabled: true,
        min_access_level: 30,
        visibility: 'private',
      })
        .then(({ data }) => {
          this.projects = this.normalizeProjectData(data);
          this.selectProject(this.projects[0]);
        })
        .catch((e) => {
          createFlash({
            message: __('Error fetching forked projects. Please try again.'),
          });
          throw e;
        });
    },
    showWarning() {
I      if (this.warningText) {
        this.warningText.classList.remove('hidden');
      }
 
I      if (this.createBtn) {
        this.createBtn.classList.add('btn-warning');
        this.createBtn.classList.remove('btn-success');
      }
    },
  },
  i18n: {
    project: __('Project'),
    privateForkSelected: __(
      "To protect this issue's confidentiality, a private fork of this project was selected.",
    ),
    noForks: __('No forks are available to you.'),
    forkTheProject: __(
      `To protect this issue's confidentiality, %{linkStart}fork this project%{linkEnd} and set the fork's visibility to private.`,
    ),
    readMore: __('Read more'),
  },
};
</script>
 
<template>
  <div class="confidential-merge-request-fork-group form-group">
    <label>{{ $options.i18n.project }}</label>
    <div>
      <dropdown
        v-if="projects.length"
        :projects="projects"
        :selected-project="selectedProject"
        @click="selectProject"
      />
      <p class="text-muted mt-1 mb-0">
        <template v-if="projects.length">
          {{ $options.i18n.privateForkSelected }}
        </template>
        <template v-else>
          {{ $options.i18n.noForks }}<br />
          <gl-sprintf :message="$options.i18n.forkTheProject">
            <template #link="{ content }">
              <a :href="newForkPath" target="_blank" class="help-link">{{ content }}</a>
            </template>
          </gl-sprintf>
        </template>
        <gl-link
          :href="helpPagePath"
          class="w-auto p-0 d-inline-block text-primary bg-transparent"
          target="_blank"
        >
          <span class="sr-only">{{ $options.i18n.readMore }}</span>
          <gl-icon name="question-o" />
        </gl-link>
      </p>
    </div>
  </div>
</template>