Refactor HelpComponent #418

aringocode · 2023-05-11T09:16:25Z

Changes

Add HelpCache
Add CHANGELOG

refactor docs

I tested it:
https://github.com/TeskaLabs/asab-webui/assets/65866093/9a4ac84f-d488-4fe9-8302-bf788eb2abfb

Pe5h4 · 2023-05-11T14:56:50Z

src/services/HelpService.js

-		} else {
-			pathWithExtension = `${path}.json`
+		if (this.HelpCache[path] != undefined) {
+			if (this.HelpCache[path] != "") {


@Aringoaway I was thinking, do we really need this condition? Seems redundant to me, because we are setting an empty string as a value to the cache, if the content has not been retrieved

asab-webui/src/services/HelpService.js

Line 45 in 8549b9a

this.HelpCache[path] = "";

So I suggest a refactoring

if (this.HelpCache[path] != undefined) { this.App.Store.dispatch({ type: HELP_CONTENT, content: this.HelpCache[path] }); return; }

aringocode · 2023-05-31T06:34:03Z

helpFrame.mp4

Pe5h4

@Aringoaway Can I see also video with network in console? I want to see, if the iframe url is triggered only when ? button is pressed

Pe5h4 · 2023-05-31T13:06:49Z

src/services/HelpService.js

@@ -8,31 +8,11 @@ export default class HelpService extends Service {
 	}

 	async setData(path) {


@Aringoaway It does not have to be async since there is no async action

@Aringoaway btw. setData is not a good name for it, since all you do is setting the path

Pe5h4 · 2023-05-31T13:14:13Z

Otherwise it looks good!

aringocode · 2023-05-31T15:16:23Z

@Aringoaway Can I see also video with network in console? I want to see, if the iframe url is triggered only when ? button is pressed
@Pe5h4 Yes, triggered only when ? is passed

callFrame.mp4

Pe5h4 · 2023-05-31T15:42:45Z

src/containers/Application.js

@@ -445,14 +445,14 @@ class Application extends Component {

 	addHelpButton(path) {
 		useEffect(() => {
-			this.HelpService.setData(path);
+			this.HelpService.setPath(path);


@Aringoaway Do we actually need the HelpService then? we can store the path directly to the store I assume

this.Store.dispatch({ type: HELP_CONTENT, path: path });

I agree. That's a great idea.

Pe5h4

@Aringoaway And this https://github.com/TeskaLabs/asab-webui/pull/418/files#diff-31d3784ef11656fbccbce9b6b554c572b43dfad75c897ef7fa510ba7a443735fR98 should be refactored to this.ReduxService.addReducer("header", headerReducer);

Pe5h4 · 2023-06-01T15:55:18Z

src/containers/Application.js

@@ -447,14 +445,17 @@ class Application extends Component {

 	addHelpButton(path) {
 		useEffect(() => {
-			this.HelpService.setData(path);
+			this.Store.dispatch({
+				type: HELP_CONTENT,


@Aringoaway type should be SET_HELP_CONTENT_PATH or something similar as we spoke of about on standup

Pe5h4 · 2023-06-01T15:56:15Z

src/containers/Application.js

-			this.HelpService.setData(path);
+			this.Store.dispatch({
+				type: HELP_CONTENT,
+				path: path


@Aringoaway should be somethng like helpContentPath: path

Pe5h4 · 2023-06-01T15:56:52Z

src/containers/Header/HelpButton.js

@@ -10,8 +10,9 @@ export default function HelpButton() {

    const [modal, setModal] = useState(false);

-    const content = useSelector(state => state?.helpButton.content);
-    if ((content == undefined) || (content == "")) return null;
+    const path = useSelector(state => state?.helpButton.path);


@Aringoaway should be const path = useSelector(state => state?.header.helpContentPath); as we spoke of on standup

Pe5h4 · 2023-06-01T15:57:19Z

src/containers/Header/reducer.js

@@ -1,14 +1,14 @@
 import { HELP_CONTENT } from '../../actions';

 const initialState = {
-    content: ""
+    path: ""


@Aringoaway helpContentPath

Pe5h4

@aringocode Minor thing, otherwise good!

Pe5h4 · 2023-06-26T15:34:11Z

src/containers/Application.js

@@ -447,14 +445,17 @@ class Application extends Component {

 	addHelpButton(path) {
 		useEffect(() => {
-			this.HelpService.setData(path);
+			this.Store.dispatch({
+				type: HELP_CONTENT,


@aringocode Set type to SET_HELP_PATH

Pe5h4 · 2023-06-27T10:21:06Z

src/containers/Header/reducer.js

@@ -1,4 +1,4 @@
-import { HELP_CONTENT, SET_BREADCRUMB_NAME } from '../../actions';
+import { SET_HELP_PATH, SET_BREADCRUMB_NAME } from '../../actions';

 const initialState = {
 	content: "",


@aringocode Shouldnt here be some default content as we spoke of after the standup? Meaning https://docs.teskalabs.com/logman.io/ or https://docs.teskalabs.com/logman.io/user/ or so...

Btw. can you please rename content to path? Since its not content any longer, but path/url

aringocode · 2023-07-04T07:16:47Z

@Pe5h4 Can you review pls?

lmio-webui-HelpButton.mp4

seacat-admin-webui-HelpButton.mp4

Pe5h4 · 2023-07-04T07:30:17Z

src/containers/Header/HelpButton.js

+	const title = useSelector(state => state.config?.title);
+
+	useEffect(() => {
+		if (location.pathname.includes("auth") || (title == "SeaCat Admin")) {


@aringocode I dont think this is correct. We want to make it more variable in case of what URL we are going to insert. So what we want to pass is the whole url, meaning https://docs.teskalabs.com/logman.io/user/whatever since the help component may be used also for some external documentation. I suggest to remove all logman.io / auth/Seacat Admin specifications. If nothing will be passed, then we dont display the HelpButton

You will also get rid of this useEffect and other unnecessary code about switching the paths

@Pe5h4 ok, I refactored it

helpButton.mp4

Pe5h4 · 2023-07-04T07:31:29Z

doc/help-button.md


 #### Example code

 ```javascript
 export function Container(props) {
-	props.app.addHelpButton("Path/to/help-content");
+	props.app.addHelpButton("Path/part/to/documentation");


@aringocode this should be

props.app.addHelpButton("https://docs.teskalabs.com/path/to/documentation");

Pe5h4

@aringocode Alright, looks good, only minor change request

Pe5h4 · 2023-07-04T12:49:49Z

src/containers/Header/HelpButton.js

+						</Button>
+					</CardHeader>
+					<CardBody>
+						<iframe className="help-iframe" src={`https://docs.teskalabs.com/logman.io/user/${path}`} title=""/>


@aringocode Here you want to have just

<iframe className="help-iframe" src={path} />

@Pe5h4 Ohhh...., I understand) can you review again pls?))

Pe5h4 · 2023-07-04T13:32:05Z

src/containers/Application.js

-			this.HelpService.setData(path);
+			this.Store.dispatch({
+				type: SET_HELP_PATH,
+				path: path


@aringocode Alright, sorry for requesting changes all over again :D Here the path should be renamed to helpPath or helpContentPath or something similar. path is just too general

helpPath: path

@Pe5h4 ok, i renamed it

Pe5h4

@aringocode Alright, good

add helpcache

bcec867

aringocode self-assigned this May 11, 2023

update CHANGELOG.md

8549b9a

aringocode requested a review from Pe5h4 May 11, 2023 09:22

Pe5h4 requested changes May 11, 2023

View reviewed changes

akonshina added 3 commits May 22, 2023 09:53

resolve conflict

ca2c9e4

step 1, comment old code, uncomment iframe

bb37a34

refacrot to iframe

77e3a5f

aringocode requested a review from Pe5h4 May 31, 2023 06:34

remove comments, update changelog

ffd6138

Pe5h4 requested changes May 31, 2023

View reviewed changes

aringocode requested a review from Pe5h4 May 31, 2023 15:18

feedback

ef1e947

Pe5h4 requested changes May 31, 2023

View reviewed changes

akonshina added 2 commits May 31, 2023 17:54

remove helpservice

aa31c0c

update chanelog

0d30ce6

aringocode requested a review from Pe5h4 May 31, 2023 15:56

resolve conflict

1e24dd5

Pe5h4 requested changes Jun 1, 2023

View reviewed changes

akonshina added 5 commits June 8, 2023 12:26

resolve conflict

3f0a14a

resolve conflict

d1658e2

resolve conflicts

4a48f94

fix doc for helpbutton

52fd367

refactor spaces to Tab ident

a05eba9

aringocode changed the title ~~Add HelpCache~~ Refactor HelpComponent Jun 26, 2023

aringocode requested a review from Pe5h4 June 26, 2023 08:54

Pe5h4 requested changes Jun 26, 2023

View reviewed changes

rename redux cation

7d7268a

aringocode requested a review from Pe5h4 June 27, 2023 08:03

Pe5h4 requested changes Jun 27, 2023

View reviewed changes

akonshina added 6 commits June 27, 2023 14:52

update url

22c7064

rename content to path

eefa988

Merge branch 'master' into bugfix/add-help-cache

907fd87

Merge branch 'master' into bugfix/add-help-cache

a65b5a7

add props location for specify docsPart

ed09f83

add title application

bc5a3e9

aringocode requested a review from Pe5h4 July 4, 2023 07:15

Pe5h4 requested changes Jul 4, 2023

View reviewed changes

akonshina added 2 commits July 4, 2023 10:36

chage docs example for adding path for addHelpButton

cc898d9

return changes back

ce2609b

aringocode requested a review from Pe5h4 July 4, 2023 11:39

Pe5h4 requested changes Jul 4, 2023

View reviewed changes

change url to path variable

43c37b7

aringocode requested a review from Pe5h4 July 4, 2023 13:15

Pe5h4 requested changes Jul 4, 2023

View reviewed changes

rename path to pathHelp

0b0db5b

aringocode requested a review from Pe5h4 July 4, 2023 13:53

Pe5h4 approved these changes Jul 5, 2023

View reviewed changes

aringocode marked this pull request as ready for review July 6, 2023 07:45

aringocode merged commit 0a1b9ce into master Jul 6, 2023

aringocode deleted the bugfix/add-help-cache branch July 6, 2023 07:45

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refactor HelpComponent #418

Refactor HelpComponent #418

aringocode commented May 11, 2023 •

edited

Loading

Pe5h4 May 11, 2023

aringocode commented May 31, 2023

Pe5h4 left a comment

Pe5h4 May 31, 2023

Pe5h4 May 31, 2023

Pe5h4 commented May 31, 2023

aringocode commented May 31, 2023 •

edited

Loading

Pe5h4 May 31, 2023

aringocode May 31, 2023

Pe5h4 left a comment

Pe5h4 Jun 1, 2023

Pe5h4 Jun 1, 2023

Pe5h4 Jun 1, 2023

Pe5h4 Jun 1, 2023

Pe5h4 left a comment

Pe5h4 Jun 26, 2023

Pe5h4 Jun 27, 2023

aringocode commented Jul 4, 2023

Pe5h4 Jul 4, 2023

Pe5h4 Jul 4, 2023

aringocode Jul 4, 2023

Pe5h4 Jul 4, 2023

Pe5h4 left a comment

Pe5h4 Jul 4, 2023

aringocode Jul 4, 2023

Pe5h4 Jul 4, 2023

Pe5h4 Jul 4, 2023

aringocode Jul 4, 2023

Pe5h4 left a comment

		@@ -8,31 +8,11 @@ export default class HelpService extends Service {
		}

		async setData(path) {

Refactor HelpComponent #418

Refactor HelpComponent #418

Conversation

aringocode commented May 11, 2023 • edited Loading

Changes

Choose a reason for hiding this comment

aringocode commented May 31, 2023

Pe5h4 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Pe5h4 commented May 31, 2023

aringocode commented May 31, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Pe5h4 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Pe5h4 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aringocode commented Jul 4, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Pe5h4 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Pe5h4 left a comment

Choose a reason for hiding this comment

aringocode commented May 11, 2023 •

edited

Loading

aringocode commented May 31, 2023 •

edited

Loading