render()

in source/idea/idea-cluster-manager/webapp/src/pages/cluster-admin/identity-management.tsx [263:426]


    render() {
        const isSingleSignOnEnabled = (): boolean => {
            return Utils.asBoolean(dot.pick("cognito.sso_enabled", this.state.identityProvider), false);
        };

        const handleCognitoToggleChange = async (newToggleStatus: boolean, settingToUpdate: string) => {
            const updateSettingsRequest: UpdateModuleSettingsRequestIdentityProvider = {
                module_id: "identity-provider",
                settings: {
                    cognito: {
                        [settingToUpdate]: newToggleStatus
                    }
                },
            };
            try {
                await AppContext.get().client().clusterSettings().updateModuleSettings(updateSettingsRequest);
                this.props.onFlashbarChange({
                    items: [
                        {
                            type: "success",
                            content: "Successfully updated Cognito identity provider setting.",
                            dismissible: true
                        }
                    ]
                })
                const identityProvider = {...this.state.identityProvider}
                const settingPath = "cognito." + settingToUpdate
                dot.set(settingPath , `${newToggleStatus}`, identityProvider)
                this.setState({identityProvider: identityProvider})
            } catch (error: any) {
                this.props.onFlashbarChange({
                    items: [
                        {
                            type: "error",
                            content: error.message,
                            dismissible: true
                        }
                    ]
                })
            }
        }

        const renderLastSyncInfo = () => {
            if (!this.state.latestADSyncStatus) {
                return null;
            }
            if (!this.state.latestADSyncStatus.update_time || !this.state.latestADSyncStatus.status) {
                return null;
            }
 
            const getStatusDisplay = (status: string) => {
                switch (status) {
                    case ADSyncStatus.RUNNING:
                        return "started";
                    case ADSyncStatus.STOPPED:
                        return "completed";
                    case ADSyncStatus.ERROR:
                        return "failed";
                    case ADSyncStatus.PENDING:
                        return "initialized";
                    case ADSyncStatus.TERMINATED:
                        return "terminated";
                    default:
                        return status;
                }
            };
 
 
            const timestamp = new Date(Number(this.state.latestADSyncStatus.update_time)).toLocaleString();
            const displayStatus = getStatusDisplay(this.state.latestADSyncStatus.status);
            return (
                <TextContent>
                    <small>
                        Latest AD synchronization {displayStatus} at {timestamp}
                    </small>
                </TextContent>
            );
        };

        const renderAdditionalConfig = () => {
            const additionalConfig = dot.pick("sssd.additional_sssd_configs", this.state.directoryservice);
            if (!additionalConfig) {
                return null;
            }
            return Object.entries(JSON.parse(additionalConfig))
                .map(([key, value]) => `${key}=${value}`)
                .join(',');
        }

        return (
            <IdeaAppLayout
                ideaPageId={this.props.ideaPageId}
                toolsOpen={this.props.toolsOpen}
                tools={this.props.tools}
                onPageChange={this.props.onPageChange}
                sideNavHeader={this.props.sideNavHeader}
                sideNavItems={this.props.sideNavItems}
                onSideNavChange={this.props.onSideNavChange}
                onFlashbarChange={this.props.onFlashbarChange}
                flashbarItems={this.props.flashbarItems}
                breadcrumbItems={[
                    {
                        text: "RES",
                        href: "#/",
                    },
                    {
                        text: "Environment Management",
                        href: "#/cluster/status",
                    },
                    {
                        text: "Identity management",
                        href: "",
                    },
                ]}
                header={
                    <Header
                        variant={"h1"}
                        description={"Manage user identities"}
                    >
                        Identity management
                    </Header>
                }
                content={
                    <React.Fragment>
                        <SpaceBetween size="xxl">
                            <Container header={<Header variant={"h2"} description="Cognito user pool metadata. Use this for debugging issues related to the Cognito user pool.">AWS Cognito Directory</Header>}>
                                <SpaceBetween size="xxl">
                                    <ColumnLayout variant={"text-grid"} columns={3}>
                                        <KeyValue title="Provider Name" value={dot.pick("provider", this.state.identityProvider)} />
                                        <KeyValue title="User Pool Id" value={dot.pick("cognito.user_pool_id", this.state.identityProvider)} clipboard={true} type={"cognito:user-pool-id"} />
                                        <KeyValue title="Domain URL" value={dot.pick("cognito.domain_url", this.state.identityProvider)} clipboard={true} />
                                        <KeyValue title="Provider URL" value={dot.pick("cognito.provider_url", this.state.identityProvider)} clipboard={true} />
                                    </ColumnLayout>
                                    <KeyValue title="Use AWS Cognito as user directory">
                                        <div>
                                            <TextContent>
                                                <p><small>Enable this for small scale user cases involving 50 or less users. User sign in through their username and password.<br />Recommended for small teams or for demo purposes.</small></p>
                                            </TextContent>
                                            <div style={{display: 'flex', flexDirection: 'row', gap: '4px'}}>
                                                <EnabledDisabledStatusIndicator enabled={Utils.asBoolean(dot.pick("cognito.enable_native_user_login", this.state.identityProvider))} />
                                                <Toggle
                                                    checked={Utils.asBoolean(dot.pick("cognito.enable_native_user_login", this.state.identityProvider))}
                                                    onChange={async ({ detail }) => await handleCognitoToggleChange(detail.checked, "enable_native_user_login")}
                                                />
                                            </div>
                                        </div>
                                    </KeyValue>
                                    <KeyValue title="User self registration">
                                        <div>
                                            <TextContent>
                                                <p><small>Let anyone sign up for a Cognito user account through the UI</small></p>
                                            </TextContent>
                                            <div style={{display: 'flex', flexDirection: 'row', gap: '4px'}}>
                                                <EnabledDisabledStatusIndicator enabled={Utils.asBoolean(dot.pick("cognito.enable_self_sign_up", this.state.identityProvider))} />
                                                <Toggle
                                                    checked={Utils.asBoolean(dot.pick("cognito.enable_self_sign_up", this.state.identityProvider))}
                                                    onChange={async ({ detail }) => await handleCognitoToggleChange(detail.checked, "enable_self_sign_up")}
                                                />
                                            </div>
                                        </div>
                                    </KeyValue>
                                </SpaceBetween>
                            </Container>
                            <Container header={<Header variant={"h2"} description="AD connection information">Active Directory</Header>}>