Refactor HelpComponent

CHANGELOG.md

@@ -94,6 +94,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("Path/part/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/containers/Application.js

@@ -23,7 +23,6 @@ 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';
@@ -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: HELP_CONTENT,
+				content: path
+			});
 			return () => {
 				this.Store.dispatch({
 					type: HELP_CONTENT,
 					content: ""
 				})
 			}
-		}, [])
+		}, []);
 	}
 
 	// Method for overloading breadcrumb name

src/containers/Header/HelpButton.js

@@ -6,45 +6,43 @@ 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 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>
+						<iframe className="help-iframe" src={`https://docs.teskalabs.com/logman.io/user/${content}`} title=""/>
+					</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;
+	}
 
 }