gitlab-org--gitlab-foss/app/assets/javascripts/vue_shared/components/namespace_select/namespace_select.vue

<script>
import {
  GlDropdown,
  GlDropdownDivider,
  GlDropdownItem,
  GlDropdownSectionHeader,
  GlSearchBoxByType,
} from '@gitlab/ui';
import { __ } from '~/locale';

export const EMPTY_NAMESPACE_ID = -1;
export const i18n = {
  DEFAULT_TEXT: __('Select a new namespace'),
  DEFAULT_EMPTY_NAMESPACE_TEXT: __('No namespace'),
  GROUPS: __('Groups'),
  USERS: __('Users'),
};

const filterByName = (data, searchTerm = '') => {
  if (!searchTerm) {
    return data;
  }

  return data.filter((d) => d.humanName.toLowerCase().includes(searchTerm.toLowerCase()));
};

export default {
  name: 'NamespaceSelect',
  components: {
    GlDropdown,
    GlDropdownDivider,
    GlDropdownItem,
    GlDropdownSectionHeader,
    GlSearchBoxByType,
  },
  props: {
    groupNamespaces: {
      type: Array,
      required: false,
      default: () => [],
    },
    userNamespaces: {
      type: Array,
      required: false,
      default: () => [],
    },
    fullWidth: {
      type: Boolean,
      required: false,
      default: false,
    },
    defaultText: {
      type: String,
      required: false,
      default: i18n.DEFAULT_TEXT,
    },
    includeHeaders: {
      type: Boolean,
      required: false,
      default: true,
    },
    emptyNamespaceTitle: {
      type: String,
      required: false,
      default: i18n.DEFAULT_EMPTY_NAMESPACE_TEXT,
    },
    includeEmptyNamespace: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  data() {
    return {
      searchTerm: '',
      selectedNamespace: null,
    };
  },
  computed: {
    hasUserNamespaces() {
      return this.userNamespaces.length;
    },
    hasGroupNamespaces() {
      return this.groupNamespaces.length;
    },
    filteredGroupNamespaces() {
      if (!this.hasGroupNamespaces) return [];
      return filterByName(this.groupNamespaces, this.searchTerm);
    },
    filteredUserNamespaces() {
      if (!this.hasUserNamespaces) return [];
      return filterByName(this.userNamespaces, this.searchTerm);
    },
    selectedNamespaceText() {
      return this.selectedNamespace?.humanName || this.defaultText;
    },
    filteredEmptyNamespaceTitle() {
      const { includeEmptyNamespace, emptyNamespaceTitle, searchTerm } = this;

      if (!includeEmptyNamespace) {
        return '';
      }
      if (!searchTerm) {
        return emptyNamespaceTitle;
      }

      return emptyNamespaceTitle.toLowerCase().includes(searchTerm.toLowerCase());
    },
  },
  methods: {
    handleSelect(item) {
      this.selectedNamespace = item;
      this.$emit('select', item);
    },
    handleSelectEmptyNamespace() {
      this.handleSelect({ id: EMPTY_NAMESPACE_ID, humanName: this.emptyNamespaceTitle });
    },
  },
  i18n,
};
</script>
<template>
  <gl-dropdown :text="selectedNamespaceText" :block="fullWidth" data-qa-selector="namespaces_list">
    <template #header>
      <gl-search-box-by-type v-model.trim="searchTerm" />
    </template>
    <div v-if="filteredEmptyNamespaceTitle">
      <gl-dropdown-item
        data-qa-selector="namespaces_list_item"
        @click="handleSelectEmptyNamespace()"
      >
        {{ emptyNamespaceTitle }}
      </gl-dropdown-item>
      <gl-dropdown-divider />
    </div>
    <div v-if="hasGroupNamespaces" data-qa-selector="namespaces_list_groups">
      <gl-dropdown-section-header v-if="includeHeaders">{{
        $options.i18n.GROUPS
      }}</gl-dropdown-section-header>
      <gl-dropdown-item
        v-for="item in filteredGroupNamespaces"
        :key="item.id"
        data-qa-selector="namespaces_list_item"
        @click="handleSelect(item)"
        >{{ item.humanName }}</gl-dropdown-item
      >
    </div>
    <div v-if="hasUserNamespaces" data-qa-selector="namespaces_list_users">
      <gl-dropdown-section-header v-if="includeHeaders">{{
        $options.i18n.USERS
      }}</gl-dropdown-section-header>
      <gl-dropdown-item
        v-for="item in filteredUserNamespaces"
        :key="item.id"
        data-qa-selector="namespaces_list_item"
        @click="handleSelect(item)"
        >{{ item.humanName }}</gl-dropdown-item
      >
    </div>
  </gl-dropdown>
</template>