Commit ⋅ wagtail/wagtail


import React from 'react';

import { ADMIN_URLS, STRINGS } from '../../config/wagtailConfig';
import { ADMIN_URLS, STRINGS, LOCALE_NAMES } from '../../config/wagtailConfig';
import Icon from '../../components/Icon/Icon';
import Button from '../../components/Button/Button';
import PublicationStatus from '../../components/PublicationStatus/PublicationStatus';

@@ -26,6 +26,7 @@

  const { id, admin_display_title: title, meta } = item;
  const hasChildren = meta.children.count > 0;
  const isPublished = meta.status.live && !meta.status.has_unpublished_changes;
  const localeName = meta.parent?.id === 1 && meta.locale && (LOCALE_NAMES.get(meta.locale) || meta.locale);

  return (
    <div className="c-explorer__item">

@@ -36,11 +37,12 @@

          {title}
        </h3>

        {!isPublished ? (
        {(!isPublished || localeName) &&
          <span className="c-explorer__meta">
            <PublicationStatus status={meta.status} />
            {localeName && <span className="o-pill c-status">{localeName}</span>}
            {!isPublished && <PublicationStatus status={meta.status} />}
          </span>
        ) : null}
        }
      </Button>
      <Button
        href={`${ADMIN_URLS.PAGES}${id}/edit/`}

@@ -6,3 +6,10 @@

6	6		export const MAX_EXPLORER_PAGES = 200;
7	7
8	8		export const IS_IE11 = !global.ActiveXObject && 'ActiveXObject' in global;
	9	+
	10	+	export const LOCALE_NAMES = new Map();
	11	+
	12	+	/* eslint-disable-next-line camelcase */
	13	+	global.wagtailConfig.LOCALES.forEach(({ code, display_name }) => {
	14	+	LOCALE_NAMES.set(code, display_name);
	15	+	});

@@ -162,7 +162,7 @@

        className="explorer"
        paused={paused || !page || page.isFetching}
        focusTrapOptions={{
          initialFocus: '.c-explorer__header',
          initialFocus: '.c-explorer__header__title',
          onDeactivate: onClose,
        }}
      >

@@ -1,7 +1,7 @@

/* eslint-disable react/prop-types */

import React from 'react';
import { ADMIN_URLS, STRINGS } from '../../config/wagtailConfig';
import { ADMIN_URLS, STRINGS, LOCALE_NAMES } from '../../config/wagtailConfig';

import Button from '../../components/Button/Button';
import Icon from '../../components/Icon/Icon';

@@ -19,21 +19,29 @@

 */
const ExplorerHeader: React.FunctionComponent<ExplorerHeaderProps> = ({ page, depth, onClick }) => {
  const isRoot = depth === 0;
  const isSiteRoot = page.id === 0;

  return (
    <Button
      href={page.id ? `${ADMIN_URLS.PAGES}${page.id}/` : ADMIN_URLS.PAGES}
      className="c-explorer__header"
      onClick={onClick}
    >
      <div className="c-explorer__header__inner">
        <Icon
          name={isRoot ? 'home' : 'arrow-left'}
          className="icon--explorer-header"
        />
        <span>{page.admin_display_title || STRINGS.PAGES}</span>
      </div>
    </Button>
    <div className="c-explorer__header">
      <Button
        href={!isSiteRoot ? `${ADMIN_URLS.PAGES}${page.id}/` : ADMIN_URLS.PAGES}
        className="c-explorer__header__title "
        onClick={onClick}
      >
        <div className="c-explorer__header__title__inner ">
          <Icon
            name={isRoot ? 'home' : 'arrow-left'}
            className="icon--explorer-header"
          />
          <span>{page.admin_display_title || STRINGS.PAGES}</span>
        </div>
      </Button>
      {!isSiteRoot && page.meta.locale &&
        <div className="c-explorer__header__select">
          <span>{(LOCALE_NAMES.get(page.meta.locale) || page.meta.locale)}</span>
        </div>
      }
    </div>
  );
};


@@ -15,6 +15,7 @@

    parent: {
      id: number;
    } | null;
    locale?: string;
  };
  /* eslint-disable-next-line camelcase */
  admin_display_title?: string;

Files		•	•	•	Coverage
client/src	1,003	930	7	66	92.72%
wagtail/admin/static_src/wagtailadmin	251	81	17	153	32.27%
Project Totals (43 files)	1,254	1,011	24	219	80.62%

frontend

View CI Build Download

codecov:
  notify:
    after_n_builds: 10
    require_ci_to_pass: no

coverage:
  status:
    project: off
    patch: off

comment: off

Read the docs

Interact now

The inner-most circle is the entire project, moving away from the center are folders then, finally, a single file. The size and color of each slice is representing the number of statements and the coverage, respectively.

SVG

The top section represents the entire project. Proceeding with folders and finally individual files. The size and color of each slice is representing the number of statements and the coverage, respectively.

SVG

Each block represents a single file in the project. The size and color of each block is represented by the number of statements and the coverage, respectively.

SVG

Learn more about the coverage sunburst graph

162	162		className="explorer"
163	163		paused={paused \|\| !page \|\| page.isFetching}
164	164		focusTrapOptions={{
165		-	initialFocus: '.c-explorer__header',
	165	+	initialFocus: '.c-explorer__header__title',
166	166		onDeactivate: onClose,
167	167		}}
168	168		>

Navigation	Overlay
`t` Navigate files	`h` Toggle hits
`y` Change url to tip of branch	`m` Toggle misses
`b / v` Jump to prev/next hit line	`p` Toggle partial
`z / x` Jump to prev/next missed or partial line	`1..9` Toggle flags
`shift + o` Open current page in GitHub	`a` Toggle all on
`/ or ?` Show keyboard shortcuts dialog	`c` Toggle context lines or commits

2	2
3	3		import React from 'react';
4	4
5		-	import { ADMIN_URLS, STRINGS } from '../../config/wagtailConfig';
	5	+	import { ADMIN_URLS, STRINGS, LOCALE_NAMES } from '../../config/wagtailConfig';
6	6		import Icon from '../../components/Icon/Icon';
7	7		import Button from '../../components/Button/Button';
8	8		import PublicationStatus from '../../components/PublicationStatus/PublicationStatus';

26	26		const { id, admin_display_title: title, meta } = item;
27	27		const hasChildren = meta.children.count > 0;
28	28		const isPublished = meta.status.live && !meta.status.has_unpublished_changes;
	29	+	const localeName = meta.parent?.id === 1 && meta.locale && (LOCALE_NAMES.get(meta.locale) \|\| meta.locale);
29	30
30	31		return (
31	32		<div className="c-explorer__item">

36	37		{title}
37	38		</h3>
38	39
39		-	{!isPublished ? (
	40	+	{(!isPublished \|\| localeName) &&
40	41		<span className="c-explorer__meta">
41		-	<PublicationStatus status={meta.status} />
	42	+	{localeName && <span className="o-pill c-status">{localeName}</span>}
	43	+	{!isPublished && <PublicationStatus status={meta.status} />}
42	44		</span>
43		-	) : null}
	45	+	}
44	46		</Button>
45	47		<Button
46	48		href={`${ADMIN_URLS.PAGES}${id}/edit/`}

1	1		/* eslint-disable react/prop-types */
2	2
3	3		import React from 'react';
4		-	import { ADMIN_URLS, STRINGS } from '../../config/wagtailConfig';
	4	+	import { ADMIN_URLS, STRINGS, LOCALE_NAMES } from '../../config/wagtailConfig';
5	5
6	6		import Button from '../../components/Button/Button';
7	7		import Icon from '../../components/Icon/Icon';

19	19		*/
20	20		const ExplorerHeader: React.FunctionComponent<ExplorerHeaderProps> = ({ page, depth, onClick }) => {
21	21		const isRoot = depth === 0;
	22	+	const isSiteRoot = page.id === 0;
22	23
23	24		return (
24		-	<Button
25		-	href={page.id ? `${ADMIN_URLS.PAGES}${page.id}/` : ADMIN_URLS.PAGES}
26		-	className="c-explorer__header"
27		-	onClick={onClick}
28		-	>
29		-	<div className="c-explorer__header__inner">
30		-	<Icon
31		-	name={isRoot ? 'home' : 'arrow-left'}
32		-	className="icon--explorer-header"
33		-	/>
34		-	<span>{page.admin_display_title \|\| STRINGS.PAGES}</span>
35		-	</div>
36		-	</Button>
	25	+	<div className="c-explorer__header">
	26	+	<Button
	27	+	href={!isSiteRoot ? `${ADMIN_URLS.PAGES}${page.id}/` : ADMIN_URLS.PAGES}
	28	+	className="c-explorer__header__title "
	29	+	onClick={onClick}
	30	+	>
	31	+	<div className="c-explorer__header__title__inner ">
	32	+	<Icon
	33	+	name={isRoot ? 'home' : 'arrow-left'}
	34	+	className="icon--explorer-header"
	35	+	/>
	36	+	<span>{page.admin_display_title \|\| STRINGS.PAGES}</span>
	37	+	</div>
	38	+	</Button>
	39	+	{!isSiteRoot && page.meta.locale &&
	40	+	<div className="c-explorer__header__select">
	41	+	<span>{(LOCALE_NAMES.get(page.meta.locale) \|\| page.meta.locale)}</span>
	42	+	</div>
	43	+	}
	44	+	</div>
37	45		);
38	46		};
39	47

15	15		parent: {
16	16		id: number;
17	17		} \| null;
	18	+	locale?: string;
18	19		};
19	20		/* eslint-disable-next-line camelcase */
20	21		admin_display_title?: string;

1	codecov:
2	notify:
3	after_n_builds: 10
4	require_ci_to_pass: no
5
6	coverage:
7	status:
8	project: off
9	patch: off
10
11	comment: off