Add link to docs for missing metrics metric.

Closes #10528.
ICTU · Dec 23, 2024 · 05beff4 · 05beff4
1 parent 76de9b2
commit 05beff4
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 35 deletions.
diff --git a/components/frontend/src/dashboard/ExportCard.js b/components/frontend/src/dashboard/ExportCard.js
@@ -4,6 +4,7 @@ import { bool, string } from "prop-types"
 import { Card, List } from "semantic-ui-react"
 
 import { childrenPropType, datePropType, reportPropType } from "../sharedPropTypes"
+import { DOCUMENTATION_URL } from "../utils"
 
 function ExportCardItem({ children, url }) {
     const item = children
@@ -43,9 +44,7 @@ export function ExportCard({ lastUpdate, report, reportDate, isOverview = false
         </List.Item>,
         <List.Item key={"version"} data-testid={"version"}>
             <List.Content verticalAlign={"middle"}>
-                <ExportCardItem
-                    url={`https://quality-time.readthedocs.io/en/v${process.env.REACT_APP_VERSION}/changelog.html`}
-                >
+                <ExportCardItem url={`${DOCUMENTATION_URL}/changelog.html`}>
                     <em>Quality-time</em> v{process.env.REACT_APP_VERSION}
                 </ExportCardItem>
             </List.Content>

diff --git a/components/frontend/src/header_footer/Footer.js b/components/frontend/src/header_footer/Footer.js
@@ -22,6 +22,7 @@ import {
 import { element, object, oneOfType, string } from "prop-types"
 
 import { alignmentPropType, childrenPropType, datePropType, reportPropType } from "../sharedPropTypes"
+import { DOCUMENTATION_URL, REPOSITORY_URL } from "../utils"
 
 function FooterItem({ children, icon, url }) {
     const color = "silver"
@@ -69,16 +70,13 @@ function AboutAppColumn() {
             <FooterItem icon={<ScienceIcon />} url="https://www.ictu.nl/about-us">
                 Created by ICTU
             </FooterItem>
-            <FooterItem icon={<CopyrightIcon />} url="https://github.com/ICTU/quality-time/blob/master/LICENSE">
+            <FooterItem icon={<CopyrightIcon />} url={`${REPOSITORY_URL}/blob/master/LICENSE`}>
                 License
             </FooterItem>
-            <FooterItem
-                icon={<HistoryIcon />}
-                url={`https://quality-time.readthedocs.io/en/v${process.env.REACT_APP_VERSION}/changelog.html`}
-            >
+            <FooterItem icon={<HistoryIcon />} url={`${DOCUMENTATION_URL}/changelog.html`}>
                 Changelog
             </FooterItem>
-            <FooterItem icon={<GitHubIcon />} url="https://github.com/ICTU/quality-time">
+            <FooterItem icon={<GitHubIcon />} url={REPOSITORY_URL}>
                 Source code
             </FooterItem>
         </FooterColumn>
@@ -88,22 +86,16 @@ function AboutAppColumn() {
 function SupportColumn() {
     return (
         <FooterColumn header="Support">
-            <FooterItem
-                icon={<MenuBookIcon />}
-                url={`https://quality-time.readthedocs.io/en/v${process.env.REACT_APP_VERSION}/`}
-            >
+            <FooterItem icon={<MenuBookIcon />} url={DOCUMENTATION_URL}>
                 Documentation
             </FooterItem>
-            <FooterItem
-                icon={<PersonIcon />}
-                url={`https://quality-time.readthedocs.io/en/v${process.env.REACT_APP_VERSION}/usage.html`}
-            >
+            <FooterItem icon={<PersonIcon />} url={`${DOCUMENTATION_URL}/usage.html`}>
                 User manual
             </FooterItem>
-            <FooterItem icon={<BugReportIcon />} url="https://github.com/ICTU/quality-time/issues">
+            <FooterItem icon={<BugReportIcon />} url={`${REPOSITORY_URL}/issues`}>
                 Known issues
             </FooterItem>
-            <FooterItem icon={<FeedbackIcon />} url="https://github.com/ICTU/quality-time/issues/new">
+            <FooterItem icon={<FeedbackIcon />} url={`${REPOSITORY_URL}/issues/new`}>
                 Report an issue
             </FooterItem>
         </FooterColumn>

diff --git a/components/frontend/src/metric/MetricTypeHeader.js b/components/frontend/src/metric/MetricTypeHeader.js
@@ -1,10 +1,9 @@
 import { Header } from "../semantic_ui_react_wrappers"
 import { metricTypePropType } from "../sharedPropTypes"
-import { slugify } from "../utils"
+import { referenceDocumentationURL } from "../utils"
 import { ReadTheDocsLink } from "../widgets/ReadTheDocsLink"
 
 export function MetricTypeHeader({ metricType }) {
-    const url = `https://quality-time.readthedocs.io/en/v${process.env.REACT_APP_VERSION}/reference.html${slugify(metricType.name)}`
     const howToConfigure = metricType.documentation
         ? " for specific information on how to configure this metric type."
         : ""
@@ -13,7 +12,7 @@ export function MetricTypeHeader({ metricType }) {
             <Header.Content>
                 {metricType.name}
                 <Header.Subheader>
-                    {metricType.description} <ReadTheDocsLink url={url} />
+                    {metricType.description} <ReadTheDocsLink url={referenceDocumentationURL(metricType.name)} />
                     {howToConfigure}
                 </Header.Subheader>
             </Header.Content>

diff --git a/components/frontend/src/source/Source.js b/components/frontend/src/source/Source.js
@@ -16,7 +16,7 @@ import {
     sourcePropType,
     stringsPropType,
 } from "../sharedPropTypes"
-import { getMetricName, getSourceName } from "../utils"
+import { getMetricName, getSourceName, referenceDocumentationURL } from "../utils"
 import { ButtonRow } from "../widgets/ButtonRow"
 import { DeleteButton } from "../widgets/buttons/DeleteButton"
 import { ReorderButtonGroup } from "../widgets/buttons/ReorderButtonGroup"
@@ -141,7 +141,6 @@ export function Source({
     const metricName = getMetricName(metric, dataModel)
     const connectionError = measurement_source?.connection_error || ""
     const parseError = measurement_source?.parse_error || ""
-    const referenceManualURL = `https://quality-time.readthedocs.io/en/v${process.env.REACT_APP_VERSION}/reference.html`
     const configErrorMessage = (
         <>
             <p>
@@ -152,11 +151,11 @@ export function Source({
             <ul>
                 <li>
                     Change the type of the metric (back) to a type that is supported by{" "}
-                    <HyperLink url={`${referenceManualURL}#${source.type}`}>{sourceName}</HyperLink>.
+                    <HyperLink url={referenceDocumentationURL(sourceName)}>{sourceName}</HyperLink>.
                 </li>
                 <li>
                     Change the type of this source to a type that supports{" "}
-                    <HyperLink url={`${referenceManualURL}#${metric.type}`}>{metricName}</HyperLink>.
+                    <HyperLink url={referenceDocumentationURL(metricName)}>{metricName}</HyperLink>.
                 </li>
                 <li>Move this source to another metric.</li>
                 <li>Remove this source altogether.</li>

diff --git a/components/frontend/src/source/SourceTypeHeader.js b/components/frontend/src/source/SourceTypeHeader.js
@@ -2,7 +2,7 @@ import { string } from "prop-types"
 
 import { Header, Label } from "../semantic_ui_react_wrappers"
 import { sourceTypePropType } from "../sharedPropTypes"
-import { slugify } from "../utils"
+import { referenceDocumentationURL } from "../utils"
 import { ReadTheDocsLink } from "../widgets/ReadTheDocsLink"
 import { Logo } from "./Logo"
 import { sourceTypeDescription } from "./SourceType"
@@ -12,7 +12,6 @@ export function SourceTypeHeader({ metricTypeId, sourceTypeId, sourceType }) {
     if (sourceType?.documentation?.generic || sourceType?.documentation?.[metricTypeId]) {
         howToConfigure = " for specific information on how to configure this source type."
     }
-    const url = `https://quality-time.readthedocs.io/en/v${process.env.REACT_APP_VERSION}/reference.html${slugify(sourceType.name)}`
     return (
         <Header>
             <Header.Content>
@@ -21,7 +20,7 @@ export function SourceTypeHeader({ metricTypeId, sourceTypeId, sourceType }) {
                 {sourceType.deprecated && <Label color="yellow">Deprecated</Label>}
                 <Header.Subheader>
                     {`${sourceTypeDescription(sourceType)} `}
-                    <ReadTheDocsLink url={url} />
+                    <ReadTheDocsLink url={referenceDocumentationURL(sourceType.name)} />
                     {howToConfigure}
                 </Header.Subheader>
             </Header.Content>

diff --git a/components/frontend/src/subject/SubjectTitle.js b/components/frontend/src/subject/SubjectTitle.js
@@ -8,7 +8,7 @@ import { DataModel } from "../context/DataModel"
 import { EDIT_REPORT_PERMISSION, ReadOnlyOrEditable } from "../context/Permissions"
 import { Header, Tab } from "../semantic_ui_react_wrappers"
 import { reportPropType, settingsPropType } from "../sharedPropTypes"
-import { getSubjectType, slugify } from "../utils"
+import { getSubjectType, referenceDocumentationURL } from "../utils"
 import { ButtonRow } from "../widgets/ButtonRow"
 import { DeleteButton } from "../widgets/buttons/DeleteButton"
 import { PermLinkButton } from "../widgets/buttons/PermLinkButton"
@@ -19,13 +19,12 @@ import { changelogTabPane, configurationTabPane } from "../widgets/TabPane"
 import { SubjectParameters } from "./SubjectParameters"
 
 function SubjectHeader({ subjectType }) {
-    const url = `https://quality-time.readthedocs.io/en/v${process.env.REACT_APP_VERSION}/reference.html${slugify(subjectType.name)}`
     return (
         <Header>
             <Header.Content>
                 {subjectType.name}
                 <Header.Subheader>
-                    {subjectType.description} <ReadTheDocsLink url={url} />
+                    {subjectType.description} <ReadTheDocsLink url={referenceDocumentationURL(subjectType.name)} />
                 </Header.Subheader>
             </Header.Content>
         </Header>

diff --git a/components/frontend/src/utils.js b/components/frontend/src/utils.js
@@ -15,6 +15,8 @@ import {
     subjectTypePropType,
 } from "./sharedPropTypes"
 
+export const DOCUMENTATION_URL = `https://quality-time.readthedocs.io/en/v${process.env.REACT_APP_VERSION}`
+export const REPOSITORY_URL = "https://github.com/ICTU/quality-time"
 export const MILLISECONDS_PER_HOUR = 60 * 60 * 1000
 const MILLISECONDS_PER_DAY = 24 * MILLISECONDS_PER_HOUR
 
@@ -420,9 +422,10 @@ export function dropdownOptions(options) {
     return options.map((option) => ({ key: option, text: option, value: option }))
 }
 
-export function slugify(name) {
-    // The hash isn't really part of the slug, but to prevent duplication it is included anyway
-    return `#${name?.toLowerCase().replaceAll(" ", "-").replaceAll("(", "").replaceAll(")", "").replaceAll("/", "")}`
+export function referenceDocumentationURL(name) {
+    // Return a URL to the documentation for the metric/subject/source name
+    const slug = `${name?.toLowerCase().replaceAll(" ", "-").replaceAll(/[()/]/g, "")}`
+    return `${DOCUMENTATION_URL}/reference.html#${slug}`
 }
 
 export function addCounts(object1, object2) {