chore: Add SAML setup to new checkout flow

packages/client/components/Dashboard/DashSidebar.tsx

@@ -5,7 +5,13 @@ import {useFragment} from 'react-relay'
 import {useLocation, useRouteMatch} from 'react-router'
 import {PALETTE} from '../../styles/paletteV3'
 import {NavSidebar} from '../../types/constEnums'
-import {BILLING_PAGE, MEMBERS_PAGE, ORG_SETTINGS_PAGE, TEAMS_PAGE} from '../../utils/constants'
+import {
+  AUTHENTICATION_PAGE,
+  BILLING_PAGE,
+  MEMBERS_PAGE,
+  ORG_SETTINGS_PAGE,
+  TEAMS_PAGE
+} from '../../utils/constants'
 import {DashSidebar_viewer$key} from '../../__generated__/DashSidebar_viewer.graphql'
 import DashNavList from '../DashNavList/DashNavList'
 import SideBarStartMeetingButton from '../SideBarStartMeetingButton'
@@ -132,6 +138,11 @@ const DashSidebar = (props: Props) => {
                 href={`/me/organizations/${orgId}/${ORG_SETTINGS_PAGE}`}
                 label={'Organization Settings'}
               />
+              <NavItem
+                icon={'key'}
+                href={`/me/organizations/${orgId}/${AUTHENTICATION_PAGE}`}
+                label={'Authentication'}
+              />
             </NavItemsWrap>
           </Contents>
         </Nav>

packages/client/components/Dashboard/LeftDashNavItem.tsx

@@ -8,6 +8,7 @@ import {
   Forum,
   Group,
   Groups,
+  Key,
   PlaylistAddCheck,
   Timeline,
   Warning,
@@ -69,7 +70,8 @@ const iconLookup = {
   groups: <Groups />,
   warning: <Warning />,
   work: <WorkOutline />,
-  timeline: <Timeline />
+  timeline: <Timeline />,
+  key: <Key />
 }
 
 interface Props {

packages/client/components/Dashboard/MobileDashSidebar.tsx

@@ -5,7 +5,13 @@ import {useFragment} from 'react-relay'
 import {useRouteMatch} from 'react-router'
 import {PALETTE} from '../../styles/paletteV3'
 import {NavSidebar} from '../../types/constEnums'
-import {BILLING_PAGE, MEMBERS_PAGE, ORG_SETTINGS_PAGE, TEAMS_PAGE} from '../../utils/constants'
+import {
+  AUTHENTICATION_PAGE,
+  BILLING_PAGE,
+  MEMBERS_PAGE,
+  ORG_SETTINGS_PAGE,
+  TEAMS_PAGE
+} from '../../utils/constants'
 import {DashSidebar_viewer$key} from '../../__generated__/DashSidebar_viewer.graphql'
 import DashNavList from '../DashNavList/DashNavList'
 import StandardHub from '../StandardHub/StandardHub'
@@ -149,6 +155,12 @@ const MobileDashSidebar = (props: Props) => {
                 href={`/me/organizations/${orgId}/${ORG_SETTINGS_PAGE}`}
                 label={'Organization Settings'}
               />
+              <LeftDashNavItem
+                onClick={handleMenuClick}
+                icon={'key'}
+                href={`/me/organizations/${orgId}/${AUTHENTICATION_PAGE}`}
+                label={'Authentication'}
+              />
             </NavItemsWrap>
           </Nav>
         </NavBlock>

packages/client/modules/userDashboard/components/OrgAuthentication/OrgAuthentication.tsx

@@ -1,4 +1,6 @@
 import graphql from 'babel-plugin-relay/macro'
+import styled from '@emotion/styled'
+import {ElementWidth} from '../../../../types/constEnums'
 import React from 'react'
 import {PreloadedQuery, usePreloadedQuery} from 'react-relay'
 import {OrgAuthenticationQuery} from '../../../../__generated__/OrgAuthenticationQuery.graphql'
@@ -8,6 +10,10 @@ import OrgAuthenticationMetadata from './OrgAuthenticationMetadata'
 import OrgAuthenticationSSOFrame from './OrgAuthenticationSSOFrame'
 import OrgAuthenticationSignOnUrl from './OrgAuthenticationSignOnUrl'
 
+const StyledPanel = styled(Panel)<{isWide: boolean}>(({isWide}) => ({
+  maxWidth: isWide ? ElementWidth.PANEL_WIDTH : 'inherit'
+}))
+
 interface Props {
   queryRef: PreloadedQuery<OrgAuthenticationQuery>
 }
@@ -17,6 +23,9 @@ const OrgAuthentication = (props: Props) => {
     graphql`
       query OrgAuthenticationQuery($orgId: ID!) {
         viewer {
+          featureFlags {
+            checkoutFlow
+          }
           organization(orgId: $orgId) {
             saml {
               ...OrgAuthenticationSSOFrame_saml
@@ -31,18 +40,19 @@ const OrgAuthentication = (props: Props) => {
     queryRef
   )
   const {viewer} = data
-  const {organization} = viewer
+  const {organization, featureFlags} = viewer
+  const {checkoutFlow} = featureFlags
   const saml = organization?.saml ?? null
   const disabled = !saml
   return (
-    <Panel>
+    <StyledPanel isWide={checkoutFlow}>
       <DialogTitle className='px-6 pt-5 pb-6'>SAML Single Sign-On</DialogTitle>
       <OrgAuthenticationSSOFrame samlRef={saml} />
       <div className={disabled ? 'pointer-events-none select-none opacity-40' : ''}>
         <OrgAuthenticationSignOnUrl samlRef={saml} />
         <OrgAuthenticationMetadata samlRef={saml} />
       </div>
-    </Panel>
+    </StyledPanel>
   )
 }
 

packages/client/modules/userDashboard/components/OrgBilling/OrgPage.tsx

@@ -3,6 +3,7 @@ import React, {lazy} from 'react'
 import {useFragment} from 'react-relay'
 import {Redirect, Route, Switch, useRouteMatch} from 'react-router'
 import {
+  AUTHENTICATION_PAGE,
   BILLING_PAGE,
   MEMBERS_PAGE,
   ORG_SETTINGS_PAGE,
@@ -21,6 +22,12 @@ const OrgMembers = lazy(
 )
 
 const OrgDetails = lazy(() => import(/* webpackChunkName: 'OrgDetails' */ './OrgDetails'))
+const Authentication = lazy(
+  () =>
+    import(
+      /* webpackChunkName: 'Authentication' */ '../../containers/OrgAuthentication/OrgAuthenticationRoot'
+    )
+)
 
 type Props = {
   organizationRef: OrgPage_organization$key
@@ -75,6 +82,11 @@ const OrgPage = (props: Props) => {
           path={`${match.url}/${ORG_SETTINGS_PAGE}`}
           render={(p) => <OrgDetails {...p} organizationRef={organization} />}
         />
+        <Route
+          exact
+          path={`${match.url}/${AUTHENTICATION_PAGE}`}
+          render={(p) => <Authentication {...p} orgId={orgId} />}
+        />
       </Switch>
     </section>
   )