export default async function CompleteExperimentsDashboard()

in app/complete/page.tsx [63:142]
68 lines of code
1 McCabe index (conditional complexity)

export default async function CompleteExperimentsDashboard() {
  // Check to see if Auth is enabled
  const isAuthEnabled = process.env.IS_AUTH_ENABLED === "true";

  const recipeCollection = new NimbusRecipeCollection(true);
  await recipeCollection.fetchRecipes();
  console.log("recipeCollection.length = ", recipeCollection.recipes.length);

  // XXX await Promise.allSettled for all three loads concurrently
  const msgExpRecipeCollection =
    await getMsgExpRecipeCollection(recipeCollection);
  const msgRolloutRecipeCollection =
    await getMsgRolloutCollection(recipeCollection);

  // Get in format useable by MessageTable
  const experimentAndBranchInfo: RecipeOrBranchInfo[] =
    msgExpRecipeCollection.recipes.map((recipe: NimbusRecipe) =>
      recipe.getRecipeInfo(),
    );

  const totalExperiments = msgExpRecipeCollection.recipes.length;

  const msgRolloutInfo: RecipeOrBranchInfo[] =
    msgRolloutRecipeCollection.recipes.map((recipe: NimbusRecipe) =>
      recipe.getRecipeInfo(),
    );

  const totalRolloutExperiments = msgRolloutRecipeCollection.recipes.length;

  return (
    <div>
      <div className="sticky top-0 z-50 bg-background flex justify-between px-20 py-8">
        <h4 className="scroll-m-20 text-3xl font-semibold">Skylight</h4>
        <MenuButton isComplete={true} />
      </div>

      <h5 className="scroll-m-20 text-xl font-semibold text-center pt-4">
        Complete Desktop Message Rollouts
      </h5>
      <h5
        id="complete_rollouts"
        data-testid="complete_rollouts"
        className="scroll-m-20 text-sm text-center"
      >
        Total: {totalRolloutExperiments}
      </h5>
      <div className="sticky top-24 z-10 py-2 bg-background flex justify-center">
        <Timeline active="rollout" isCompleted={true} />
      </div>
      <div className="container mx-auto py-10">
        <MessageTable
          columns={experimentColumns}
          data={msgRolloutInfo}
          defaultExpanded={false}
        />
      </div>

      <h5 className="scroll-m-20 text-xl font-semibold text-center pt-4">
        Complete Desktop Message Experiments
      </h5>
      <h5
        id="complete_experiments"
        data-testid="complete_experiments"
        className="scroll-m-20 text-sm text-center"
      >
        Total: {totalExperiments}
      </h5>
      <div className="sticky top-24 z-10 py-2 bg-background flex justify-center">
        <Timeline active="experiment" isCompleted={true} />
      </div>
      <div className="space-y-5 container mx-auto py-10">
        <MessageTable
          columns={completedExperimentColumns}
          data={experimentAndBranchInfo}
          defaultExpanded={false}
        />
      </div>
    </div>
  );
}