Skip to content

Commit 6435eb5

Browse files
josh-wongjosh-wong
authored
Fix GitHub issue link in support dropdown menu not working in all cases (#1042)
* Fix random GitHub issue linking issue On some pages, the GitHub issue link wouldn't open. This commit implements the linking mechanism in a slightly different way. * Make cosmetic changes to syntax * Change announcement link to absolute The Docusaurus docs site uses an absolute link, so I think we should follow that as well. * Fix announcement link
1 parent 5f285af commit 6435eb5

File tree

2 files changed

+87
-86
lines changed

2 files changed

+87
-86
lines changed

‎docusaurus.config.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -513,8 +513,8 @@ const config = {
513513
announcementBar: {
514514
id: 'new_version',
515515
content:
516-
'<b>Announcing the release of ScalarDB 3.15!🚀 For details on what\'s included in this new version, see the <a target="_self" href="/docs/latest/releases/release-notes">release notes</a>.</b>',
517-
// '<b>Announcing the release of ScalarDB X.X!🚀 For details on what\'s included in this new version, see the <a target="_self" href="/docs/latest/releases/release-notes">release notes</a>.</b>',
516+
'<b>Announcing the release of ScalarDB 3.15!🚀 For details on what\'s included in this new version, see the <a target="_self" href="https://scalardb.scalar-labs.com/docs/latest/releases/release-notes">release notes</a>.',
517+
// '<b>Announcing the release of ScalarDB X.X!🚀 For details on what\'s included in this new version, see the <a target="_self" rel="noopener noreferrer" href="/docs/latest/releases/release-notes">release notes</a>.<b>',
518518
backgroundColor: '#2673BB',
519519
textColor: '#FFFFFF',
520520
isCloseable: false,

‎src/components/Support/SupportDropdownMenu.tsx‎

Lines changed: 85 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
1-
import React, { useState, useEffect, useRef, lazy, Suspense, MouseEvent } from 'react';
2-
import { useDoc } from '@docusaurus/plugin-content-docs/client';
1+
import React, { useState, useEffect, useRef, lazy, Suspense, MouseEvent } from "react";
2+
import { useDoc } from "@docusaurus/plugin-content-docs/client";
33
import { useLocation } from "@docusaurus/router";
44

55
// Lazy-load AssistantModal.
6-
const AssistantModal = lazy(() => import('./AssistantModal'));
6+
const AssistantModal = lazy(() => import("./AssistantModal"));
77

88
const SupportDropdownMenu: React.FC = () => {
99
const [isOpen, setIsOpen] = useState<boolean>(false);
1010
const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
1111
const [storedUrl, setStoredUrl] = useState<string | null>(null);
12+
const [githubIssueUrl, setGithubIssueUrl] = useState<string>("#");
1213
const dropdownRef = useRef<HTMLDivElement | null>(null);
1314
const location = useLocation();
1415

@@ -23,14 +24,60 @@ const SupportDropdownMenu: React.FC = () => {
2324
if (typeof window !== "undefined") {
2425
const currentUrl = `https://scalardb.scalar-labs.com${location.pathname}`;
2526
localStorage.setItem("currentUrl", currentUrl);
26-
27-
const savedUrl = localStorage.getItem("currentUrl");
28-
if (savedUrl) {
29-
setStoredUrl(savedUrl);
30-
}
27+
setStoredUrl(currentUrl);
3128
}
3229
}, [location]);
3330

31+
useEffect(() => {
32+
if (typeof window !== "undefined") {
33+
const repoUrl = "https://github.com/scalar-labs/docs-scalardb/issues/new";
34+
const issueTitle = encodeURIComponent(
35+
isJapanese ? `フィードバック: \`${docTitle}\` ページ` : `Feedback: \`${docTitle}\` page`
36+
);
37+
38+
const issueBody = encodeURIComponent(
39+
isJapanese
40+
? `**ドキュメントページの URL:** ${window.location.href.replace(/#.*$/, '')}
41+
42+
## 期待される動作
43+
44+
どのような動作を期待しましたか？
45+
46+
## 問題の説明
47+
48+
問題の内容をわかりやすく説明してください。
49+
50+
### 再現手順 (該当する場合)
51+
52+
問題を再現できる場合、手順を記載してください。
53+
54+
### スクリーンショット (該当する場合)
55+
56+
該当する場合は、スクリーンショットを添付してください。`
57+
: `**Documentation page URL:** ${window.location.href.replace(/#.*$/, '')}
58+
59+
## Expected behavior
60+
61+
What did you expect to happen?
62+
63+
## Describe the problem
64+
65+
Please provide a clear and concise description of what the issue is.
66+
67+
### Steps to reproduce (if applicable)
68+
69+
If the issue is reproducible, please list the steps to reproduce it.
70+
71+
### Screenshots (if applicable)
72+
73+
If applicable, add screenshots to help explain your problem.`
74+
);
75+
76+
const issueUrl = `${repoUrl}?title=${issueTitle}&body=${issueBody}&labels=documentation`;
77+
setGithubIssueUrl(issueUrl);
78+
}
79+
}, [isJapanese, docTitle]);
80+
3481
const toggleDropdown = () => {
3582
setIsOpen((prev) => !prev);
3683
};
@@ -45,67 +92,23 @@ const SupportDropdownMenu: React.FC = () => {
4592
setIsModalOpen(false);
4693
};
4794

48-
const handleSupportClick = () => {
95+
const handleSupportClick = (event: MouseEvent<HTMLAnchorElement>) => {
96+
event.preventDefault();
4997
if (typeof window !== "undefined") {
5098
const finalUrl = storedUrl || `https://scalardb.scalar-labs.com${location.pathname}`;
5199
const reportUrl = `https://support.scalar-labs.com/hc/ja/requests/new?ticket_form_id=8641483507983&tf_11847415366927=${encodeURIComponent(finalUrl)}`;
52-
53100
window.open(reportUrl, "_blank");
54101
}
55102
};
56103

57-
const githubIssueUrl: string = typeof window !== "undefined" ? (() => {
58-
const repoUrl = "https://github.com/scalar-labs/docs-scalardb/issues/new";
59-
const issueTitle = encodeURIComponent(
60-
isJapanese ? `フィードバック: \`${docTitle}\` ページ` : `Feedback: \`${docTitle}\` page`
61-
);
62-
63-
const issueBody = encodeURIComponent(
64-
isJapanese
65-
? `**ドキュメントページの URL:** ${window.location.href.replace(/#.*$/, '')}
66-
67-
## 期待される動作
68-
69-
どのような動作を期待しましたか？
70-
71-
## 問題の説明
72-
73-
問題の内容をわかりやすく説明してください。
74-
75-
### 再現手順 (該当する場合)
76-
77-
問題を再現できる場合、手順を記載してください。
78-
79-
### スクリーンショット (該当する場合)
80-
81-
該当する場合は、スクリーンショットを添付してください。
82-
`
83-
: `**Documentation page URL:** ${window.location.href.replace(/#.*$/, '')}
84-
85-
## Expected behavior
86-
87-
What did you expect to happen?
88-
89-
## Describe the problem
90-
91-
Please provide a clear and concise description of what the issue is.
92-
93-
### Steps to reproduce (if applicable)
94-
95-
If the issue is reproducible, please list the steps to reproduce it.
96-
97-
### Screenshots (if applicable)
98-
99-
If applicable, add screenshots to help explain your problem.
100-
`
101-
);
102-
103-
const issueUrl = `${repoUrl}?title=${issueTitle}&body=${issueBody}&labels=documentation`;
104-
105-
console.log("GitHub Issue URL: ", issueUrl); // Debugging line
106-
107-
return issueUrl;
108-
})() : "#";
104+
const handleGitHubClick = (event: MouseEvent<HTMLAnchorElement>) => {
105+
event.preventDefault();
106+
if (githubIssueUrl !== "#") {
107+
window.open(githubIssueUrl, "_blank", "noopener,noreferrer");
108+
} else {
109+
console.error("GitHub issue URL is not set correctly.");
110+
}
111+
};
109112

110113
useEffect(() => {
111114
function handleClickOutside(event: MouseEvent | Event) {
@@ -126,32 +129,30 @@ If applicable, add screenshots to help explain your problem.
126129
return (
127130
<div className="supportDropdown" ref={dropdownRef}>
128131
<button className="supportDropBtn" onMouseOver={toggleDropdown}>
129-
{isJapanese ? "何かお困りですか?" : "Need some help?"}<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="m12 16l-6-6h12z"/></svg>
132+
{isJapanese ? "何かお困りですか?" : "Need some help?"}
133+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
134+
<path fill="currentColor" d="m12 16l-6-6h12z" />
135+
</svg>
130136
</button>
131137

132-
<div className="supportDropdownContent">
133-
<div>
134-
<a href="#" onClick={handleSupportClick}>
135-
<b>{isJapanese ? "テクニカルサポートに問い合わせ" : "Contact technical support"}</b><br />
136-
{isJapanese ? "商用ライセンスをご契約のお客様のみご利用いただけます。" : "Available only to customers with a commercial license."}
137-
</a>
138-
</div>
139-
<hr />
140-
{/* <a href="https://stackoverflow.com/questions/tagged/scalardb" target="_blank">
141-
<b>{isJapanese ? "Stack Overflow をチェック" : "Check Stack Overflow"}</b><br />
142-
{isJapanese ? "すべてのユーザーがご利用いただけます。" : "Available to all users."}
143-
</a>
144-
<hr /> */}
145-
<a href="#" onClick={openModal}>
146-
<b>{isJapanese ? "AI に聞く (試験運用中)" : "Ask AI (experimental)"}</b><br />
147-
{isJapanese ? "Scalar Membership Programにご参加の方のみご利用いただけます。" : "Available only to members of the Scalar Membership Program."}
148-
</a>
149-
<hr />
150-
<a href={githubIssueUrl} target="_blank">
151-
<b>{isJapanese ? "ドキュメントの問題を報告" : "Report doc issue"}</b><br />
152-
{isJapanese ? "このページについて何かお気づきの点がありましたら、こちらから報告いただけます。" : "If you have any feedback about this page, please submit an issue."}
138+
<div className="supportDropdownContent">
139+
<div>
140+
<a href="#" onClick={handleSupportClick}>
141+
<b>{isJapanese ? "テクニカルサポートに問い合わせ" : "Contact technical support"}</b><br />
142+
{isJapanese ? "商用ライセンスをご契約のお客様のみご利用いただけます。" : "Available only to customers with a commercial license."}
153143
</a>
154144
</div>
145+
<hr />
146+
<a href="#" onClick={openModal}>
147+
<b>{isJapanese ? "AI に聞く (試験運用中)" : "Ask AI (experimental)"}</b><br />
148+
{isJapanese ? "Scalar Membership Programにご参加の方のみご利用いただけます。" : "Available only to members of the Scalar Membership Program."}
149+
</a>
150+
<hr />
151+
<a href="#" onClick={handleGitHubClick}>
152+
<b>{isJapanese ? "ドキュメントの問題を報告" : "Report doc issue"}</b><br />
153+
{isJapanese ? "このページについて何かお気づきの点がありましたら、こちらから報告いただけます。" : "If you have any feedback about this page, please submit an issue."}
154+
</a>
155+
</div>
155156

156157
{isModalOpen && (
157158
<Suspense fallback={<div>Loading...</div>}>

0 commit comments

Comments
 (0)