public render()

in src/Explorer/SplashScreen/SplashScreen.tsx [270:376]
105 lines of code
6 McCabe index (conditional complexity)

  public render(): JSX.Element {
    let title: string;
    let subtitle: string;

    switch (userContext.apiType) {
      case "Postgres":
        title = "Welcome to Azure Cosmos DB for PostgreSQL";
        subtitle = "Get started with our sample datasets, documentation, and additional tools.";
        break;
      case "VCoreMongo":
        title = "Welcome to Azure Cosmos DB for MongoDB (vCore)";
        subtitle = "Get started with our sample datasets, documentation, and additional tools.";
        break;
      default:
        title = "Welcome to Azure Cosmos DB";
        subtitle = "Globally distributed, multi-model database service for any scale";
    }

    return (
      <div className="connectExplorerContainer">
        <form className="connectExplorerFormContainer">
          <div className="splashScreenContainer">
            <div className="splashScreen">
              <h1 className="title" role="heading" aria-label={title}>
                {title}
                <FeaturePanelLauncher />
              </h1>
              <div className="subtitle">{subtitle}</div>
              {this.getSplashScreenButtons()}
              {useCarousel.getState().showCoachMark && (
                <Coachmark
                  target="#quickstartDescription"
                  positioningContainerProps={{ directionalHint: DirectionalHint.rightTopEdge }}
                  persistentBeak
                >
                  <TeachingBubbleContent
                    headline={`Start with sample ${getCollectionName().toLocaleLowerCase()}`}
                    hasCloseButton
                    closeButtonAriaLabel="Close"
                    primaryButtonProps={{
                      text: "Get started",
                      onClick: () => {
                        useCarousel.getState().setShowCoachMark(false);
                        this.container.onNewCollectionClicked({ isQuickstart: true });
                      },
                    }}
                    secondaryButtonProps={{
                      text: "Cancel",
                      onClick: () => useCarousel.getState().setShowCoachMark(false),
                    }}
                    onDismiss={() => useCarousel.getState().setShowCoachMark(false)}
                  >
                    You will be guided to create a sample container with sample data, then we will give you a tour of
                    data explorer. You can also cancel launching this tour and explore yourself
                  </TeachingBubbleContent>
                </Coachmark>
              )}
              {userContext.apiType === "Postgres" || userContext.apiType === "VCoreMongo" ? (
                <Stack horizontal style={{ margin: "0 auto", width: "84%" }} tokens={{ childrenGap: 16 }}>
                  <Stack style={{ width: "33%" }}>
                    <Text
                      variant="large"
                      style={{
                        marginBottom: 16,
                        fontFamily: '"Segoe UI Semibold", "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif',
                      }}
                    >
                      Next steps
                    </Text>
                    {this.getNextStepItems()}
                  </Stack>
                  <Stack style={{ width: "33%" }}>
                    <Text
                      variant="large"
                      style={{
                        marginBottom: 16,
                        fontFamily: '"Segoe UI Semibold", "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif',
                      }}
                    >
                      Tips & learn more
                    </Text>
                    {this.getTipsAndLearnMoreItems()}
                  </Stack>
                  <Stack style={{ width: "33%" }}></Stack>
                </Stack>
              ) : (
                <div className="moreStuffContainer">
                  <div className="moreStuffColumn commonTasks">
                    <h2 className="title">Recents</h2>
                    {this.getRecentItems()}
                  </div>
                  <div className="moreStuffColumn">
                    <h2 className="title">Top 3 things you need to know</h2>
                    {this.top3Items()}
                  </div>
                  <div className="moreStuffColumn tipsContainer">
                    <h2 className="title">Learning Resources</h2>
                    {this.getLearningResourceItems()}
                  </div>
                </div>
              )}
            </div>
          </div>
        </form>
      </div>
    );
  }