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

0% Statements 0/11
0% Branches 0/27
0% Functions 0/2
0% Lines 0/11

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 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136                                                                                                                                                                                                                                                                               
import * as React from "react";
import Linkify from "linkify-react";
import styled from "styled-components";
import { Box, Flex, Text } from "rimble-ui";
import { OpenInNew } from "@rimble/icons";
import { H5 } from "../../layouts";
import { baseColors, colors } from "../../../themes";
import { SchemaDataResponse, SchemaDataInput } from "./types";
import { SchemaSaves } from "./SchemaSaves";
import { SchemaHeader } from "./SchemaHeader";
import { SchemaPreview, SchemaViewTypes, SCHEMA_VIEWS } from "./SchemaPreview";
import { GitHub } from "../../elements/Icons/GitHub";
import { SertoUiContext, SertoUiContextInterface } from "../../../context/SertoUiContext";
 
const SidebarHeading = styled(H5)`
  margin-bottom: 12px;
  &:first-child {
    margin-top: 0;
  }
`;
 
const UserLink = styled.a`
  color: ${baseColors.blurple};
  text-decoration: none;
  &:hover {
    color: ${colors.primary.light};
  }
 
  &,
  svg {
    vertical-align: middle;
  }
  svg {
    margin: 0 8px;
  }
  svg:first-child {
    margin-left: 0;
  }
`;
 
export interface SchemaDetailProps {
  schema: SchemaDataInput | SchemaDataResponse;
  primaryView?: SchemaViewTypes;
  /** Whether to show various tools including "save" and "issue VC" functionality. */
  hideTools?: boolean;
  /** Whether to show "issue VC" functionality. */
  hideIssueVc?: boolean;
  /** Some layout changes in pane view: the header is pushed inside <SchemaPreview> and below the view switcher dropdown, and only shown in non-JSON view. */
  paneView?: boolean;
  noSwitcher?: boolean;
  fullPage?: boolean;
}
 
export const SchemaDetail: React.FunctionComponent<SchemaDetailProps> = (props) => {
  const { schema, primaryView, hideTools, hideIssueVc, fullPage, paneView, noSwitcher } = props;
  const schemasService = React.useContext<SertoUiContextInterface>(SertoUiContext).schemasService;
  const [view, setView] = React.useState<SchemaViewTypes>(primaryView || SCHEMA_VIEWS[0]);
 
  const userOwnsSchema = "creator" in schema && schemasService.userData?.sub === schema.creator?.identifier;
 
  // If `primaryView` prop changes, set the view to that - but future calls to `setView` will still take effect.
  React.useEffect(() => {
    if (primaryView) {
      setView(primaryView);
    }
  }, [primaryView]);
 
  return (
    <>
      {!paneView && (
        <Flex mb={4} justifyContent="space-between">
          <SchemaHeader schema={schema} />
          {!hideTools && <SchemaSaves schema={schema} />}
        </Flex>
      )}
 
      <Flex justifyContent="space-between">
        <SchemaPreview
          schema={schema}
          view={view}
          setView={setView}
          hideTools={hideTools}
          hideIssueVc={hideIssueVc}
          fullPage={fullPage}
          paneView={paneView}
          noSwitcher={noSwitcher}
          rimbleProps={fullPage ? { flexGrow: 1, pr: 4, maxWidth: "665px" } : { maxWidth: "100%" }}
        />
        {fullPage && (
          <Box maxWidth="340px">
            <SidebarHeading>Description</SidebarHeading>
            <Text>
              <Linkify options={{ target: "_blank" }}>{schema.description}</Linkify>
            </Text>
 
            <SidebarHeading>Schema Author</SidebarHeading>
            <Text>
              {"creator" in schema && schema.creator?.name && schema.creator.nickName ? (
                <>
                  {schema.creator.name && (
                    <Text>
                      {schema.creator.name}
                      {userOwnsSchema && " (you)"}
                    </Text>
                  )}
                  {schema.creator.identifier.includes("github") && (
                    <UserLink href={`https://github.com/${schema.creator.nickName}`} target="_blank">
                      <GitHub style={{ width: 16, height: "auto" }} />
                      {schema.creator.nickName}
                      <OpenInNew size="16px" />
                    </UserLink>
                  )}
                </>
              ) : (
                <i>Author details coming soon</i>
              )}
            </Text>
 
            {"updated" in schema && (
              <>
                <SidebarHeading>Releases</SidebarHeading>
                <Text>
                  Version {schema.version} on {new Date(schema.updated).toLocaleDateString()}
                </Text>
                <Text mt={2}>
                  <i>Full version history coming soon</i>
                </Text>
              </>
            )}
          </Box>
        )}
      </Flex>
    </>
  );
};