export default async function FeatureFlagPage()

in src/app/(proper_react)/(redesign)/(authenticated)/admin/feature-flags/page.tsx [27:126]
86 lines of code
7 McCabe index (conditional complexity)

export default async function FeatureFlagPage() {
  const session = await getServerSession();

  const monthlySubscriptionUrl = getPremiumSubscriptionUrl({
    type: "monthly",
    enabledFeatureFlags: [],
  });
  const yearlySubscriptionUrl = getPremiumSubscriptionUrl({
    type: "yearly",
    enabledFeatureFlags: [],
  });
  const fxaSettingsUrl = process.env.FXA_SETTINGS_URL!;

  if (!session?.user?.email || !session.user.subscriber?.id) {
    return redirect("/");
  }

  if (!isAdmin(session.user.email)) {
    return notFound();
  }

  const featureFlags =
    (await getAllFeatureFlags()).toSorted(
      (flagA, flagB) => flagB.updated_at.getTime() - flagA.updated_at.getTime(),
    ) ?? [];

  /**
   * Elements in this array are either existing flags that are disabled,
   * or names of flags that are not known in the database yet.
   */
  const disabledFlags = featureFlagNames
    .map((flagName) => {
      return featureFlags.find((flag) => flag.name === flagName) ?? flagName;
    })
    .filter(
      (flagOrFlagName) =>
        typeof flagOrFlagName === "string" || !flagOrFlagName.is_enabled,
    )
    .reverse();

  return (
    <div className={styles.wrapper}>
      <nav className={styles.tabBar}>
        <div className={styles.end}>
          <Toolbar
            user={session.user}
            monthlySubscriptionUrl={monthlySubscriptionUrl}
            yearlySubscriptionUrl={yearlySubscriptionUrl}
            subscriptionBillingAmount={getSubscriptionBillingAmount()}
            fxaSettingsUrl={fxaSettingsUrl}
            // Since this page is only accessed by contributors, no need to load
            // their latest scan date from the DB:
            lastScanDate={null}
            // We're not going to run experiments on the feature flag page (it's
            // not user-visible), so no need to fetch experiment data:
            experimentData={defaultExperimentData["Features"]}
            enabledFeatureFlags={[]}
            announcements={null}
          />
        </div>
      </nav>
      <div className={styles.main}>
        <h3>Disabled Feature Flags</h3>
        <div className={styles.flagList}>
          {disabledFlags.map((flagOrFlagName) => {
            return typeof flagOrFlagName === "string" ? (
              <NewFlagEditor
                key={flagOrFlagName}
                flagName={flagOrFlagName}
                adminOnly={isFeatureFlagAdminOnly(flagOrFlagName)}
              />
            ) : (
              <ExistingFlagEditor
                key={flagOrFlagName.name}
                flag={flagOrFlagName}
                adminOnly={isFeatureFlagAdminOnly(flagOrFlagName.name)}
              />
            );
          })}
        </div>
        <h3>Enabled Feature Flags</h3>
        <div className={styles.flagList}>
          {featureFlags
            .filter(
              (flag) =>
                flag.is_enabled &&
                featureFlagNames.includes(flag.name as FeatureFlagName),
            )
            .map((flag) => (
              <ExistingFlagEditor
                key={flag.name}
                flag={flag}
                adminOnly={isFeatureFlagAdminOnly(flag.name)}
              />
            ))}
        </div>
      </div>
    </div>
  );
}