-
Notifications
You must be signed in to change notification settings - Fork 175
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Web UI] Check details page improvements (#2162)
* Wrap commands, allow scrolling on env vars Signed-off-by: Melissa P <[email protected]> * Add buttons for publish and unpublish Signed-off-by: Melissa P <[email protected]> * Added check publish and unpublish actions Signed-off-by: Melissa P <[email protected]> * Fix syntax Signed-off-by: Melissa P <[email protected]> * Render single button depending on state of publish Signed-off-by: Melissa P <[email protected]> * update changelog Signed-off-by: Melissa P <[email protected]> * Review tweaks Signed-off-by: Melissa P <[email protected]> * Review tweaks Signed-off-by: Melissa P <[email protected]> * Rework Monospaced to be more clear at it's intention Signed-off-by: Melissa P <[email protected]> * Set DV back to table-cell and give optional scrollable prop Signed-off-by: Melissa P <[email protected]> * Initial implementation of code highlighting Signed-off-by: Melissa P <[email protected]> * Implement code highlighting Signed-off-by: Melissa P <[email protected]> * Update eslint rule Signed-off-by: Melissa P <[email protected]> * update changelog Signed-off-by: Melissa P <[email protected]> * Fallback theme colour re-added Signed-off-by: Melissa P <[email protected]>
- Loading branch information
Showing
20 changed files
with
455 additions
and
50 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export { default } from "./CodeBlock"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| import "highlight.js/styles/github-gist.css"; | ||
|
|
||
| import React from "react"; | ||
| import PropTypes from "prop-types"; | ||
| import Worker from "./CodeHighlight.worker"; | ||
|
|
||
| const worker = new Worker(); | ||
| const pending = {}; | ||
|
|
||
| worker.onmessage = event => { | ||
| const [key, data] = event.data; | ||
| pending[key].call(this, data); | ||
| }; | ||
|
|
||
| let idx = 0; | ||
| function postMessage(msg, callback) { | ||
| const key = idx; | ||
| pending[idx] = data => { | ||
| callback(data); | ||
| delete pending[idx]; | ||
| }; | ||
| worker.postMessage({ key, msg }); | ||
| idx += 1; | ||
| } | ||
|
|
||
| class CodeHighlight extends React.Component { | ||
| static propTypes = { | ||
| language: PropTypes.oneOf(["json", "bash", "properties"]).isRequired, | ||
| code: PropTypes.string.isRequired, | ||
| children: PropTypes.func.isRequired, | ||
| }; | ||
|
|
||
| static getDerivedStateFromProps(props, state) { | ||
| if (props.code !== state.code) { | ||
| return { code: props.code, result: props.code }; | ||
| } | ||
| return null; | ||
| } | ||
|
|
||
| state = { | ||
| code: this.props.code, | ||
| result: this.props.code, | ||
| }; | ||
|
|
||
| componentDidMount() { | ||
| this.update(); | ||
| } | ||
|
|
||
| componentDidUpdate() { | ||
| if (this.props.code === this.state.result) { | ||
| this.update(); | ||
| } | ||
| } | ||
|
|
||
| componentWillUnmount() { | ||
| this.unmounted = true; | ||
| } | ||
|
|
||
| update = () => { | ||
| postMessage([this.props.language, this.props.code], result => { | ||
| if (!this.unmounted) { | ||
| this.setState({ result }); | ||
| } | ||
| }); | ||
| }; | ||
|
|
||
| render() { | ||
| return this.props.children(this.state.result); | ||
| } | ||
| } | ||
|
|
||
| export default CodeHighlight; |
14 changes: 14 additions & 0 deletions
14
dashboard/src/components/CodeHighlight/CodeHighlight.worker.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import hljs from "highlight.js/lib/highlight"; | ||
| import bash from "highlight.js/lib/languages/bash"; | ||
| import json from "highlight.js/lib/languages/json"; | ||
| import properties from "highlight.js/lib/languages/properties"; | ||
|
|
||
| hljs.registerLanguage("bash", bash); | ||
| hljs.registerLanguage("json", json); | ||
| hljs.registerLanguage("properties", properties); | ||
|
|
||
| onmessage = message => { | ||
| const [language, data] = message.data.msg; | ||
| const result = hljs.highlight(language, data); | ||
| postMessage([message.data.key, result.value]); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.