github.com/replicatedhq/ship@v0.55.0/web/init/src/components/shared/Linter.jsx (about)

     1  import * as React from "react";
     2  import Markdown from "react-remarkable";
     3  import get from "lodash/get";
     4  
     5  export default class Linter extends React.Component {
     6  
     7    constructor(props) {
     8      super(props);
     9  
    10      // if there's a readme, default to readme tab. Else default to linter results.
    11      const showHelp = !this.props.readme;
    12      const showPreview = !showHelp;
    13      this.state = { showHelp, showPreview };
    14    }
    15  
    16    maybeLineNumber = (error) => {
    17      return get(error, "positions.0.start.line")
    18        ? `Line ${error.positions[0].start.line + 1} | `
    19        : "";
    20    }
    21  
    22    maybeLevel = (error) => {
    23      return error.type === "error" ? "Error: " : error.type === "warn" ? "Warning: " : "";
    24    }
    25  
    26    messageFor = (error) => {
    27      return `${this.maybeLineNumber(error)}${this.maybeLevel(error)}${error.message}`
    28    }
    29  
    30    linkFor = (error) => {
    31      return error.links && error.links.length > 0 ? (
    32        <a target="_blank" href={error.links[0]} rel="noopener noreferrer">
    33          <span className={`icon u-linkIcon--blue flex-auto u-marginLeft--small clickable`}></span>
    34        </a>
    35      ) : null;
    36    }
    37  
    38    toggleWindow = (window) => {
    39      this.setState({
    40        showHelp: window === "help",
    41        showPreview: window === "preview"
    42      });
    43    }
    44  
    45    render() {
    46      const {
    47        errors,
    48        previewEnabled,
    49        readme
    50      } = this.props;
    51      const {
    52        showPreview,
    53        showHelp
    54      } = this.state;
    55  
    56      return (
    57        <div className="Linter-wrapper flex-column flex1 u-overflow--hidden">
    58          <div className="Linter-header flex flex-auto">
    59            <span className="flex1 u-fontSize--small u-fontWeight--medium u-color--dustyGray">Console</span>
    60          </div>
    61          <div className="Linter--console flex-1-auto flex-column u-overflow--auto">
    62            { previewEnabled &&
    63              <div className="Linter--toggle flex flex-auto justifyContent--center">
    64                <div className="flex">
    65                  <span className={`${showHelp ? "is-active" : "not-active"}`} onClick={() => { this.toggleWindow("help") }}>Config Help</span>
    66                  <span className={`${showPreview ? "is-active" : "not-active"}`} onClick={() => { this.toggleWindow("preview") }}>README.md</span>
    67                </div>
    68              </div>
    69            }
    70            { showPreview ?
    71              <div className="HelmChartReadme--wrapper markdown-wrapper readme flex flex1 flex-column u-overflow--auto">
    72                <Markdown
    73                  options={{
    74                    linkTarget: "_blank",
    75                    linkify: true,
    76                  }}>
    77                  {readme}
    78                </Markdown>
    79              </div> :
    80              <div className="flex flex1 flex-column alignContent--center">
    81                {errors.length ?
    82                  errors.map((error, i) => (
    83                    <div key={i} className={`ConsoleBlock ${error.type} flex alignSelf--flexStart`}>
    84                      <span className={`icon u-${error.type}ConsoleIcon flex-auto u-marginRight--small`}></span>
    85                      <span>{this.messageFor(error)}{this.linkFor(error)}</span>
    86                    </div>
    87                  ))
    88                  :
    89                  <div className="flex1 flex-column alignItems--center justifyContent--center">
    90                    <p className="u-fontSize--normal u-fontWeight--medium u-color--dustyGray">Everything looks good!</p>
    91                  </div>
    92                }
    93              </div>
    94            }
    95          </div>
    96        </div>
    97      );
    98    }
    99  }