diff --git a/CHANGELOG.md b/CHANGELOG.md index bf219226..8941d15b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -98,6 +98,8 @@ - Fixed title display for buttons after a session has ended. Added disabling inputs, Pie chart clickable parts, disabling `tree-menu-item` and reloading the page after clicking the Forward or Backward buttons in the browser (INDIGO Sprint 230609, [!426](https://github.com/TeskaLabs/asab-webui/pull/426)) +- Refactor HelpComponent, remove HelpService (INDIGO Sprint 230609, [!418](https://github.com/TeskaLabs/asab-webui/pull/418)) + ## v23.5 ### Features diff --git a/doc/help-button.md b/doc/help-button.md index ded6661b..a0066034 100644 --- a/doc/help-button.md +++ b/doc/help-button.md @@ -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"); -... -} -``` \ No newline at end of file diff --git a/src/actions.js b/src/actions.js index 78802594..56812c66 100644 --- a/src/actions.js +++ b/src/actions.js @@ -2,7 +2,7 @@ export const ADD_ALERT = "asab/addAlert"; export const ACK_ALERT = "asab/ackAlert"; export const DEL_ALERT = "asab/delAlert"; -export const HELP_CONTENT = "asab/setHelpContent"; +export const SET_HELP_PATH = "asab/setHelpContent"; export const SET_BREADCRUMB_NAME = "asab/setBreadcrumbName"; export const SET_ADVANCED_MODE = "asab/setAdvancedMode"; diff --git a/src/containers/Application.js b/src/containers/Application.js index 06beb409..772bcc4c 100644 --- a/src/containers/Application.js +++ b/src/containers/Application.js @@ -23,13 +23,12 @@ import HeaderService from '../services/HeaderService'; import SidebarService from './Sidebar/service'; import ThemeService from '../theme/ThemeService'; import BrandingService from '../services/BrandingService'; -import HelpService from "../services/HelpService"; import TitleService from "../services/TitleService"; import AccessDeniedCard from '../modules/tenant/access/AccessDeniedCard'; import UnauthorizedAccessScreen from '../modules/auth/components/UnauthorizedAccessScreen'; -import {ADD_ALERT, SET_ADVANCED_MODE, HELP_CONTENT, SET_BREADCRUMB_NAME} from '../actions'; +import {ADD_ALERT, SET_ADVANCED_MODE, SET_HELP_PATH, SET_BREADCRUMB_NAME} from '../actions'; class Application extends Component { @@ -92,8 +91,7 @@ class Application extends Component { this.SidebarService = new SidebarService(this, "SidebarService"); this.ThemeService = new ThemeService(this, "ThemeService"); this.BrandingService = new BrandingService(this, "BrandingService"); - this.HelpService = new HelpService(this, "HelpService"); - this.TitleService = new TitleService(this, "TitleService") + this.TitleService = new TitleService(this, "TitleService"); this.ReduxService.addReducer("alerts", alertsReducer); this.ReduxService.addReducer("advmode", advancedModeReducer); @@ -447,14 +445,17 @@ class Application extends Component { addHelpButton(path) { useEffect(() => { - this.HelpService.setData(path); + this.Store.dispatch({ + type: SET_HELP_PATH, + helpPath: path + }); return () => { this.Store.dispatch({ - type: HELP_CONTENT, - content: "" + type: SET_HELP_PATH, + helpPath: "" }) } - }, []) + }, []); } // Method for overloading breadcrumb name diff --git a/src/containers/Header/HelpButton.js b/src/containers/Header/HelpButton.js index ccc7105e..cef0d6fc 100644 --- a/src/containers/Header/HelpButton.js +++ b/src/containers/Header/HelpButton.js @@ -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 ( - <> - - ? - - - - - -
- - {t("HelpButton|Help")} -
- - - -
{content}
- {/*TODO: uncomment and use when the documentation is ready to be displayed in the iframe*/} - {/*