<commit_before><script>
import _ from 'underscore';
import { s__, sprintf } from '~/locale';
import { mapState, mapGetters, mapActions } from 'vuex';

import gkeDropdownMixin from './gke_dropdown_mixin';

export default {
  name: 'GkeProjectIdDropdown',
  mixins: [gkeDropdownMixin],
  props: {
    docsUrl: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      isLoading: true,
      searchPlaceholderText: s__('ClusterIntegration|Search projects'),
      noSearchResultsText: s__('ClusterIntegration|No projects matched your search'),
    };
  },
  computed: {
    ...mapState(['selectedProject']),
    ...mapState({ items: 'projects' }),
    ...mapGetters(['hasProject']),
    hasOneProject() {
      return this.items.length === 1;
    },
    isDisabled() {
      return this.items.length < 2;
    },
    toggleText() {
      if (this.isLoading) {
        return s__('ClusterIntegration|Fetching projects');
      }

      if (this.hasProject) {
        return this.selectedProject.name;
      }

      return !this.items.length
        ? s__('ClusterIntegration|No projects found')
        : s__('ClusterIntegration|Select project');
    },
    helpText() {
      let message;
      if (this.hasErrors) {
        message =
          'ClusterIntegration|We were unable to fetch any projects. Ensure that you have a project on %{docsLinkStart}Google Cloud Platform%{docsLinkEnd}.';
      }

      message = this.items.length
        ? 'ClusterIntegration|To use a new project, first create one on %{docsLinkStart}Google Cloud Platform%{docsLinkEnd}.'
        : 'ClusterIntegration|To create a cluster, first create a project on %{docsLinkStart}Google Cloud Platform%{docsLinkEnd}.';

      return sprintf(
        s__(message),
        {
          docsLinkEnd: '&nbsp;<i class="fa fa-external-link" aria-hidden="true"></i></a>',
          docsLinkStart: `<a href="${_.escape(
            this.docsUrl,
          )}" target="_blank" rel="noopener noreferrer">`,
        },
        false,
      );
    },
  },
  created() {
    this.getProjects()
      .then(this.fetchSuccessHandler)
      .catch(this.fetchFailureHandler);
  },
  methods: {
    ...mapActions(['getProjects']),
    ...mapActions({ setItem: 'setProject' }),
    fetchSuccessHandler() {
      if (this.defaultValue) {
        const projectToSelect = _.find(this.items, item => item.projectId === this.defaultValue);<commit_msg>set isLoading in created lifecycle hook<commit_after><script>
import _ from 'underscore';
import { s__, sprintf } from '~/locale';
import { mapState, mapGetters, mapActions } from 'vuex';

import gkeDropdownMixin from './gke_dropdown_mixin';

export default {
  name: 'GkeProjectIdDropdown',
  mixins: [gkeDropdownMixin],
  props: {
    docsUrl: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      searchPlaceholderText: s__('ClusterIntegration|Search projects'),
      noSearchResultsText: s__('ClusterIntegration|No projects matched your search'),
    };
  },
  computed: {
    ...mapState(['selectedProject']),
    ...mapState({ items: 'projects' }),
    ...mapGetters(['hasProject']),
    hasOneProject() {
      return this.items.length === 1;
    },
    isDisabled() {
      return this.items.length < 2;
    },
    toggleText() {
      if (this.isLoading) {
        return s__('ClusterIntegration|Fetching projects');
      }

      if (this.hasProject) {
        return this.selectedProject.name;
      }

      return !this.items.length
        ? s__('ClusterIntegration|No projects found')
        : s__('ClusterIntegration|Select project');
    },
    helpText() {
      let message;
      if (this.hasErrors) {
        message =
          'ClusterIntegration|We were unable to fetch any projects. Ensure that you have a project on %{docsLinkStart}Google Cloud Platform%{docsLinkEnd}.';
      }

      message = this.items.length
        ? 'ClusterIntegration|To use a new project, first create one on %{docsLinkStart}Google Cloud Platform%{docsLinkEnd}.'
        : 'ClusterIntegration|To create a cluster, first create a project on %{docsLinkStart}Google Cloud Platform%{docsLinkEnd}.';

      return sprintf(
        s__(message),
        {
          docsLinkEnd: '&nbsp;<i class="fa fa-external-link" aria-hidden="true"></i></a>',
          docsLinkStart: `<a href="${_.escape(
            this.docsUrl,
          )}" target="_blank" rel="noopener noreferrer">`,
        },
        false,
      );
    },
  },
  created() {
    this.isLoading = true;

    this.getProjects()
      .then(this.fetchSuccessHandler)
      .catch(this.fetchFailureHandler);
  },
  methods: {
    ...mapActions(['getProjects']),
    ...mapActions({ setItem: 'setProject' }),
    fetchSuccessHandler() {
      if (this.defaultValue) {
        const projectToSelect = _.find(this.items, item => item.projectId === this.defaultValue);
{'fraction_non_alphanumeric': 0.13823469178783535, 'fraction_numerical': 0.0008191685439279131, 'mean_word_length': 2.8007782101167313, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 15, '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': '381291', 'n_tokens_mistral': 1461, 'n_tokens_neox': 1447, 'n_words': 320}