GitFOSS

// 1st-party
import type { ReactView } from "@ethicdevs/react-monolith";
// 3rd-party
import React from "react";
// generated via script[generate:prisma]
import { UserSSHKey } from "@prisma/client";
// app
import type { CommonProps } from "../../types";
import { buildRouteLink } from "../../utils/shared";
import { AppRoute } from "../../routes.defs";
import { Grid, IslandWrapper, Layout, PageWrapper } from "../../components";
import { CountersRow } from "../../components/CountersRow";
// app islands
import RepositoryHero from "../../islands/RepositoryHero";
import SSHKeyItem from "../../islands/SSHKeyItem";

export interface SettingsViewProps extends CommonProps {
  sshKeys: UserSSHKey[];
  totalKeys: number;
  filter?: string;
}

const SettingsView: ReactView<SettingsViewProps> = ({
  commonProps,
  sshKeys,
  filter = "active",
}) => {
  return (
    <Layout
      {...commonProps}
      showDrawerSettings
      username={commonProps.currentUserUsername!}
    >
      <PageWrapper>
        <IslandWrapper data-islandid={`${RepositoryHero.name}$$0`}>
          <RepositoryHero
            themeScheme={commonProps.themeScheme}
            parentOrg={{ slug: commonProps.currentUserUsername! } as any}
            repo={{ slug: "" } as any}
            path={`SSH Keys`}
            showForkButton={false}
            showNewButton
            newButtonText={"New SSH Key"}
            newButtonUrl={buildRouteLink(
              AppRoute.SETTINGS_KEY_ADD,
              { username: commonProps.currentUserUsername! },
              { encodeURIComponent: 0 },
            )}
          />
        </IslandWrapper>

        <CountersRow
          themeScheme={commonProps.themeScheme}
          labels={[
            {
              label: "All",
              counter: commonProps.layoutCounters?.sshKeys || sshKeys.length,
              href:
                buildRouteLink(
                  AppRoute.SETTINGS_KEYS,
                  {
                    username: commonProps.currentUserUsername!,
                  },
                  { encodeURIComponent: false },
                ) + `?filter=all`,
              active: filter == "all",
            },
            {
              label: "Active",
              counter:
                commonProps.layoutCounters?.sshKeysActive || sshKeys.length,
              href:
                buildRouteLink(
                  AppRoute.SETTINGS_KEYS,
                  {
                    username: commonProps.currentUserUsername!,
                  },
                  { encodeURIComponent: false },
                ) + `?filter=active`,
              active: filter == "active",
            },
            {
              label: "Revoked",
              counter: commonProps.layoutCounters?.sshKeysRevoked || 0,
              href:
                buildRouteLink(
                  AppRoute.SETTINGS_KEYS,
                  {
                    username: commonProps.currentUserUsername!,
                  },
                  { encodeURIComponent: false },
                ) + `?filter=revoked`,
              active: filter == "revoked",
            },
          ]}
        />

        <Grid.Col fluid nowrap gap={24} style={{ marginTop: 16 }}>
          <Grid.Col fluid nowrap gap={4}>
            {sshKeys.map((key, idx) => (
              <IslandWrapper
                key={key.id}
                data-islandid={`${SSHKeyItem.name}$$${idx}`}
              >
                <SSHKeyItem
                  themeScheme={commonProps.themeScheme}
                  sshKey={key}
                />
              </IslandWrapper>
            ))}
          </Grid.Col>
        </Grid.Col>
      </PageWrapper>
    </Layout>
  );
};

export default SettingsView;