OrganizationSettingsSideMenu.tsx

import {
  BellAlertIcon,
  ChartBarIcon,
  Cog8ToothIcon,
  CreditCardIcon,
  LockClosedIcon,
  UserGroupIcon,
} from "@heroicons/react/20/solid";
import { ArrowLeftIcon } from "@heroicons/react/24/solid";
import { SlackIcon } from "@trigger.dev/companyicons";
import { VercelLogo } from "~/components/integrations/VercelLogo";
import { useFeatureFlags } from "~/hooks/useFeatureFlags";
import { useFeatures } from "~/hooks/useFeatures";
import { type MatchedOrganization } from "~/hooks/useOrganizations";
import { cn } from "~/utils/cn";
import {
  organizationSettingsPath,
  organizationSlackIntegrationPath,
  organizationTeamPath,
  organizationVercelIntegrationPath,
  rootPath,
  v3BillingAlertsPath,
  v3BillingPath,
  v3PrivateConnectionsPath,
  v3UsagePath,
} from "~/utils/pathBuilder";
import { LinkButton } from "../primitives/Buttons";
import { HelpAndFeedback } from "./HelpAndFeedbackPopover";
import { SideMenuHeader } from "./SideMenuHeader";
import { SideMenuItem } from "./SideMenuItem";
import { useCurrentPlan } from "~/routes/_app.orgs.$organizationSlug/route";
import { Paragraph } from "../primitives/Paragraph";
import { Badge } from "../primitives/Badge";
import { useHasAdminAccess } from "~/hooks/useUser";
import { AskAI } from "../AskAI";

export type BuildInfo = {
  appVersion: string | undefined;
  packageVersion: string;
  buildTimestampSeconds: string | undefined;
  gitSha: string | undefined;
  gitRefName: string | undefined;
};

export function OrganizationSettingsSideMenu({
  organization,
  buildInfo,
}: {
  organization: MatchedOrganization;
  buildInfo: BuildInfo;
}) {
  const { isManagedCloud } = useFeatures();
  const featureFlags = useFeatureFlags();
  const currentPlan = useCurrentPlan();
  const isAdmin = useHasAdminAccess();
  const showBuildInfo = isAdmin || !isManagedCloud;

  return (
    <div
      className={cn(
        "grid h-full grid-rows-[2.5rem_auto_2.5rem] overflow-hidden border-r border-grid-bright bg-background-bright transition"
      )}
    >
      <div className={cn("flex items-center justify-between p-1 transition")}>
        <LinkButton
          variant="minimal/medium"
          LeadingIcon={ArrowLeftIcon}
          to={rootPath()}
          fullWidth
          textAlignLeft
        >
          <span className="text-text-bright">Back to app</span>
        </LinkButton>
      </div>
      <div className="mb-6 flex grow flex-col gap-4 overflow-y-auto px-1 pt-2 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
        <div className="flex flex-col">
          <div className="mb-1">
            <SideMenuHeader title="Organization" />
          </div>
          {isManagedCloud && (
            <>
              <SideMenuItem
                name="Usage"
                icon={ChartBarIcon}
                activeIconColor="text-indigo-500"
                inactiveIconColor="text-indigo-500"
                to={v3UsagePath(organization)}
                data-action="usage"
              />
              <SideMenuItem
                name="Billing"
                icon={CreditCardIcon}
                activeIconColor="text-emerald-500"
                inactiveIconColor="text-emerald-500"
                to={v3BillingPath(organization)}
                data-action="billing"
                badge={
                  currentPlan?.v3Subscription?.isPaying ? (
                    <Badge variant="extra-small">{currentPlan?.v3Subscription?.plan?.title}</Badge>
                  ) : undefined
                }
              />
              <SideMenuItem
                name="Billing alerts"
                icon={BellAlertIcon}
                activeIconColor="text-rose-500"
                inactiveIconColor="text-rose-500"
                to={v3BillingAlertsPath(organization)}
                data-action="billing-alerts"
              />
            </>
          )}
          {featureFlags.hasPrivateConnections && (
            <SideMenuItem
              name="Private Connections"
              icon={LockClosedIcon}
              activeIconColor="text-purple-500"
              inactiveIconColor="text-purple-500"
              to={v3PrivateConnectionsPath(organization)}
              data-action="private-connections"
            />
          )}
          <SideMenuItem
            name="Team"
            icon={UserGroupIcon}
            activeIconColor="text-amber-500"
            inactiveIconColor="text-amber-500"
            to={organizationTeamPath(organization)}
            data-action="team"
          />
          <SideMenuItem
            name="Settings"
            icon={Cog8ToothIcon}
            activeIconColor="text-orgSettings"
            inactiveIconColor="text-orgSettings"
            to={organizationSettingsPath(organization)}
            data-action="settings"
          />
        </div>
        <div className="flex flex-col">
          <div className="mb-1">
            <SideMenuHeader title="Integrations" />
          </div>
          <SideMenuItem
            name="Vercel"
            icon={VercelLogo}
            activeIconColor="text-white"
            inactiveIconColor="text-white"
            iconClassName="size-4 ml-0.5"
            to={organizationVercelIntegrationPath(organization)}
            data-action="integrations"
          />
          <SideMenuItem
            name="Slack"
            icon={SlackIcon}
            activeIconColor="text-white"
            inactiveIconColor="text-white"
            to={organizationSlackIntegrationPath(organization)}
            data-action="integrations"
          />
        </div>
        <div className="flex flex-col gap-1">
          <SideMenuHeader title="App version" />
          <Paragraph variant="extra-small" className="px-2 text-text-dimmed">
            {buildInfo.appVersion || `v${buildInfo.packageVersion}`}
          </Paragraph>
        </div>
        {showBuildInfo && buildInfo.buildTimestampSeconds && (
          <div className="flex flex-col gap-1">
            <SideMenuHeader title="Build timestamp" />
            <Paragraph variant="extra-small" className="px-2 text-text-dimmed">
              {new Date(Number(buildInfo.buildTimestampSeconds) * 1000).toISOString()}
            </Paragraph>
          </div>
        )}
        {showBuildInfo && buildInfo.gitRefName && (
          <div className="flex flex-col gap-1">
            <SideMenuHeader title="Git ref" />
            <Paragraph variant="extra-small" className="px-2 text-text-dimmed">
              <a
                href={`https://github.com/triggerdotdev/trigger.dev/tree/${buildInfo.gitRefName}`}
                target="_blank"
                rel="noopener noreferrer"
                className="transition hover:text-text-bright"
              >
                {buildInfo.gitRefName}
              </a>
            </Paragraph>
          </div>
        )}
        {showBuildInfo && buildInfo.gitSha && (
          <div className="flex flex-col gap-1">
            <SideMenuHeader title="Git sha" />
            <Paragraph variant="extra-small" className="px-2 text-text-dimmed">
              <a
                href={`https://github.com/triggerdotdev/trigger.dev/commit/${buildInfo.gitSha}`}
                target="_blank"
                rel="noopener noreferrer"
                className="transition hover:text-text-bright"
              >
                {buildInfo.gitSha.slice(0, 9)}
              </a>
            </Paragraph>
          </div>
        )}
      </div>
      <div className="flex w-full items-center justify-between border-t border-grid-bright p-1">
        <HelpAndFeedback organizationId={organization.id} />
        <AskAI />
      </div>
    </div>
  );
}