function ParseFailureModal()

in packages/graph-explorer/src/workspaces/Settings/LoadConfigButton.tsx [168:218]

48 lines of code
2 McCabe index (conditional complexity)


function ParseFailureModal({
  error,
  fileName,
  onCancel,
}: {
  error: Error | null;
  fileName?: string;
  onCancel: () => void;
}) {
  const [_, { close }] = useDisclosure(Boolean(error));

  // Used to ensure the file name does not disappear while the modal is animating out
  const debouncedFileName = useDebounceValue(fileName, 200);

  const internalOnCancel = () => {
    close();
    onCancel();
  };

  return (
    <Modal
      opened={Boolean(error)}
      onClose={internalOnCancel}
      withCloseButton={false}
      size="lg"
      centered={true}
    >
      <div className="flex flex-row items-start gap-8 p-2">
        <div className="py-1">
          <ErrorIcon className="text-warning-main size-16" />
        </div>
        <div className="flex grow flex-col gap-8">
          <div>
            <SectionTitle>Failed To Parse Config</SectionTitle>
            <Paragraph>
              Could not parse the contents of the config file provided. Perhaps
              the file is not a config file from {APP_NAME} or the file is
              corrupted.
            </Paragraph>
            <Paragraph>
              <b>{fileName ?? debouncedFileName ?? "No file selected"}</b>
            </Paragraph>
          </div>
          <Button size="large" onPress={internalOnCancel} className="self-end">
            Cancel
          </Button>
        </div>
      </div>
    </Modal>
  );
}