-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #418 from TeskaLabs/bugfix/add-help-cache
Refactor HelpComponent
- Loading branch information
Showing
9 changed files
with
70 additions
and
141 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,50 +1,16 @@ | ||
| # ASAB WebUI HelpButton component | ||
|
|
||
| Display information for your desired screen in modal. | ||
| Display documentation for your desired screen in modal. The documentation can be found [here](https://docs.teskalabs.com/logman.io/user/) | ||
|
|
||
| If you want to add this component, you need to call the `addHelpButton` method. This method takes only 1 parameter: | ||
| >- `path` (string) e.g.: `"Exports/Detail"` or `"Dashboards/SomeDashboardName"`, ... | ||
| >- `path` (string) e.g.: `"export"` or `"dashboards"`, ... | ||
| `Path/to/help-content` - is a path you set up in Library. **`Help` folder is excluded from this path.** Content file's extension can be omitted. | ||
| It will be sufficient to indicate the **correct** part of the documentation (parts of the documentation are in the sidebar), specify the path that comes after this part `https://docs.teskalabs.com/logman.io/user/` | ||
|
|
||
| #### Example code | ||
|
|
||
| ```javascript | ||
| export function Container(props) { | ||
| props.app.addHelpButton("Path/to/help-content"); | ||
| props.app.addHelpButton("https://docs.teskalabs.com/path/to/documentation"); | ||
| } | ||
| ``` | ||
|
|
||
|
|
||
| ### Add help-content to Library | ||
|
|
||
| 1. Create `Help` folder in Library. | ||
| 2. Inside, create a new subfolder (e.g. `Dashboards`, `Clients`, `Credentials`,..) | ||
| - Naming should match sidebar item's name (as in examples above) | ||
| 3. Inside newly created subfolder, create a _json_ file named after the page where you want the HelpButton component to appear (e.g. `DashboardsName.json`). | ||
| 4. This _json_ file carries the content which appears in modal (content supports markdown). | ||
|
|
||
| #### Specific example | ||
|
|
||
| ``` | ||
| - Library | ||
| - Help | ||
| - Dashboards | ||
| - DashboardsName.json | ||
| ``` | ||
|
|
||
| #### `DashboardsName.json` content example | ||
| ```json | ||
| { | ||
| "content": "Help content" | ||
| } | ||
| ``` | ||
|
|
||
| #### Usage inside component | ||
| ```javascript | ||
| export function DashboardsName(props) { | ||
| ... | ||
| props.app.addHelpButton("Dashboards/DashboardsName"); | ||
| ... | ||
| } | ||
| ``` |
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 |
|---|---|---|
| @@ -1,50 +1,48 @@ | ||
| import React, { useState } from 'react'; | ||
| import { useTranslation } from "react-i18next"; | ||
| import { useSelector } from 'react-redux'; | ||
| import React, {useState, useEffect} from 'react'; | ||
| import {useTranslation} from "react-i18next"; | ||
| import {useSelector} from 'react-redux'; | ||
|
|
||
| import { Modal, NavLink, Card, CardHeader, CardBody, Button } from 'reactstrap'; | ||
| import {Modal, NavLink, Card, CardHeader, CardBody, Button} from 'reactstrap'; | ||
|
|
||
|
|
||
| export default function HelpButton() { | ||
| const { t } = useTranslation(); | ||
|
|
||
| const [modal, setModal] = useState(false); | ||
|
|
||
| const content = useSelector(state => state?.header.content); | ||
| if ((content == undefined) || (content == "")) return null; | ||
|
|
||
| const toggle = () => setModal(!modal); | ||
|
|
||
| return ( | ||
| <> | ||
| <NavLink | ||
| className="help-button" | ||
| onClick={toggle} | ||
| title={t("Show help info")} | ||
| href="#" | ||
| > | ||
| <i>?</i> | ||
| </NavLink> | ||
|
|
||
| <Modal isOpen={modal} toggle={toggle} className="center help-modal-card"> | ||
| <Card> | ||
| <CardHeader className="border-bottom"> | ||
| <div className="card-header-title"> | ||
| <i className="cil-info pr-2" /> | ||
| {t("HelpButton|Help")} | ||
| </div> | ||
| <Button outline color="primary" onClick={toggle}> | ||
| <i className="cil-x"/> | ||
| </Button> | ||
| </CardHeader> | ||
| <CardBody> | ||
| <div>{content}</div> | ||
| {/*TODO: uncomment and use when the documentation is ready to be displayed in the iframe*/} | ||
| {/*<iframe className="help-iframe" src="" title=""/>*/} | ||
| </CardBody> | ||
| </Card> | ||
| </Modal> | ||
| </> | ||
| ); | ||
| const {t} = useTranslation(); | ||
|
|
||
| const [modal, setModal] = useState(false); | ||
|
|
||
| const path = useSelector(state => state?.header.helpPath); | ||
| if ((path == undefined) || (path == "")) return null; | ||
|
|
||
| const toggle = () => setModal(!modal); | ||
|
|
||
| return ( | ||
| <> | ||
| <NavLink | ||
| className="help-button" | ||
| onClick={toggle} | ||
| title={t("Show help info")} | ||
| href="#" | ||
| > | ||
| <i>?</i> | ||
| </NavLink> | ||
|
|
||
| <Modal isOpen={modal} toggle={toggle} className="center help-modal-card"> | ||
| <Card> | ||
| <CardHeader className="border-bottom"> | ||
| <div className="card-header-title"> | ||
| <i className="cil-info pr-2" /> | ||
| {t("HelpButton|Help")} | ||
| </div> | ||
| <Button outline color="primary" onClick={toggle}> | ||
| <i className="cil-x"/> | ||
| </Button> | ||
| </CardHeader> | ||
| <CardBody> | ||
| <iframe className="help-iframe" src={path} /> | ||
| </CardBody> | ||
| </Card> | ||
| </Modal> | ||
| </> | ||
| ); | ||
| } | ||
|
|
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 was deleted.
Oops, something went wrong.