19996954966

Committed 07 Dec 2025 01:19AM UTC coverage: 5.41% (-0.2%) from 5.567%

Build # 19996954966

Build Type

Pull #1407

github

Committed by

Betree

Commit Message

iterate

Pull Request Pull Request #1407: Dark mode

Run Details

43 of 1740 branches covered (2.47%)

Branch coverage included in aggregate %.

0 of 63 new or added lines in 13 files covered. (0.0%)

5 existing lines in 5 files now uncovered.

192 of 2604 relevant lines covered (7.37%)

0.18 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/app/components/Help/HelpPageContent.jsx

/* eslint-disable jsx-a11y/anchor-has-content */
/* eslint-disable jsx-a11y/heading-has-content */
import PropTypes from 'prop-types'
import React, { PureComponent } from 'react'
import Markdown from 'react-markdown'
import { connect } from 'react-redux'
import { Link } from 'react-router-dom'
import remarkGfm from 'remark-gfm'

import { isDownloadableFile, isExternal } from '../../lib/url_utils'
import { fetchHelpPage } from '../../state/help/effects'
import { reset } from '../../state/help/reducer'
import { ErrorView } from '../Utils/ErrorView'
import ExternalLinkNewTab from '../Utils/ExternalLinkNewTab'
import { LoadingFrame } from '../Utils/LoadingFrame'

@connect(
  (state) => ({
    markdownContent: state.Help.markdownContent,
    isLoading: state.Help.isLoading,
    error: state.Help.error,
    locale: state.UserPreferences.locale,
  }),
  { fetchHelpPage, reset },
)
class HelpPageContent extends PureComponent {
  constructor(props) {
    super(props)
  }

  componentDidMount() {
    this.props.fetchHelpPage(this.props.page)
  }

  componentDidUpdate(oldProps) {
    if (this.props.locale !== oldProps.locale || this.props.page !== oldProps.page) {
      this.props.fetchHelpPage(this.props.page)
    }
  }

  componentWillUnmount() {
    this.props.reset()
  }

  render() {
    if (this.props.isLoading) {
      return <LoadingFrame />
    }
    if (this.props.error) {
      return <ErrorView canGoBack={false} error={this.props.error} />
    }
    return (
      <Markdown
        className="content"
        remarkPlugins={[remarkGfm]}
        components={{
          h1: (props) => (
            <h1
              className="text-4xl mb-8 mt-12 text-gray-800 dark:text-foreground font-bold"
              {...props}
            />
          ),
          h2: (props) => (
            <h2
              className="text-3xl font-bold mt-8 mb-6 text-gray-700 dark:text-foreground"
              {...props}
            />
          ),
          h3: (props) => (
            <h3
              className="text-2xl font-bold mb-4 mt-6 text-gray-600 dark:text-foreground"
              {...props}
            />
          ),
          h4: (props) => (
            <h4
              className="text-xl mb-4 mt-6 text-gray-600 dark:text-foreground font-semibold"
              {...props}
            />
          ),
          p: (props) => (
            <p
              className="text-lg leading-relaxed text-gray-600 dark:text-foreground my-6"
              {...props}
            />
          ),
          ul: (props) => (
            <ul
              className="list-disc list-outside ml-6 mb-6 space-y-2 text-gray-600 dark:text-foreground"
              {...props}
            />
          ),
          ol: (props) => (
            <ol
              className="list-decimal list-outside ml-6 mb-6 space-y-2 text-gray-600 dark:text-foreground"
              {...props}
            />
          ),
          // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
          li: ({ node, ...props }) => <li className="leading-relaxed mb-2" {...props} />,
          // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
          blockquote: ({ node, ...props }) => (
            <blockquote
              className="border-l-4 border-blue-400 dark:border-blue-500 bg-blue-50 dark:bg-blue-950/30 text-gray-600 dark:text-foreground px-6 py-1 mb-6 rounded-r italic leading-relaxed"
              {...props}
            />
          ),
          // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
          code: ({ node, className, children, ...props }) => {
            return typeof children === 'string' && children.length < 30 ? (
              <code
                className="bg-gray-100 dark:bg-accent text-pink-600 dark:text-pink-400 px-2 py-0.5 rounded font-mono text-sm"
                {...props}
              >
                {children}
              </code>
            ) : (
              <blockquote
                className="border-l-4 border-blue-400 dark:border-blue-500 bg-blue-50 dark:bg-blue-950/30 text-gray-600 dark:text-foreground px-6 py-3 mb-6 rounded-r italic leading-relaxed"
                {...props}
              >
                {children}
              </blockquote>
            )
          },
          // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
          a: ({ node, href, ...props }) =>
            isExternal(window.location.href, href) || isDownloadableFile(href) ? (
              <ExternalLinkNewTab className="underline" href={href} {...props} />
            ) : (
              <Link className="underline" to={href} onClick={this.props.onLinkClick} {...props} />
            ),
          // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
          table: ({ node, ...props }) => (
            <div className="overflow-x-auto mb-6">
              <table
                className="min-w-full border-collapse bg-white dark:bg-background shadow-sm dark:shadow-md rounded-lg"
                {...props}
              />
            </div>
          ),
          // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
          thead: ({ node, ...props }) => (
            <thead
              className="bg-gray-50 dark:bg-accent border-b border-gray-200 dark:border-border"
              {...props}
            />
          ),
          // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
          tr: ({ node, ...props }) => (
            <tr
              className="border-b border-gray-100 dark:border-border hover:bg-gray-50 dark:hover:bg-accent transition-colors duration-150"
              {...props}
            />
          ),
          // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
          th: ({ node, ...props }) => (
            <th
              className="p-3 font-medium text-left text-gray-700 dark:text-foreground"
              {...props}
            />
          ),
          // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
          td: ({ node, ...props }) => (
            <td className="p-3 text-gray-600 dark:text-foreground" {...props} />
          ),
        }}
      >
        {this.props.markdownContent}
      </Markdown>
    )
  }
}

HelpPageContent.propTypes = {
  page: PropTypes.string.isRequired,
  onLinkClick: PropTypes.func,
}

export default HelpPageContent

1	/* eslint-disable jsx-a11y/anchor-has-content */
2	/* eslint-disable jsx-a11y/heading-has-content */
3	import PropTypes from 'prop-types'
4	import React, { PureComponent } from 'react'
5	import Markdown from 'react-markdown'
6	import { connect } from 'react-redux'
7	import { Link } from 'react-router-dom'
8	import remarkGfm from 'remark-gfm'
9
10	import { isDownloadableFile, isExternal } from '../../lib/url_utils'
11	import { fetchHelpPage } from '../../state/help/effects'
12	import { reset } from '../../state/help/reducer'
13	import { ErrorView } from '../Utils/ErrorView'
14	import ExternalLinkNewTab from '../Utils/ExternalLinkNewTab'
15	import { LoadingFrame } from '../Utils/LoadingFrame'
16
17	@connect(
18	(state) => ({	×
19	markdownContent: state.Help.markdownContent,
20	isLoading: state.Help.isLoading,
21	error: state.Help.error,
22	locale: state.UserPreferences.locale,
23	}),
24	{ fetchHelpPage, reset },
25	)
26	class HelpPageContent extends PureComponent {
27	constructor(props) {
28	super(props)	×
29	}
30
31	componentDidMount() {
32	this.props.fetchHelpPage(this.props.page)	×
33	}
34
35	componentDidUpdate(oldProps) {
36	if (this.props.locale !== oldProps.locale \|\| this.props.page !== oldProps.page) {	×
37	this.props.fetchHelpPage(this.props.page)	×
38	}
39	}
40
41	componentWillUnmount() {
42	this.props.reset()	×
43	}
44
45	render() {
46	if (this.props.isLoading) {	×
47	return <LoadingFrame />	×
48	}
49	if (this.props.error) {	×
50	return <ErrorView canGoBack={false} error={this.props.error} />	×
51	}
52	return (	×
53	<Markdown
54	className="content"
55	remarkPlugins={[remarkGfm]}
56	components={{
57	h1: (props) => (
NEW 58	<h1	×
59	className="text-4xl mb-8 mt-12 text-gray-800 dark:text-foreground font-bold"
60	{...props}
61	/>
62	),
63	h2: (props) => (
NEW 64	<h2	×
65	className="text-3xl font-bold mt-8 mb-6 text-gray-700 dark:text-foreground"
66	{...props}
67	/>
68	),
69	h3: (props) => (
NEW 70	<h3	×
71	className="text-2xl font-bold mb-4 mt-6 text-gray-600 dark:text-foreground"
72	{...props}
73	/>
74	),
75	h4: (props) => (
NEW 76	<h4	×
77	className="text-xl mb-4 mt-6 text-gray-600 dark:text-foreground font-semibold"
78	{...props}
79	/>
80	),
81	p: (props) => (
NEW 82	<p	×
83	className="text-lg leading-relaxed text-gray-600 dark:text-foreground my-6"
84	{...props}
85	/>
86	),
87	ul: (props) => (
NEW 88	<ul	×
89	className="list-disc list-outside ml-6 mb-6 space-y-2 text-gray-600 dark:text-foreground"
90	{...props}
91	/>
92	),
93	ol: (props) => (
94	<ol	×
95	className="list-decimal list-outside ml-6 mb-6 space-y-2 text-gray-600 dark:text-foreground"
96	{...props}
97	/>
98	),
99	// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
100	li: ({ node, ...props }) => <li className="leading-relaxed mb-2" {...props} />,	×
101	// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
102	blockquote: ({ node, ...props }) => (
103	<blockquote	×
104	className="border-l-4 border-blue-400 dark:border-blue-500 bg-blue-50 dark:bg-blue-950/30 text-gray-600 dark:text-foreground px-6 py-1 mb-6 rounded-r italic leading-relaxed"
105	{...props}
106	/>
107	),
108	// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
109	code: ({ node, className, children, ...props }) => {
110	return typeof children === 'string' && children.length < 30 ? (	×
111	<code
112	className="bg-gray-100 dark:bg-accent text-pink-600 dark:text-pink-400 px-2 py-0.5 rounded font-mono text-sm"
113	{...props}
114	>
115	{children}
116	</code>
117	) : (
118	<blockquote
119	className="border-l-4 border-blue-400 dark:border-blue-500 bg-blue-50 dark:bg-blue-950/30 text-gray-600 dark:text-foreground px-6 py-3 mb-6 rounded-r italic leading-relaxed"
120	{...props}
121	>
122	{children}
123	</blockquote>
124	)
125	},
126	// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
127	a: ({ node, href, ...props }) =>
128	isExternal(window.location.href, href) \|\| isDownloadableFile(href) ? (	×
129	<ExternalLinkNewTab className="underline" href={href} {...props} />
130	) : (
131	<Link className="underline" to={href} onClick={this.props.onLinkClick} {...props} />
132	),
133	// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
134	table: ({ node, ...props }) => (
135	<div className="overflow-x-auto mb-6">	×
136	<table
137	className="min-w-full border-collapse bg-white dark:bg-background shadow-sm dark:shadow-md rounded-lg"
138	{...props}
139	/>
140	</div>
141	),
142	// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
143	thead: ({ node, ...props }) => (
NEW 144	<thead	×
145	className="bg-gray-50 dark:bg-accent border-b border-gray-200 dark:border-border"
146	{...props}
147	/>
148	),
149	// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
150	tr: ({ node, ...props }) => (
151	<tr	×
152	className="border-b border-gray-100 dark:border-border hover:bg-gray-50 dark:hover:bg-accent transition-colors duration-150"
153	{...props}
154	/>
155	),
156	// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
157	th: ({ node, ...props }) => (
NEW 158	<th	×
159	className="p-3 font-medium text-left text-gray-700 dark:text-foreground"
160	{...props}
161	/>
162	),
163	// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
164	td: ({ node, ...props }) => (
NEW 165	<td className="p-3 text-gray-600 dark:text-foreground" {...props} />	×
166	),
167	}}
168	>
169	{this.props.markdownContent}
170	</Markdown>
171	)
172	}
173	}
174
175	HelpPageContent.propTypes = {	×
176	page: PropTypes.string.isRequired,
177	onLinkClick: PropTypes.func,
178	}
179
180	export default HelpPageContent

CaptainFact / captain-fact-frontend / 19996954966

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous