diff options
Diffstat (limited to 'app/assets/javascripts/registry/explorer/pages/list.vue')
| -rw-r--r-- | app/assets/javascripts/registry/explorer/pages/list.vue | 141 |
1 files changed, 77 insertions, 64 deletions
diff --git a/app/assets/javascripts/registry/explorer/pages/list.vue b/app/assets/javascripts/registry/explorer/pages/list.vue index 5f8f4d8df1e..4e9f0a83501 100644 --- a/app/assets/javascripts/registry/explorer/pages/list.vue +++ b/app/assets/javascripts/registry/explorer/pages/list.vue @@ -1,7 +1,6 @@ <script> import { mapState, mapActions } from 'vuex'; import { - GlLoadingIcon, GlEmptyState, GlPagination, GlTooltipDirective, @@ -10,6 +9,7 @@ import { GlModal, GlSprintf, GlLink, + GlSkeletonLoader, } from '@gitlab/ui'; import Tracking from '~/tracking'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; @@ -20,7 +20,6 @@ export default { name: 'RegistryListApp', components: { GlEmptyState, - GlLoadingIcon, GlPagination, ProjectEmptyState, GroupEmptyState, @@ -30,11 +29,17 @@ export default { GlModal, GlSprintf, GlLink, + GlSkeletonLoader, }, directives: { GlTooltip: GlTooltipDirective, }, mixins: [Tracking.mixin()], + loader: { + repeat: 10, + width: 1000, + height: 40, + }, data() { return { itemToDelete: {}, @@ -104,74 +109,81 @@ export default { </gl-empty-state> <template v-else> - <gl-loading-icon v-if="isLoading" size="md" class="prepend-top-16" /> - - <template v-else> - <div v-if="images.length" ref="imagesList"> - <h4>{{ s__('ContainerRegistry|Container Registry') }}</h4> - <p> - <gl-sprintf - :message=" - s__(`ContainerRegistry|With the Docker Container Registry integrated into GitLab, every + <div> + <h4>{{ s__('ContainerRegistry|Container Registry') }}</h4> + <p> + <gl-sprintf + :message=" + s__(`ContainerRegistry|With the Docker Container Registry integrated into GitLab, every project can have its own space to store its Docker images. %{docLinkStart}More Information%{docLinkEnd}`) - " - > - <template #docLink="{content}"> - <gl-link :href="config.helpPagePath" target="_blank"> - {{ content }} - </gl-link> - </template> - </gl-sprintf> - </p> + " + > + <template #docLink="{content}"> + <gl-link :href="config.helpPagePath" target="_blank"> + {{ content }} + </gl-link> + </template> + </gl-sprintf> + </p> + </div> - <div class="d-flex flex-column"> + <div v-if="isLoading" class="mt-2"> + <gl-skeleton-loader + v-for="index in $options.loader.repeat" + :key="index" + :width="$options.loader.width" + :height="$options.loader.height" + preserve-aspect-ratio="xMinYMax meet" + > + <rect width="500" x="10" y="10" height="20" rx="4" /> + <circle cx="525" cy="20" r="10" /> + <rect x="960" y="0" width="40" height="40" rx="4" /> + </gl-skeleton-loader> + </div> + <template v-else> + <div v-if="images.length" ref="imagesList" class="d-flex flex-column"> + <div + v-for="(listItem, index) in images" + :key="index" + ref="rowItem" + :class="{ 'border-top': index === 0 }" + class="d-flex justify-content-between align-items-center py-2 border-bottom" + > + <div> + <router-link + ref="detailsLink" + :to="{ name: 'details', params: { id: encodeListItem(listItem) } }" + > + {{ listItem.path }} + </router-link> + <clipboard-button + v-if="listItem.location" + ref="clipboardButton" + :text="listItem.location" + :title="listItem.location" + css-class="btn-default btn-transparent btn-clipboard" + /> + </div> <div - v-for="(listItem, index) in images" - :key="index" - ref="rowItem" - :class="[ - 'd-flex justify-content-between align-items-center py-2 border-bottom', - { 'border-top': index === 0 }, - ]" + v-gl-tooltip="{ disabled: listItem.destroy_path }" + class="d-none d-sm-block" + :title=" + s__('ContainerRegistry|Missing or insufficient permission, delete button disabled') + " > - <div> - <router-link - ref="detailsLink" - :to="{ name: 'details', params: { id: encodeListItem(listItem) } }" - > - {{ listItem.path }} - </router-link> - <clipboard-button - v-if="listItem.location" - ref="clipboardButton" - :text="listItem.location" - :title="listItem.location" - css-class="btn-default btn-transparent btn-clipboard" - /> - </div> - <div - v-gl-tooltip="{ disabled: listItem.destroy_path }" - class="d-none d-sm-block" - :title=" - s__( - 'ContainerRegistry|Missing or insufficient permission, delete button disabled', - ) - " + <gl-button + ref="deleteImageButton" + v-gl-tooltip + :disabled="!listItem.destroy_path" + :title="s__('ContainerRegistry|Remove repository')" + :aria-label="s__('ContainerRegistry|Remove repository')" + class="btn-inverted" + variant="danger" + @click="deleteImage(listItem)" > - <gl-button - ref="deleteImageButton" - v-gl-tooltip - :disabled="!listItem.destroy_path" - :title="s__('ContainerRegistry|Remove repository')" - :aria-label="s__('ContainerRegistry|Remove repository')" - class="btn-inverted" - variant="danger" - @click="deleteImage(listItem)" - > - <gl-icon name="remove" /> - </gl-button> - </div> + <gl-icon name="remove" /> + </gl-button> </div> </div> <gl-pagination @@ -182,6 +194,7 @@ export default { class="w-100 mt-2" /> </div> + <template v-else> <project-empty-state v-if="!config.isGroupPage" /> <group-empty-state v-else /> |