feat(idp): allow disabling full screen loader (#1318)

* feat(idp): allow disabling full screen loader

* test: add component test for prop

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
 >

renovate.json

@@ -1,5 +1,5 @@
 {
   "extends": [
-    "github>Kong/public-shared-renovate:kong-frontend-config.json"
+    "github>Kong/public-shared-renovate:kong-frontend-config"
   ]
 }

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: '',

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.

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')