All files / src/components/views/Schemas SchemasTable.tsx

0% Statements 0/16
0% Branches 0/27
0% Functions 0/6
0% Lines 0/15

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116                                                                                                                                                                                                                                       
import * as React from "react";
import { Link } from "react-router-dom";
import { Button, Flash, Flex, Loader, Table, Text } from "rimble-ui";
import useSWR from "swr";
import { SchemaDataResponse } from "..";
import { colors } from "../../../themes";
import { TBody, TH, TR } from "../../layouts/LayoutComponents";
import { SertoUiContext, SertoUiContextInterface } from "../../../context/SertoUiContext";
import { ViewSchemaButton } from "./ViewSchemaButton";
 
export interface SchemasTableProps {
  discover?: boolean;
  noSchemasElement?: JSX.Element;
  hideIssueVcInDetail?: boolean;
  onSchemaSelect?(schema: SchemaDataResponse): void;
}
 
export const SchemasTable: React.FunctionComponent<SchemasTableProps> = (props) => {
  const context = React.useContext<SertoUiContextInterface>(SertoUiContext);
 
  const { data, error, isValidating } = useSWR(["getSchemas", !props.discover], () =>
    context.schemasService.getSchemas(!props.discover),
  );
 
  const sortedData = React.useMemo(
    () => data?.sort((schema1, schema2) => (schema1.updated < schema2.updated ? 1 : -1)),
    [data],
  );
 
  if (sortedData?.length) {
    return (
      <>
        <Table border={0} boxShadow={0} width="100%">
          <thead>
            <TR>
              <TH></TH>
              <TH>Name</TH>
              <TH>Slug</TH>
              <TH>Version</TH>
              {!props.discover && <TH>Discoverable</TH>}
              <TH>Created</TH>
              <TH></TH>
              {props.onSchemaSelect && <TH></TH>}
            </TR>
          </thead>
          <TBody>
            {sortedData.map((schema, i) => {
              return (
                <TR key={i}>
                  <td style={{ maxWidth: 32 }}>{schema.icon}</td>
                  <td style={{ fontWeight: 600 }}>{schema.name}</td>
                  <td>{schema.slug}</td>
                  <td>{schema.version}</td>
                  {!props.discover && <td>{(!!schema.discoverable).toString()}</td>}
                  <td>
                    {schema.created && (
                      <time title={schema.created} dateTime={schema.created}>
                        {new Date(schema.created).toDateString()}
                      </time>
                    )}
                  </td>
                  <td style={{ whiteSpace: "nowrap" }}>
                    <ViewSchemaButton schema={schema} hideIssueVcInDetail={props.hideIssueVcInDetail} />
                    {!props.discover && !props.onSchemaSelect && (
                      <Button.Outline
                        as="a"
                        href={`${context.schemasUiUrl}/editor/${schema.slug}`}
                        target={window.location.origin === context.schemasUiUrl ? undefined : "_blank"}
                        ml={3}
                        size="small"
                      >
                        Update
                      </Button.Outline>
                    )}
                  </td>
                  {props.onSchemaSelect && (
                    <td>
                      <Button.Outline size="small" onClick={() => props.onSchemaSelect?.(schema)}>
                        Select
                      </Button.Outline>
                    </td>
                  )}
                </TR>
              );
            })}
          </TBody>
        </Table>
      </>
    );
  } else if (error) {
    return (
      <Flash my={3} variant="danger">
        Error loading schemas: {error.toString()}
      </Flash>
    );
  } else if (isValidating) {
    return (
      <Flex minHeight={8} alignItems="center" justifyContent="center">
        <Loader color={colors.primary.base} size={5} />
      </Flex>
    );
  } else {
    return (
      props.noSchemasElement || (
        <Text.p display="block" fontSize={1} py={2} lineHeight="copy">
          <b style={{ display: "block", fontWeight: 600 }}>
            {props.discover ? "There are" : "You have"} no credential schemas yet.
          </b>
          Please first <Link to={context.schemasService.createSchemaPath}>create a credential schema</Link> in order to
          coordinate around verified data with your customers and partners.
        </Text.p>
      )
    );
  }
};