Commit d3d24bb4 authored by Mike Greiling's avatar Mike Greiling

Merge branch '49863-ingress-ip-loading-state' into 'master'

Show loading spinner while Ingress/Knative IP is being assigned

Closes #56945 and #49863

See merge request gitlab-org/gitlab-ce!25912
parents f2379a4a a6359890
<script>
import _ from 'underscore';
import helmInstallIllustration from '@gitlab/svgs/dist/illustrations/kubernetes-installation.svg';
import { GlLoadingIcon } from '@gitlab/ui';
import elasticsearchLogo from 'images/cluster_app_logos/elasticsearch.png';
import gitlabLogo from 'images/cluster_app_logos/gitlab.png';
import helmLogo from 'images/cluster_app_logos/helm.png';
......@@ -23,6 +24,7 @@ export default {
applicationRow,
clipboardButton,
LoadingButton,
GlLoadingIcon,
},
props: {
type: {
......@@ -296,7 +298,12 @@ export default {
/>
</span>
</div>
<input v-else type="text" class="form-control js-endpoint" readonly value="?" />
<div v-else class="input-group">
<input type="text" class="form-control js-endpoint" readonly />
<gl-loading-icon
class="position-absolute align-self-center ml-2 js-ingress-ip-loading-icon"
/>
</div>
<p class="form-text text-muted">
{{
s__(`ClusterIntegration|Point a wildcard DNS to this
......@@ -545,14 +552,13 @@ export default {
/>
</span>
</div>
<input
v-else
type="text"
class="form-control js-knative-endpoint"
readonly
value="?"
<div v-else class="input-group">
<input type="text" class="form-control js-endpoint" readonly />
<gl-loading-icon
class="position-absolute align-self-center ml-2 js-knative-ip-loading-icon"
/>
</div>
</div>
<p class="form-text text-muted col-12">
{{
......
---
title: Show loading spinner while Ingress/Knative IP is being assigned
merge_request: 25912
author:
type: changed
......@@ -227,7 +227,7 @@ describe 'Clusters Applications', :js do
expect(page).to have_css('.js-cluster-application-install-button', exact_text: 'Installed')
expect(page).to have_css('.js-cluster-application-install-button[disabled]')
expect(page).to have_selector('.js-no-endpoint-message')
expect(page.find('.js-endpoint').value).to eq('?')
expect(page).to have_selector('.js-ingress-ip-loading-icon')
# We receive the external IP address and display
Clusters::Cluster.last.application_ingress.update!(external_ip: '192.168.1.100')
......
......@@ -141,7 +141,7 @@ describe('Applications', () => {
});
describe('without ip address', () => {
it('renders an input text with a question mark and an alert text', () => {
it('renders an input text with a loading icon and an alert text', () => {
vm = mountComponent(Applications, {
applications: {
...APPLICATIONS_MOCK_STATE,
......@@ -152,8 +152,7 @@ describe('Applications', () => {
},
});
expect(vm.$el.querySelector('.js-endpoint').value).toEqual('?');
expect(vm.$el.querySelector('.js-ingress-ip-loading-icon')).not.toBe(null);
expect(vm.$el.querySelector('.js-no-endpoint-message')).not.toBe(null);
});
});
......@@ -330,7 +329,7 @@ describe('Applications', () => {
});
describe('without ip address', () => {
it('renders an input text with a question mark and an alert text', () => {
it('renders an input text with a loading icon and an alert text', () => {
vm = mountComponent(Applications, {
applications: {
...APPLICATIONS_MOCK_STATE,
......@@ -342,8 +341,7 @@ describe('Applications', () => {
},
});
expect(vm.$el.querySelector('.js-knative-endpoint').value).toEqual('?');
expect(vm.$el.querySelector('.js-knative-ip-loading-icon')).not.toBe(null);
expect(vm.$el.querySelector('.js-no-knative-endpoint-message')).not.toBe(null);
});
});
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment