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> ) ); } }; |