[SAML Configuration] Domain settings page

cspell.json

@@ -771,7 +771,8 @@
         "mple",
         "Selec",
         "setuptools",
-        "DYNAMICEXTERNAL"
+        "DYNAMICEXTERNAL",
+        "Wooo"
     ],
     "ignorePaths": [
         "src/languages/de.ts",

src/CONST/index.ts

@@ -1027,6 +1027,8 @@ const CONST = {
     PLAN_TYPES_AND_PRICING_HELP_URL: 'https://help.expensify.com/articles/new-expensify/billing-and-subscriptions/Plan-types-and-pricing',
     MERGE_ACCOUNT_HELP_URL: 'https://help.expensify.com/articles/new-expensify/settings/Merge-Accounts',
     CONNECT_A_BUSINESS_BANK_ACCOUNT_HELP_URL: 'https://help.expensify.com/articles/new-expensify/expenses-&-payments/Connect-a-Business-Bank-Account',
+    DOMAIN_VERIFICATION_HELP_URL: 'https://help.expensify.com/articles/expensify-classic/domains/Claim-And-Verify-A-Domain',
+    SAML_HELP_URL: 'https://help.expensify.com/articles/expensify-classic/domains/Managing-Single-Sign-On-(SSO)-in-Expensify',
     REGISTER_FOR_WEBINAR_URL: 'https://events.zoom.us/eo/Aif1I8qCi1GZ7KnLnd1vwGPmeukSRoPjFpyFAZ2udQWn0-B86e1Z~AggLXsr32QYFjq8BlYLZ5I06Dg',
     TEST_RECEIPT_URL: `${CLOUDFRONT_URL}/images/fake-receipt__tacotodds.png`,
     // Use Environment.getEnvironmentURL to get the complete URL with port number

src/NAVIGATORS.ts

@@ -14,6 +14,7 @@ export default {
     REPORTS_SPLIT_NAVIGATOR: 'ReportsSplitNavigator',
     SETTINGS_SPLIT_NAVIGATOR: 'SettingsSplitNavigator',
     WORKSPACE_SPLIT_NAVIGATOR: 'WorkspaceSplitNavigator',
+    DOMAIN_SPLIT_NAVIGATOR: 'DomainSplitNavigator',
     SEARCH_FULLSCREEN_NAVIGATOR: 'SearchFullscreenNavigator',
     SHARE_MODAL_NAVIGATOR: 'ShareModalNavigator',
     PUBLIC_RIGHT_MODAL_NAVIGATOR: 'PublicRightModalNavigator',

src/ROUTES.ts

@@ -3302,6 +3302,30 @@ const ROUTES = {
         // eslint-disable-next-line no-restricted-syntax -- Legacy route generation
         getRoute: (backTo?: string) => getUrlWithBackToParam('test-tools' as const, backTo),
     },
+    WORKSPACES_VERIFY_DOMAIN: {
+        route: 'workspaces/verify-domain/:accountID',
+        getRoute: (accountID: number) => `workspaces/verify-domain/${accountID}` as const,
+    },
+    WORKSPACES_DOMAIN_VERIFIED: {
+        route: 'workspaces/domain-verified/:accountID',
+        getRoute: (accountID: number) => `workspaces/domain-verified/${accountID}` as const,
+    },
+    DOMAIN_INITIAL: {
+        route: 'domain/:accountID',
+        getRoute: (accountID: number) => `domain/${accountID}` as const,
+    },
+    DOMAIN_SAML: {
+        route: 'domain/:accountID/saml',
+        getRoute: (accountID: number) => `domain/${accountID}/saml` as const,
+    },
+    DOMAIN_VERIFY: {
+        route: 'domain/:accountID/verify',
+        getRoute: (accountID: number) => `domain/${accountID}/verify` as const,
+    },
+    DOMAIN_VERIFIED: {
+        route: 'domain/:accountID/verified',
+        getRoute: (accountID: number) => `domain/${accountID}/verified` as const,
+    },
 } as const;
 
 /**

src/SCREENS.ts

@@ -254,6 +254,7 @@ const SCREENS = {
         SCHEDULE_CALL: 'ScheduleCall',
         REPORT_CHANGE_APPROVER: 'Report_Change_Approver',
         MERGE_TRANSACTION: 'MergeTransaction',
+        DOMAIN: 'Domain',
     },
     PUBLIC_CONSOLE_DEBUG: 'Console_Debug',
     SIGN_IN_WITH_APPLE_DESKTOP: 'AppleSignInDesktop',
@@ -813,6 +814,14 @@ const SCREENS = {
     TEST_TOOLS_MODAL: {
         ROOT: 'TestToolsModal_Root',
     },
+    WORKSPACES_VERIFY_DOMAIN: 'Workspaces_Verify_Domain',
+    WORKSPACES_DOMAIN_VERIFIED: 'Workspaces_Domain_Verified',
+    DOMAIN: {
+        VERIFY: 'Domain_Verify',
+        VERIFIED: 'Domain_Verified',
+        INITIAL: 'Domain_Initial',
+        SAML: 'Domain_SAML',
+    },
 } as const;
 
 type Screen = DeepValueOf<typeof SCREENS>;

src/components/Domain/CopyableTextField.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import {View} from 'react-native';
+import ActivityIndicator from '@components/ActivityIndicator';
+import CopyTextToClipboard from '@components/CopyTextToClipboard';
+import Text from '@components/Text';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+
+type CopyableTextFieldProps = {
+    /** Text to display and to copy */
+    value?: string;
+
+    /** Should an activity indicator be shown instead of the text and button */
+    isLoading?: boolean;
+};
+
+const ACTIVITY_INDICATOR_SIZE = 24;
+
+function CopyableTextField({value, isLoading = false}: CopyableTextFieldProps) {
+    const styles = useThemeStyles();
+    const theme = useTheme();
+    return (
+        <View style={[styles.qbdSetupLinkBox, styles.border, styles.flexRow, styles.gap2, styles.justifyContentCenter, styles.alignItemsCenter]}>
+            {isLoading ? (
+                <ActivityIndicator
+                    color={theme.text}
+                    size={ACTIVITY_INDICATOR_SIZE}
+                />
+            ) : (
+                <>
+                    <Text style={styles.copyableTextField}>{value ?? ''}</Text>
+                    <View style={[styles.reportActionContextMenuMiniButton, styles.overflowHidden, styles.buttonHoveredBG]}>
+                        <CopyTextToClipboard urlToCopy={value ?? ''} />
+                    </View>
+                </>
+            )}
+        </View>
+    );
+}
+
+export default CopyableTextField;

src/components/Domain/DomainMenuItem.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import * as Expensicons from '@components/Icon/Expensicons';
+import type {OfflineWithFeedbackProps} from '@components/OfflineWithFeedback';
+import OfflineWithFeedback from '@components/OfflineWithFeedback';
+import type {PopoverMenuItem} from '@components/PopoverMenu';
+import {PressableWithoutFeedback} from '@components/Pressable';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import Navigation from '@libs/Navigation/Navigation';
+import CONST from '@src/CONST';
+import ROUTES from '@src/ROUTES';
+import DomainsListRow from './DomainsListRow';
+
+type DomainMenuItemProps = {item: DomainItem; index: number};
+
+type DomainItem = {
+    listItemType: 'domain';
+
+    /** main text to show in the row  */
+    title: string;
+
+    /** function to run when clicking on the row  */
+    action: () => void;
+
+    /** id of the row's domain */
+    accountID: number;
+
+    /** whether the user is an admin of the row's domain */
+    isAdmin: boolean;
+
+    /** whether the row's domain is validated (aka verified) */
+    isValidated: boolean;
+} & Pick<OfflineWithFeedbackProps, 'pendingAction'>;
+
+function DomainMenuItem({item, index}: DomainMenuItemProps) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+
+    const {isAdmin, isValidated} = item;
+
+    const threeDotsMenuItems: PopoverMenuItem[] | undefined =
+        !isValidated && isAdmin
+            ? [
+                  {
+                      icon: Expensicons.Globe,
+                      text: translate('domain.verifyDomain.title'),
+                      onSelected: () => Navigation.navigate(ROUTES.WORKSPACES_VERIFY_DOMAIN.getRoute(item.accountID)),
+                  },
+              ]
+            : undefined;
+
+    return (
+        <OfflineWithFeedback
+            key={`domain_${item.title}_${index}`}
+            pendingAction={item.pendingAction}
+            style={styles.mb2}
+        >
+            <PressableWithoutFeedback
+                role={CONST.ROLE.BUTTON}
+                accessibilityLabel="row"
+                style={styles.mh5}
+                onPress={item.action}
+                disabled={!isAdmin}
+            >
+                {({hovered}) => (
+                    <DomainsListRow
+                        title={item.title}
+                        badgeText={isAdmin && !isValidated ? translate('domain.notVerified') : undefined}
+                        isHovered={hovered}
+                        menuItems={threeDotsMenuItems}
+                    />
+                )}
+            </PressableWithoutFeedback>
+        </OfflineWithFeedback>
+    );
+}
+
+DomainMenuItem.displayName = 'DomainMenuItem';
+
+export type {DomainItem};
+export default DomainMenuItem;

src/components/Domain/DomainsListRow.tsx

@@ -1,10 +1,15 @@
 import React from 'react';
 import {View} from 'react-native';
+import type {ValueOf} from 'type-fest';
+import Badge from '@components/Badge';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
+import type {PopoverMenuItem} from '@components/PopoverMenu';
 import TextWithTooltip from '@components/TextWithTooltip';
+import ThreeDotsMenu from '@components/ThreeDotsMenu';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
 
 type DomainsListRowProps = {
     /** Name of the domain */
@@ -13,17 +18,23 @@ type DomainsListRowProps = {
     /** Whether the row is hovered, so we can modify its style */
     isHovered: boolean;
 
-    /** Whether the icon at the end of the row should be displayed */
-    shouldShowRightIcon: boolean;
+    /** The text to display inside a badge next to the title */
+    badgeText?: string;
+
+    /** Items for the three dots menu */
+    menuItems?: PopoverMenuItem[];
+
+    /** The type of brick road indicator to show. */
+    brickRoadIndicator?: ValueOf<typeof CONST.BRICK_ROAD_INDICATOR_STATUS>;
 };
 
-function DomainsListRow({title, isHovered, shouldShowRightIcon}: DomainsListRowProps) {
+function DomainsListRow({title, isHovered, badgeText, brickRoadIndicator, menuItems}: DomainsListRowProps) {
     const styles = useThemeStyles();
     const theme = useTheme();
 
     return (
-        <View style={[styles.flexRow, styles.highlightBG, styles.br3, styles.p5, styles.alignItemsCenter, styles.gap3, isHovered && styles.hoveredComponentBG]}>
-            <View style={[styles.flex1, styles.flexRow, styles.bgTransparent, styles.gap3, styles.alignItemsCenter]}>
+        <View style={[styles.flexRow, styles.highlightBG, styles.br3, styles.p5, styles.pr3, styles.alignItemsCenter, styles.gap3, isHovered && styles.hoveredComponentBG]}>
+            <View style={[styles.flex1, styles.flexRow, styles.bgTransparent, styles.gap3, styles.alignItemsCenter, styles.justifyContentStart]}>
                 <Icon
                     src={Expensicons.Globe}
                     fill={theme.icon}
@@ -32,19 +43,50 @@ function DomainsListRow({title, isHovered, shouldShowRightIcon}: DomainsListRowP
                 <TextWithTooltip
                     text={title}
                     shouldShowTooltip
-                    style={[styles.textStrong]}
+                    style={styles.textStrong}
                 />
+
+                {!!badgeText && (
+                    <View style={[styles.flexRow, styles.gap2, styles.alignItemsCenter, styles.justifyContentEnd]}>
+                        <Badge
+                            text={badgeText}
+                            textStyles={styles.textStrong}
+                            badgeStyles={[styles.alignSelfCenter, styles.badgeBordered]}
+                        />
+                    </View>
+                )}
             </View>
 
-            {shouldShowRightIcon && (
+            <View style={[styles.flexRow, styles.alignItemsCenter]}>
+                <View style={[styles.flexRow, styles.justifyContentEnd]}>
+                    <View style={[styles.flexRow, styles.ml2, styles.alignItemsCenter]}>
+                        <View style={[styles.flexRow, styles.alignItemsCenter, styles.workspaceListRBR, styles.pr3, styles.mt0]}>
+                            {!!brickRoadIndicator && (
+                                <Icon
+                                    src={Expensicons.DotIndicator}
+                                    fill={brickRoadIndicator === CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR ? theme.danger : theme.iconSuccessFill}
+                                />
+                            )}
+                        </View>
+                        {!!menuItems?.length && (
+                            <ThreeDotsMenu
+                                shouldSelfPosition
+                                menuItems={menuItems}
+                                anchorAlignment={{horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP}}
+                                shouldOverlay
+                                isNested
+                            />
+                        )}
+                    </View>
+                </View>
                 <View style={styles.touchableButtonImage}>
                     <Icon
                         src={Expensicons.NewWindow}
                         fill={isHovered ? theme.iconHovered : theme.icon}
                         isButtonIcon
                     />
                 </View>
-            )}
+            </View>
         </View>
     );
 }

src/components/FeatureList.tsx

@@ -24,6 +24,9 @@ type FeatureListProps = {
     /** The text to display in the subtitle of the section */
     subtitle?: string;
 
+    /** The component to display custom subtitle */
+    renderSubtitle?: () => ReactNode;
+
     /** Text of the call to action button */
     ctaText?: string;
 
@@ -76,6 +79,7 @@ function FeatureList({
     contentPaddingOnLargeScreens,
     footer,
     isButtonDisabled = false,
+    renderSubtitle,
 }: FeatureListProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
@@ -92,6 +96,7 @@ function FeatureList({
             titleStyles={titleStyles}
             illustrationContainerStyle={illustrationContainerStyle}
             contentPaddingOnLargeScreens={contentPaddingOnLargeScreens}
+            renderSubtitle={renderSubtitle}
         >
             <View style={styles.flex1}>
                 <View style={[styles.flex1, styles.flexRow, styles.flexWrap, styles.rowGap4, styles.pv4, styles.pl1]}>

src/components/Icon/Illustrations.ts

@@ -25,6 +25,7 @@ import CompanyCardsPendingState from '@assets/images/companyCards/pendingstate_l
 import Computer from '@assets/images/computer.svg';
 import EmptyCardState from '@assets/images/emptystate__expensifycard.svg';
 import ExpensifyCardImage from '@assets/images/expensify-card.svg';
+import LaptopOnDeskWithCoffeeAndKey from '@assets/images/laptop-on-desk-with-coffee-and-key.svg';
 import LaptopWithSecondScreenAndHourglass from '@assets/images/laptop-with-second-screen-and-hourglass.svg';
 import LaptopWithSecondScreenSync from '@assets/images/laptop-with-second-screen-sync.svg';
 import LaptopWithSecondScreenX from '@assets/images/laptop-with-second-screen-x.svg';
@@ -84,6 +85,7 @@ import Luggage from '@assets/images/simple-illustrations/simple-illustration__lu
 import Mailbox from '@assets/images/simple-illustrations/simple-illustration__mailbox.svg';
 import ExpensifyMobileApp from '@assets/images/simple-illustrations/simple-illustration__mobileapp.svg';
 import MoneyIntoWallet from '@assets/images/simple-illustrations/simple-illustration__moneyintowallet.svg';
+import OpenSafe from '@assets/images/simple-illustrations/simple-illustration__opensafe.svg';
 import PalmTree from '@assets/images/simple-illustrations/simple-illustration__palmtree.svg';
 import PaperAirplane from '@assets/images/simple-illustrations/simple-illustration__paperairplane.svg';
 import Pencil from '@assets/images/simple-illustrations/simple-illustration__pencil.svg';
@@ -224,4 +226,6 @@ export {
     PaperAirplane,
     CardReplacementSuccess,
     EmptyShelves,
+    OpenSafe,
+    LaptopOnDeskWithCoffeeAndKey,
 };