From 06bb8502c64258ee48577e63b5c42995a2481e08 Mon Sep 17 00:00:00 2001
From: Adam DeHaven <adam.dehaven@konghq.com>
Date: Mon, 11 Sep 2023 09:06:44 -0400
Subject: [PATCH 1/2] feat(idp): allow disabling full screen loader

---
 README.md                                         | 1 +
 renovate.json                                     | 2 +-
 src/components/LoginForm.vue                      | 3 ++-
 src/elements/kong-auth-login/KongAuthLogin.ce.vue | 8 ++++++++
 4 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 3e8fd5568..934106086 100644
--- a/README.md
+++ b/README.md
@@ -462,6 +462,7 @@ The login element **must** reside at the `{window.location.origin}/login` path i
 | `idpLoginEnabled` | Boolean | `false` | Enable IdP login detection. |
 | `idpLoginCallbackUrl` | URL | `''` | Set the URL to return to in order to complete the OIDC flow. In most cases, this should be set to `${window.location.origin}/login` |
 | `idpLoginReturnTo` | URL | `''` | Set the URL to return to upon successful IdP login. In most cases, this should be set to `window.location.origin` |
+| `idpFullScreenLoader` | Boolean | `true` | Show the full screen loading skeleton when IdP login is processing |
 
 > **Note**: When utilizing the props as a native web component, you may need to use dot syntax, as shown here
 >
diff --git a/renovate.json b/renovate.json
index 645d0f6ec..52dd180eb 100644
--- a/renovate.json
+++ b/renovate.json
@@ -1,5 +1,5 @@
 {
   "extends": [
-    "github>Kong/public-shared-renovate:kong-frontend-config.json"
+    "github>Kong/public-shared-renovate:kong-frontend-config"
   ]
 }
diff --git a/src/components/LoginForm.vue b/src/components/LoginForm.vue
index 2b5e468e7..3d0e54fee 100644
--- a/src/components/LoginForm.vue
+++ b/src/components/LoginForm.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="kong-auth-login-form">
     <KSkeleton
-      v-if="currentState.matches('from_url') || currentState.matches('verify_email')"
+      v-if="(idpFullScreenLoader && currentState.matches('from_url')) || currentState.matches('verify_email')"
       class="idp-loading"
       data-testid="kong-auth-login-gruce-loader"
       :delay-milliseconds="0"
@@ -181,6 +181,7 @@ const showBasicAuthLoginLink: Ref<boolean> = inject('show-basic-auth-login-link'
 const idpLoginEnabled: Ref<boolean> = inject('idp-login-enabled', ref(false))
 const idpLoginCallbackUrl: Ref<string> = inject('idp-login-callback-url', ref(''))
 const idpLoginReturnTo: Ref<string> = inject('idp-login-return-to', ref(''))
+const idpFullScreenLoader: Ref<boolean> = inject('idp-full-screen-loader', ref(true))
 
 const formData = reactive({
   email: '',
diff --git a/src/elements/kong-auth-login/KongAuthLogin.ce.vue b/src/elements/kong-auth-login/KongAuthLogin.ce.vue
index e600e356f..732600f52 100644
--- a/src/elements/kong-auth-login/KongAuthLogin.ce.vue
+++ b/src/elements/kong-auth-login/KongAuthLogin.ce.vue
@@ -74,6 +74,10 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  idpFullScreenLoader: {
+    type: Boolean,
+    default: true,
+  },
 })
 
 // Import emits from child component with validation, where necessary
@@ -122,6 +126,10 @@ provide(
   'idp-login-return-to',
   computed((): string => (props.idpLoginReturnTo ? props.idpLoginReturnTo : '')),
 )
+provide(
+  'idp-full-screen-loader',
+  computed((): boolean => props.idpFullScreenLoader),
+)
 
 // Message props: These provided values default to useI18n() message text so
 // they must be provided in this format so the default value can be set in the child component.

From 5487729cd8afb584946e9784cd4150063ce7930e Mon Sep 17 00:00:00 2001
From: Adam DeHaven <adam.dehaven@konghq.com>
Date: Mon, 11 Sep 2023 09:11:14 -0400
Subject: [PATCH 2/2] test: add component test for prop

---
 .../kong-auth-login/KongAuthLogin.spec.ts     | 28 ++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/elements/kong-auth-login/KongAuthLogin.spec.ts b/src/elements/kong-auth-login/KongAuthLogin.spec.ts
index bf34cf04b..b8178a8ec 100644
--- a/src/elements/kong-auth-login/KongAuthLogin.spec.ts
+++ b/src/elements/kong-auth-login/KongAuthLogin.spec.ts
@@ -505,7 +505,7 @@ describe('KongAuthLogin.ce.vue', () => {
       const redirectPath = `/authenticate/${loginPath}?returnTo=${encodeURIComponent(win.getLocationOrigin() + '/')}&callback_url=${encodeURIComponent(callbackUrl)}`
       // Stub URL path
       cy.stub(win, 'getLocationPathname').returns(`/login/${loginPath}`)
-      // cy.stub(win, 'setLocationHref').as('set-location')
+
       cy.stub(win, 'setLocationHref', args => {
         console.log('args', args)
       }).as('set-location')
@@ -522,6 +522,32 @@ describe('KongAuthLogin.ce.vue', () => {
       cy.getTestId(testids.loaderContainer).should('exist').getTestId(testids.gruceLoader).should('be.visible')
     })
 
+    it('should not show full screen loader during IdP login flow if `idpFullScreenLoader` prop is false', () => {
+      cy.stub(getConfigOptions, 'userEntity').returns('user')
+      const loginPath = 'test-login-path'
+      const callbackUrl = 'https://cloud.konghq.tech/login'
+      const redirectPath = `/authenticate/${loginPath}?returnTo=${encodeURIComponent(win.getLocationOrigin() + '/')}&callback_url=${encodeURIComponent(callbackUrl)}`
+      // Stub URL path
+      cy.stub(win, 'getLocationPathname').returns(`/login/${loginPath}`)
+
+      cy.stub(win, 'setLocationHref', args => {
+        console.log('args', args)
+      }).as('set-location')
+
+      mount(KongAuthLogin, {
+        props: {
+          idpLoginEnabled: true,
+          idpLoginReturnTo: win.getLocationOrigin(),
+          idpLoginCallbackUrl: callbackUrl,
+          idpFullScreenLoader: false,
+        },
+      })
+
+      cy.get('@set-location').should('have.been.calledOnce').and('have.been.calledWithMatch', redirectPath)
+      cy.getTestId(testids.loaderContainer).should('not.exist')
+      cy.getTestId(testids.gruceLoader).should('not.exist')
+    })
+
     it("should initiate developer IdP login if props are set and URL is '/login/sso'", () => {
       const portalId = '12345-67890'
       cy.stub(getConfigOptions, 'userEntity').returns('developer')