All files / src/components/views/Schemas/CreateSchema ConfirmStep.tsx

0% Statements 0/3
0% Branches 0/12
0% Functions 0/1
0% Lines 0/3

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                                                                                                       
import * as React from "react";
import { Flash, Button, Loader, Tooltip } from "rimble-ui";
import { SchemaDetail } from "../SchemaDetail";
import { SchemaDataInput } from "../types";
 
export interface ConfirmStepProps {
  builtSchema: SchemaDataInput;
  error?: string;
  isUpdate?: boolean;
  userOwnsSchema?: boolean;
  isAuthenticated?: boolean;
  loading?: boolean;
  onComplete(): void;
}
 
export const ConfirmStep: React.FunctionComponent<ConfirmStepProps> = (props) => {
  const { builtSchema, error, isUpdate, userOwnsSchema, isAuthenticated } = props;
 
  return (
    <>
      <SchemaDetail schema={builtSchema} hideTools={true} noSwitcher={true} />
      {error && (
        <Flash mt={3} variant="danger">
          {error}
        </Flash>
      )}
      {isAuthenticated ? (
        <Button mt={3} width="100%" onClick={props.onComplete} disabled={props.loading}>
          {props.loading ? (
            <Loader color="white" />
          ) : isUpdate ? (
            userOwnsSchema ? (
              "Save Changes"
            ) : (
              "Fork Schema"
            )
          ) : (
            "Publish"
          )}
        </Button>
      ) : (
        <Tooltip message="You must log in to make changes">
          {/*Have to use opacity instead of disabled otherwise tooltip doesn't work.*/}
          <Button mt={3} width="100%" style={{ opacity: 0.5 }}>
            {isUpdate ? "Save Changes" : "Publish"}
          </Button>
        </Tooltip>
      )}
    </>
  );
};