Refactor HelpComponent

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

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");
-...
-}
-```

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";

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

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 (
-        <>
-            <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>
+		</>
+	);
 }
 

src/containers/Header/header.scss

@@ -20,13 +20,13 @@ $toggle-text-color: var(--toggle-text-color);
 			min-height: 30vh;
 		}
 	}
-	//TODO: uncomment and use when the documentation is ready to be displayed in the iframe
-	//& .help-iframe {
-	//	width: 100%;
-	//	height: 80vh;
-	//	overflow: hidden;
-	//	border: 0;
-	//}
+
+	& .help-iframe {
+		width: 100%;
+		height: 80vh;
+		overflow: hidden;
+		border: 0;
+	}
 
 }
 

src/containers/Header/index.js

@@ -145,7 +145,7 @@ export function Header(props) {
 					null
 				:
 					<Nav className="header-props-sm" navbar>
-						<HelpButton/>
+						<HelpButton />
 						<ThemeButton/>
 						{HeaderService.Items.map((item, idx) => (
 							<NavItem key={idx}>

src/containers/Header/reducer.js

@@ -1,17 +1,17 @@
-import { HELP_CONTENT, SET_BREADCRUMB_NAME } from '../../actions';
+import { SET_HELP_PATH, SET_BREADCRUMB_NAME } from '../../actions';
 
 const initialState = {
-	content: "",
+	helpPath: "",
 	breadcrumbName: undefined
 }
 
 export default (state = initialState, action) => {
 
 	switch (action.type) {
-		case HELP_CONTENT:
+		case SET_HELP_PATH:
 			return {
 				...state,
-				content: action.content
+				helpPath: action.helpPath
 			}
 
 		case SET_BREADCRUMB_NAME: