1414 * limitations under the License.
1515 */
1616
17+ import { configureStore } from '@reduxjs/toolkit' ;
1718import { Meta , StoryFn } from '@storybook/react' ;
19+ import { delay , http , HttpResponse } from 'msw' ;
20+ import { useEffect } from 'react' ;
21+ import { useLocation } from 'react-router-dom' ;
22+ import appStore from '../../redux/stores/store' ;
1823import { TestContext } from '../../test' ;
19- import { PureAuthChooser , PureAuthChooserProps } from './index' ;
24+ import AuthChooser , { PureAuthChooser , PureAuthChooserProps } from './index' ;
2025
2126export default {
2227 title : 'AuthChooser' ,
@@ -50,13 +55,22 @@ const argFixture = {
5055 clusterAuthType : '' ,
5156} ;
5257
53- export const BasicAuthChooser = Template . bind ( { } ) ;
54- BasicAuthChooser . args = {
58+ export const AuthMethodSelection = Template . bind ( { } ) ;
59+ AuthMethodSelection . args = {
5560 ...argFixture ,
61+ clusterAuthType : 'oidc' ,
62+ title : 'Select an authentication method' ,
63+ } ;
64+
65+ export const TokenOnlyAuthMethod = Template . bind ( { } ) ;
66+ TokenOnlyAuthMethod . args = {
67+ ...argFixture ,
68+ clusterAuthType : '' ,
69+ title : 'Sign in with token' ,
5670} ;
5771
58- export const Testing = Template . bind ( { } ) ;
59- Testing . args = {
72+ export const LoadingStateDuringAuthFlow = Template . bind ( { } ) ;
73+ LoadingStateDuringAuthFlow . args = {
6074 ...argFixture ,
6175 testingAuth : true ,
6276} ;
@@ -67,15 +81,130 @@ HaveClusters.args = {
6781 title : 'Select a cluster to sign in' ,
6882} ;
6983
70- export const AuthTypeoidc = Template . bind ( { } ) ;
71- AuthTypeoidc . args = {
84+ export const AuthenticationFailureError = Template . bind ( { } ) ;
85+ AuthenticationFailureError . args = {
7286 ...argFixture ,
73- clusterAuthType : 'oidc' ,
74- title : 'Sign in with OpenID Connect' ,
87+ error : Error ( 'Oh no! Some error happened?!?' ) ,
7588} ;
7689
77- export const AnError = Template . bind ( { } ) ;
78- AnError . args = {
90+ export const AuthenticationFailureBadGateway = Template . bind ( { } ) ;
91+ AuthenticationFailureBadGateway . args = {
7992 ...argFixture ,
80- error : Error ( 'Oh no! Some error happened?!?' ) ,
93+ error : Error ( 'Bad Gateway' ) ,
94+ } ;
95+
96+ interface AuthChooserContainerStoryArgs {
97+ clusterName : string ;
98+ clusterAuthType : string ;
99+ useToken ?: boolean ;
100+ page : string ;
101+ }
102+
103+ function makeAuthChooserStore ( {
104+ clusterName,
105+ clusterAuthType,
106+ useToken,
107+ } : Omit < AuthChooserContainerStoryArgs , 'page' > ) {
108+ const baseState = appStore . getState ( ) ;
109+ const cluster = {
110+ ...( baseState . config ?. clusters ?. [ clusterName ] || { } ) ,
111+ name : clusterName ,
112+ auth_type : clusterAuthType ,
113+ useToken,
114+ } ;
115+ const preloadedState = {
116+ ...baseState ,
117+ config : {
118+ ...baseState . config ,
119+ clusters : {
120+ [ clusterName ] : cluster ,
121+ } ,
122+ allClusters : {
123+ [ clusterName ] : cluster ,
124+ } ,
125+ } ,
126+ } ;
127+
128+ return configureStore ( {
129+ reducer : ( state = preloadedState ) => state ,
130+ preloadedState,
131+ middleware : getDefaultMiddleware =>
132+ getDefaultMiddleware ( {
133+ serializableCheck : false ,
134+ } ) ,
135+ } ) ;
136+ }
137+
138+ function CurrentPath ( ) {
139+ const location = useLocation ( ) ;
140+
141+ return < div > Current route: { location . pathname } </ div > ;
142+ }
143+
144+ function SyncBrowserPath ( { path } : { path : string } ) {
145+ useEffect ( ( ) => {
146+ const previousPath = `${ window . location . pathname } ${ window . location . search } ${ window . location . hash } ;
147+ window . history . replaceState ( { } , '' , path ) ;
148+
149+ return ( ) => {
150+ window . history . replaceState ( { } , '' , previousPath ) ;
151+ } ;
152+ } , [ path ] ) ;
153+
154+ return null ;
155+ }
156+
157+ const AuthChooserContainerTemplate : StoryFn < AuthChooserContainerStoryArgs > = args => {
158+ const { clusterName, clusterAuthType, useToken, page } = args ;
159+ const path = `/c/${ clusterName } ${ page } ;
160+
161+ return (
162+ < TestContext
163+ store = { makeAuthChooserStore ( { clusterName, clusterAuthType, useToken } ) }
164+ urlPrefix = "/c"
165+ routerMap = { { cluster : clusterName , ':page?' : page } }
166+ >
167+ < SyncBrowserPath path = { path } />
168+ < AuthChooser />
169+ < CurrentPath />
170+ </ TestContext >
171+ ) ;
172+ } ;
173+
174+ export const ContainerAuthenticationFailureError = AuthChooserContainerTemplate . bind ( { } ) ;
175+ ContainerAuthenticationFailureError . args = {
176+ clusterName : 'some-cluster' ,
177+ clusterAuthType : '' ,
178+ page : 'login' ,
179+ } ;
180+ ContainerAuthenticationFailureError . parameters = {
181+ msw : {
182+ handlers : [
183+ http . post (
184+ 'http://localhost:4466/clusters/:cluster/apis/authorization.k8s.io/v1/selfsubjectrulesreviews' ,
185+ ( ) =>
186+ HttpResponse . json ( { message : 'Bad Gateway' } , { status : 502 , statusText : 'Bad Gateway' } )
187+ ) ,
188+ ] ,
189+ } ,
190+ } ;
191+
192+ export const ContainerRedirectAfterSuccess = AuthChooserContainerTemplate . bind ( { } ) ;
193+ ContainerRedirectAfterSuccess . args = {
194+ clusterName : 'some-cluster' ,
195+ clusterAuthType : '' ,
196+ page : 'login' ,
197+ } ;
198+ ContainerRedirectAfterSuccess . parameters = {
199+ msw : {
200+ handlers : [
201+ http . post (
202+ 'http://localhost:4466/clusters/:cluster/apis/authorization.k8s.io/v1/selfsubjectrulesreviews' ,
203+ async ( ) => {
204+ await delay ( 200 ) ;
205+ return HttpResponse . json ( { } ) ;
206+ }
207+ ) ,
208+ ] ,
209+ } ,
81210} ;
0 commit comments