Skip to content

Fix GitHub issue link in support dropdown menu not working in all cases #1042

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Mar 21, 2025
Merged

Fix GitHub issue link in support dropdown menu not working in all cases #1042

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
542b663
Fix random GitHub issue linking issue
josh-wong Mar 21, 2025
e34df55
Make cosmetic changes to syntax
josh-wong Mar 21, 2025
66bb320
Change announcement link to absolute
josh-wong Mar 21, 2025
4827be6
Merge branch 'main' into feature/fix-github-issue-link
josh-wong Mar 21, 2025
7d02e85
Fix announcement link
josh-wong Mar 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docusaurus.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -513,8 +513,8 @@ const config = {
announcementBar: {
id: 'new_version',
content:
'<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>',
// '<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>',
'<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>.',
// '<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>',
backgroundColor: '#2673BB',
textColor: '#FFFFFF',
isCloseable: false,
Expand Down
169 changes: 85 additions & 84 deletions src/components/Support/SupportDropdownMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
import React, { useState, useEffect, useRef, lazy, Suspense, MouseEvent } from 'react';
import { useDoc } from '@docusaurus/plugin-content-docs/client';
import React, { useState, useEffect, useRef, lazy, Suspense, MouseEvent } from "react";
import { useDoc } from "@docusaurus/plugin-content-docs/client";
import { useLocation } from "@docusaurus/router";

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

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

Expand All @@ -23,14 +24,60 @@ const SupportDropdownMenu: React.FC = () => {
if (typeof window !== "undefined") {
const currentUrl = `https://scalardb.scalar-labs.com${location.pathname}`;
localStorage.setItem("currentUrl", currentUrl);

const savedUrl = localStorage.getItem("currentUrl");
if (savedUrl) {
setStoredUrl(savedUrl);
}
setStoredUrl(currentUrl);
}
}, [location]);

useEffect(() => {
if (typeof window !== "undefined") {
const repoUrl = "https://github.com/scalar-labs/docs-scalardb/issues/new";
const issueTitle = encodeURIComponent(
isJapanese ? `フィードバック: \`${docTitle}\` ページ` : `Feedback: \`${docTitle}\` page`
);

const issueBody = encodeURIComponent(
isJapanese
? `**ドキュメントページの URL:** ${window.location.href.replace(/#.*$/, '')}

## 期待される動作

どのような動作を期待しましたか？

## 問題の説明

問題の内容をわかりやすく説明してください。

### 再現手順 (該当する場合)

問題を再現できる場合、手順を記載してください。

### スクリーンショット (該当する場合)

該当する場合は、スクリーンショットを添付してください。`
: `**Documentation page URL:** ${window.location.href.replace(/#.*$/, '')}

## Expected behavior

What did you expect to happen?

## Describe the problem

Please provide a clear and concise description of what the issue is.

### Steps to reproduce (if applicable)

If the issue is reproducible, please list the steps to reproduce it.

### Screenshots (if applicable)

If applicable, add screenshots to help explain your problem.`
);

const issueUrl = `${repoUrl}?title=${issueTitle}&body=${issueBody}&labels=documentation`;
setGithubIssueUrl(issueUrl);
}
}, [isJapanese, docTitle]);

const toggleDropdown = () => {
setIsOpen((prev) => !prev);
};
Expand All @@ -45,67 +92,23 @@ const SupportDropdownMenu: React.FC = () => {
setIsModalOpen(false);
};

const handleSupportClick = () => {
const handleSupportClick = (event: MouseEvent<HTMLAnchorElement>) => {
event.preventDefault();
if (typeof window !== "undefined") {
const finalUrl = storedUrl || `https://scalardb.scalar-labs.com${location.pathname}`;
const reportUrl = `https://support.scalar-labs.com/hc/ja/requests/new?ticket_form_id=8641483507983&tf_11847415366927=${encodeURIComponent(finalUrl)}`;

window.open(reportUrl, "_blank");
}
};

const githubIssueUrl: string = typeof window !== "undefined" ? (() => {
const repoUrl = "https://github.com/scalar-labs/docs-scalardb/issues/new";
const issueTitle = encodeURIComponent(
isJapanese ? `フィードバック: \`${docTitle}\` ページ` : `Feedback: \`${docTitle}\` page`
);

const issueBody = encodeURIComponent(
isJapanese
? `**ドキュメントページの URL:** ${window.location.href.replace(/#.*$/, '')}

## 期待される動作

どのような動作を期待しましたか？

## 問題の説明

問題の内容をわかりやすく説明してください。

### 再現手順 (該当する場合)

問題を再現できる場合、手順を記載してください。

### スクリーンショット (該当する場合)

該当する場合は、スクリーンショットを添付してください。
`
: `**Documentation page URL:** ${window.location.href.replace(/#.*$/, '')}

## Expected behavior

What did you expect to happen?

## Describe the problem

Please provide a clear and concise description of what the issue is.

### Steps to reproduce (if applicable)

If the issue is reproducible, please list the steps to reproduce it.

### Screenshots (if applicable)

If applicable, add screenshots to help explain your problem.
`
);

const issueUrl = `${repoUrl}?title=${issueTitle}&body=${issueBody}&labels=documentation`;

console.log("GitHub Issue URL: ", issueUrl); // Debugging line

return issueUrl;
})() : "#";
const handleGitHubClick = (event: MouseEvent<HTMLAnchorElement>) => {
event.preventDefault();
if (githubIssueUrl !== "#") {
window.open(githubIssueUrl, "_blank", "noopener,noreferrer");
} else {
console.error("GitHub issue URL is not set correctly.");
}
};

useEffect(() => {
function handleClickOutside(event: MouseEvent | Event) {
Expand All @@ -126,32 +129,30 @@ If applicable, add screenshots to help explain your problem.
return (
<div className="supportDropdown" ref={dropdownRef}>
<button className="supportDropBtn" onMouseOver={toggleDropdown}>
{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>
{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>
</button>

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

{isModalOpen && (
<Suspense fallback={<div>Loading...</div>}>
Expand Down