collapsible_container.vue 3.38 KB
Newer Older
Filipa Lacerda's avatar
Filipa Lacerda committed
1
<script>
2
import { mapActions } from 'vuex';
3
import { GlLoadingIcon, GlButton, GlTooltipDirective, GlModal, GlModalDirective } from '@gitlab/ui';
4 5
import createFlash from '../../flash';
import ClipboardButton from '../../vue_shared/components/clipboard_button.vue';
Filipa Lacerda's avatar
Filipa Lacerda committed
6
import Icon from '../../vue_shared/components/icon.vue';
7
import TableRegistry from './table_registry.vue';
8 9
import { errorMessages, errorMessagesTypes } from '../constants';
import { __ } from '../../locale';
10

11 12 13
export default {
  name: 'CollapsibeContainerRegisty',
  components: {
14 15
    ClipboardButton,
    TableRegistry,
16
    GlLoadingIcon,
Filipa Lacerda's avatar
Filipa Lacerda committed
17 18
    GlButton,
    Icon,
19
    GlModal,
20 21
  },
  directives: {
Filipa Lacerda's avatar
Filipa Lacerda committed
22
    GlTooltip: GlTooltipDirective,
23
    GlModal: GlModalDirective,
24 25 26 27 28
  },
  props: {
    repo: {
      type: Object,
      required: true,
29
    },
30 31 32 33
  },
  data() {
    return {
      isOpen: false,
34
      modalId: `confirm-repo-deletion-modal-${this.repo.id}`,
35 36
    };
  },
Filipa Lacerda's avatar
Filipa Lacerda committed
37 38 39 40 41
  computed: {
    iconName() {
      return this.isOpen ? 'angle-up' : 'angle-right';
    },
  },
42
  methods: {
43
    ...mapActions(['fetchRepos', 'fetchList', 'deleteItem']),
44 45
    toggleRepo() {
      this.isOpen = !this.isOpen;
46

47
      if (this.isOpen) {
Filipa Lacerda's avatar
Filipa Lacerda committed
48
        this.fetchList({ repo: this.repo });
49 50 51
      }
    },
    handleDeleteRepository() {
52
      this.deleteItem(this.repo)
53
        .then(() => {
54
          createFlash(__('This container registry has been scheduled for deletion.'), 'notice');
55 56 57 58 59
          this.fetchRepos();
        })
        .catch(() => this.showError(errorMessagesTypes.DELETE_REPO));
    },
    showError(message) {
60
      createFlash(errorMessages[message]);
61
    },
62 63
  },
};
Filipa Lacerda's avatar
Filipa Lacerda committed
64 65 66 67
</script>

<template>
  <div class="container-image">
Filipa Lacerda's avatar
Filipa Lacerda committed
68
    <div class="container-image-head">
Filipa Lacerda's avatar
Filipa Lacerda committed
69 70 71
      <gl-button class="js-toggle-repo btn-link align-baseline" @click="toggleRepo">
        <icon :name="iconName" /> {{ repo.name }}
      </gl-button>
72

73 74
      <clipboard-button
        v-if="repo.location"
75
        :text="repo.location"
76
        :title="repo.location"
77
        css-class="btn-default btn-transparent btn-clipboard"
Filipa Lacerda's avatar
Filipa Lacerda committed
78
      />
79

Clement Ho's avatar
Clement Ho committed
80
      <div class="controls d-none d-sm-block float-right">
Filipa Lacerda's avatar
Filipa Lacerda committed
81
        <gl-button
82
          v-if="repo.canDelete"
Filipa Lacerda's avatar
Filipa Lacerda committed
83
          v-gl-tooltip
84
          v-gl-modal="modalId"
Filipa Lacerda's avatar
Filipa Lacerda committed
85 86
          :title="s__('ContainerRegistry|Remove repository')"
          :aria-label="s__('ContainerRegistry|Remove repository')"
Filipa Lacerda's avatar
Filipa Lacerda committed
87 88
          class="js-remove-repo"
          variant="danger"
Filipa Lacerda's avatar
Filipa Lacerda committed
89
        >
Filipa Lacerda's avatar
Filipa Lacerda committed
90 91
          <icon name="remove" />
        </gl-button>
92
      </div>
93
    </div>
94

95
    <gl-loading-icon v-if="repo.isLoading" size="md" class="append-bottom-20" />
96

Mike Greiling's avatar
Mike Greiling committed
97 98
    <div v-else-if="!repo.isLoading && isOpen" class="container-image-tags">
      <table-registry v-if="repo.list.length" :repo="repo" />
99

Mike Greiling's avatar
Mike Greiling committed
100 101
      <div v-else class="nothing-here-block">
        {{ s__('ContainerRegistry|No tags in Container Registry for this container image.') }}
102 103
      </div>
    </div>
104
    <gl-modal :modal-id="modalId" ok-variant="danger" @ok="handleDeleteRepository">
105 106 107 108 109 110 111 112 113 114 115 116 117
      <template v-slot:modal-title>{{ s__('ContainerRegistry|Remove repository') }}</template>
      <p
        v-html="
          sprintf(
            s__(
              'ContainerRegistry|You are about to remove repository <b>%{title}</b>. Once you confirm, this repository will be permanently deleted.',
            ),
            { title: repo.name },
          )
        "
      ></p>
      <template v-slot:modal-ok>{{ __('Remove') }}</template>
    </gl-modal>
Filipa Lacerda's avatar
Filipa Lacerda committed
118 119
  </div>
</template>