Skip to content

Commit

Permalink
Toolbar but read-only mode (mdn#3335)
Browse files Browse the repository at this point in the history 
* Toolbar but read-only mode

Fixes mdn#3334

* more places where it doesn"t make sense in read-only mode

* Update client/src/document/toolbar/flaws.tsx

Co-authored-by: Ryan Johnson <[email protected]>
  • Loading branch information
@peterbe @escattone
peterbe and escattone committed Jun 1, 2021
1 parent 0fc0a56 commit 0177d39
Show file tree
Hide file tree
Showing 6 changed files with 164 additions and 100 deletions.
4 changes: 4 additions & 0 deletions client/src/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@ export const CRUD_MODE = JSON.parse(
JSON.stringify(process.env.NODE_ENV === "development")
);

export const CRUD_MODE_READONLY = JSON.parse(
process.env.REACT_APP_CRUD_MODE_READONLY || "false"
);

export const AUTOCOMPLETE_SEARCH_WIDGET = JSON.parse(
process.env.REACT_APP_AUTOCOMPLETE_SEARCH_WIDGET || JSON.stringify(CRUD_MODE)
);
Expand Down
41 changes: 23 additions & 18 deletions client/src/document/toolbar/edit-actions.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { useEffect, useState } from "react";
import { Link, useLocation, useParams } from "react-router-dom";
import { CRUD_MODE_READONLY } from "../../constants";

import "./edit-actions.scss";

Expand Down Expand Up @@ -62,16 +63,18 @@ export function EditActions({

return (
<ul className="edit-actions">
<li>
<button
type="button"
className="button"
title={`Folder: ${folder}`}
onClick={openInEditorHandler}
>
Open in your <b>editor</b>
</button>
</li>
{!CRUD_MODE_READONLY && (
<li>
<button
type="button"
className="button"
title={`Folder: ${folder}`}
onClick={openInEditorHandler}
>
Open in your <b>editor</b>
</button>
</li>
)}

<li>
<a
Expand All @@ -82,14 +85,16 @@ export function EditActions({
</a>
</li>

<li>
<Link
to={location.pathname.replace("/docs/", "/_edit/")}
className="button"
>
Quick-edit
</Link>
</li>
{!CRUD_MODE_READONLY && (
<li>
<Link
to={location.pathname.replace("/docs/", "/_edit/")}
className="button"
>
Quick-edit
</Link>
</li>
)}

{editorOpeningError ? (
<p className="error-message editor-opening-error">
Expand Down
176 changes: 107 additions & 69 deletions client/src/document/toolbar/flaws.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { annotate, annotationGroup } from "rough-notation";
import { RoughAnnotation } from "rough-notation/lib/model";
import { diffWords } from "diff";

import { CRUD_MODE } from "../../constants";
import { CRUD_MODE, CRUD_MODE_READONLY } from "../../constants";
import { humanizeFlawName } from "../../flaw-utils";
import { useDocumentURL } from "../hooks";
import {
Expand Down Expand Up @@ -201,7 +201,7 @@ function Flaws({

return (
<div id="document-flaws">
{!!fixableFlaws.length && (
{!!fixableFlaws.length && !CRUD_MODE_READONLY && (
<FixableFlawsAction
count={fixableFlaws.length}
reloadPage={reloadPage}
Expand Down Expand Up @@ -445,16 +445,24 @@ function BrokenLinks({
>
👀
</span>{" "}
<a
href={`file://${filepath}`}
onClick={(event: React.MouseEvent) => {
event.preventDefault();
openInEditor(key, flaw.line, flaw.column);
}}
title="Click to open in your editor"
>
line {flaw.line}:{flaw.column}
</a>{" "}
{CRUD_MODE_READONLY ? (
<>
{/* It would be cool if we can change this to a link to the line in the
file in GitHub's UI. */}
line {flaw.line}:{flaw.column}
</>
) : (
<a
href={`file://${filepath}`}
onClick={(event: React.MouseEvent) => {
event.preventDefault();
openInEditor(key, flaw.line, flaw.column);
}}
title="Click to open in your editor"
>
line {flaw.line}:{flaw.column}
</a>
)}{" "}
{flaw.fixable && <FixableFlawBadge />}{" "}
{opening && opening === key && <span>Opening...</span>}
<br />
Expand Down Expand Up @@ -583,17 +591,23 @@ function BadPreTag({
👀
</span>{" "}
{flaw.line && flaw.column ? (
<a
href={`file://${filepath}`}
onClick={(event: React.MouseEvent) => {
event.preventDefault();
if (flaw.line && flaw.column)
openInEditor(flaw.id, flaw.line, flaw.column);
}}
title="Click to open in your editor"
>
line {flaw.line}:{flaw.column}
</a>
CRUD_MODE_READONLY ? (
<>
line {flaw.line}:{flaw.column}
</>
) : (
<a
href={`file://${filepath}`}
onClick={(event: React.MouseEvent) => {
event.preventDefault();
if (flaw.line && flaw.column)
openInEditor(flaw.id, flaw.line, flaw.column);
}}
title="Click to open in your editor"
>
line {flaw.line}:{flaw.column}
</a>
)
) : null}{" "}
{flaw.fixable && <FixableFlawBadge />}{" "}
</li>
Expand Down Expand Up @@ -655,16 +669,22 @@ function Macros({
}
>
<summary>
<a
href={`file://${flaw.filepath}`}
onClick={(event: React.MouseEvent) => {
event.preventDefault();
openInEditor(flaw, flaw.id);
}}
>
<code>{flaw.name}</code> from <code>{flaw.macroName}</code> in
line {flaw.line}:{flaw.column}
</a>{" "}
<code>{flaw.name}</code> from <code>{flaw.macroName}</code>{" "}
{CRUD_MODE_READONLY ? (
<>
line {flaw.line}:{flaw.column}
</>
) : (
<a
href={`file://${flaw.filepath}`}
onClick={(event: React.MouseEvent) => {
event.preventDefault();
openInEditor(flaw, flaw.id);
}}
>
line {flaw.line}:{flaw.column}
</a>
)}{" "}
{opening && opening === flaw.id && <span>Opening...</span>}{" "}
{inPrerequisiteMacro && (
<span
Expand Down Expand Up @@ -770,16 +790,22 @@ function Images({
>
👀
</span>{" "}
<a
href={`file://${filepath}`}
onClick={(event: React.MouseEvent) => {
event.preventDefault();
openInEditor(key, flaw.line, flaw.column);
}}
title="Click to open in your editor"
>
line {flaw.line}:{flaw.column}
</a>{" "}
{CRUD_MODE_READONLY ? (
<>
line {flaw.line}:{flaw.column}
</>
) : (
<a
href={`file://${filepath}`}
onClick={(event: React.MouseEvent) => {
event.preventDefault();
openInEditor(key, flaw.line, flaw.column);
}}
title="Click to open in your editor"
>
line {flaw.line}:{flaw.column}
</a>
)}{" "}
{(flaw.fixable || flaw.externalImage) && <FixableFlawBadge />}{" "}
<br />
{flaw.suggestion && (
Expand Down Expand Up @@ -858,16 +884,22 @@ function ImageWidths({
>
👀
</span>{" "}
<a
href={`file://${filepath}`}
onClick={(event: React.MouseEvent) => {
event.preventDefault();
openInEditor(key, flaw.line, flaw.column);
}}
title="Click to open in your editor"
>
line {flaw.line}:{flaw.column}
</a>{" "}
{CRUD_MODE_READONLY ? (
<>
line {flaw.line}:{flaw.column}
</>
) : (
<a
href={`file://${filepath}`}
onClick={(event: React.MouseEvent) => {
event.preventDefault();
openInEditor(key, flaw.line, flaw.column);
}}
title="Click to open in your editor"
>
line {flaw.line}:{flaw.column}
</a>
)}{" "}
{(flaw.fixable || flaw.externalImage) && <FixableFlawBadge />}{" "}
<br />
{flaw.suggestion === "" && (
Expand Down Expand Up @@ -944,22 +976,28 @@ function HeadingLinks({
return (
<li key={key}>
<b>{flaw.explanation}</b>{" "}
{flaw.line && flaw.column && (
<a
href={`file://${filepath}`}
onClick={(event: React.MouseEvent) => {
event.preventDefault();
openInEditor(
key,
flaw.line as number,
flaw.column as number
);
}}
title="Click to open in your editor"
>
line {flaw.line}:{flaw.column}
</a>
)}{" "}
{flaw.line && flaw.column ? (
CRUD_MODE_READONLY ? (
<>
line {flaw.line}:{flaw.column}
</>
) : (
<a
href={`file://${filepath}`}
onClick={(event: React.MouseEvent) => {
event.preventDefault();
openInEditor(
key,
flaw.line as number,
flaw.column as number
);
}}
title="Click to open in your editor"
>
line {flaw.line}:{flaw.column}
</a>
)
) : null}{" "}
{flaw.fixable && <FixableFlawBadge />} <br />
<b>HTML:</b> <code>{flaw.html}</code> <br />
{flaw.suggestion && flaw.before ? (
Expand Down
8 changes: 8 additions & 0 deletions client/src/document/toolbar/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React, { useEffect } from "react";
import { CRUD_MODE_READONLY } from "../../constants";
import { Doc } from "../types";
import { EditActions } from "./edit-actions";
import { ToggleDocumentFlaws } from "./flaws";
Expand Down Expand Up @@ -40,6 +41,13 @@ export default function Toolbar({
filename={doc.source.filename}
/>
</div>
{CRUD_MODE_READONLY && (
<p>
<i>
You're in <b>read-only</b> mode.
</i>
</p>
)}
<ToggleDocumentFlaws doc={doc} reloadPage={reloadPage} />
</div>
);
Expand Down
28 changes: 15 additions & 13 deletions client/src/sitemap/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from "react";
import { Link, useNavigate, useLocation } from "react-router-dom";
import useSWR from "swr";

import { CRUD_MODE } from "../constants";
import { CRUD_MODE, CRUD_MODE_READONLY } from "../constants";
import { useLocale } from "../hooks";
import { PageContentContainer } from "../ui/atoms/page-content";

Expand Down Expand Up @@ -427,7 +427,7 @@ function Breadcrumb({
<Link to={thisDoc.url}>
<em>{thisDoc.title}</em>
</Link>{" "}
{CRUD_MODE && (
{CRUD_MODE && !CRUD_MODE_READONLY && (
<small>
(
<a
Expand Down Expand Up @@ -492,17 +492,19 @@ function ShowTree({
<Link to={doc.url} title={`Go to: ${doc.title}`}>
View
</Link>
{" | "}
<Link
to={doc.url}
title={`Edit: ${doc.title}`}
onClick={(event) => {
event.preventDefault();
openInYourEditor(doc.url);
}}
>
Edit
</Link>
{!CRUD_MODE_READONLY && " | "}
{!CRUD_MODE_READONLY && (
<Link
to={doc.url}
title={`Edit: ${doc.title}`}
onClick={(event) => {
event.preventDefault();
openInYourEditor(doc.url);
}}
>
Edit
</Link>
)}
)
</small>
</li>
Expand Down
7 changes: 7 additions & 0 deletions docs/envvars.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -283,3 +283,10 @@ Toolbar bar appears based on this.
It defaults to `NODE_ENV==='development'` if not set which means that
it's enable by default when doing development with the `localhost:3000`
dev server.

### `REACT_APP_CRUD_MODE_READONLY`

**Default: `false`**

Only applicable if `REACT_APP_CRUD_MODE` is truthy. This setting disables all
options like "Fix fixable flaws" or "Quick-edit"

0 comments on commit 0177d39

Please sign in to comment.