ui/lib/shared/addon/components/form-namespace/component.js

import { observer, get, set } from '@ember/object';
import { next } from '@ember/runloop';
import {  equal } from '@ember/object/computed';
import { inject as service } from '@ember/service';
import Component from '@ember/component';
import layout from './template';
import { resolve, reject } from 'rsvp';
import $ from 'jquery';

const REUSE = 'reuse';
const CREATE = 'create';

export default Component.extend({
  intl:         service(),
  scope:        service(),
  clusterStore: service(),

  layout,
  createLabel: 'formNamespace.label.create',
  reuseLabel:  'formNamespace.label.reuse',

  // Outputs
  namespace: null,
  errors:    null,

  reuseNamespaceId: null,
  createNamespace:  null,

  mode:        REUSE,
  editing:     true,
  required:    true,
  allowCreate: true,
  hookName:    'saveNamespace',

  classNames: ['inline-form'],
  choices:    null,

  isReuse: equal('mode', REUSE),
  init() {
    this._super(...arguments);

    if (this.registerHook) {
      this.registerHook(this.saveNamespace.bind(this), {
        name: get(this, 'hookName'),
        key:  '_beforeSaveHooks'
      });
    }

    const currentProjectsNamespaces = get(this, 'clusterStore').all('namespace').filterBy('projectId', get(this, 'scope.currentProject.id'));

    set(this, 'choices', currentProjectsNamespaces).sortBy('displayName');

    let all = get(this, 'choices');

    set(this, 'createNamespace', get(this, 'clusterStore').createRecord({
      type:                          'namespace',
      name:                          '',
      projectId:                     get(this, 'scope.currentProject.id'),
      containerDefaultResourceLimit: get(this, 'scope.currentProject.containerDefaultResourceLimit'),
    }));

    if ( get(this, 'mode') === REUSE ) {
      let namespace = get(this, 'namespace') ||          // Passed in
                      all.findBy('isDefault', true) ||  // The default one
                      all.objectAt(0);                  // Ok any one

      if ( namespace && namespace.id) {
        set(this, 'reuseNamespaceId', get(namespace, 'id'));
      } else if (namespace){
        set(this, 'createNamespace', namespace);
        set(this, 'mode', CREATE);

        return;
      } else {
        next(() => {
          set(this, 'mode', CREATE);
        });
      }

      next(() => {
        this.updateNamespace();
      });
    }
  },

  actions: {
    toggle() {
      let mode = (get(this, 'mode') === REUSE ? CREATE : REUSE);

      set(this, 'mode', mode);
      if ( mode === CREATE ) {
        next(() => {
          let elem = $('.new-name')[0];

          if ( elem ) {
            elem.focus();
            elem.select();
          }
        });
      }
    },
  },

  updateNamespace: observer('reuseNamespaceId', 'mode', function() {
    let namespace;

    if ( get(this, 'mode') === REUSE ) {
      namespace = get(this, 'choices').findBy('id', get(this, 'reuseNamespaceId'));
    }

    if ( !namespace ) {
      namespace = get(this, 'createNamespace');
    }

    set(this, 'namespace', namespace);
  }),

  validate: observer('namespace.{id,name}', function() {
    let intl = get(this, 'intl');
    let errors = [];

    let namespace = get(this, 'namespace');

    if ( namespace && get(namespace, 'name') ) {
      namespace.validationErrors().forEach((err) => {
        errors.push(intl.t('formNamespace.errors.validation', { error: err }))
      });
    } else {
      errors.push(intl.t('validation.required', { key: intl.t('generic.namespace') }));
    }

    if ( errors.length ) {
      set(this, 'errors', errors);
    } else {
      set(this, 'errors', null);
    }
  }),

  saveNamespace() {
    if (this.isDestroyed || this.isDestroying ) {
      return;
    }

    if ( get(this, 'isReuse') ) {
      return resolve();
    } else if ( get(this, 'errors.length') ) {
      return reject();
    }

    const namespace = get(this, 'namespace');

    return namespace.save().then((newNamespace) => {
      return newNamespace.waitForState('active');
    }).catch((err) => {
      set(this, 'errors', [err.message]);

      return reject(err);
    });
  },
});