From c69e375e45a0d803e56957806279e177c35b0d96 Mon Sep 17 00:00:00 2001
From: Pavel Mineev <pavel@mineev.me>
Date: Sat, 4 Jan 2020 10:31:06 +0300
Subject: [PATCH] Add "simple view" mode (#502)

* Add "simple view" mode support

It just hide elements from view when SIMPLE_VIEW recived from server

* Fix typing and add ts check before push

* proper input styling

* Changes for frontend dev compose

* remove SIMPLE_VIEW from default settings for forntend dev
* add private compose to gitignore

* Added simpleView mode for replay and edit modes.

* `simpleView` changed to required param

* FIx border-width in reply form

* Fix border-width in editing mode
---
 frontend/app/common/static_store.ts           |  1 +
 frontend/app/common/types.ts                  |  1 +
 .../comment/_editing/comment_editing.scss     |  5 ---
 .../comment/_replying/comment_replying.scss   |  5 ---
 frontend/app/components/comment/comment.tsx   |  2 +
 .../input/_simple/input_simple.scss           |  3 ++
 frontend/app/components/input/input.test.tsx  | 15 +++++++
 frontend/app/components/input/input.tsx       | 40 +++++++++++--------
 frontend/app/components/input/styles.ts       |  1 +
 frontend/app/components/root/root.tsx         |  1 +
 frontend/app/testUtils/index.ts               |  1 +
 frontend/package.json                         |  2 +-
 12 files changed, 49 insertions(+), 28 deletions(-)
 create mode 100644 frontend/app/components/input/_simple/input_simple.scss
 create mode 100644 frontend/app/components/input/input.test.tsx

diff --git a/frontend/app/common/static_store.ts b/frontend/app/common/static_store.ts
index ea566b6d..f01295ea 100644
--- a/frontend/app/common/static_store.ts
+++ b/frontend/app/common/static_store.ts
@@ -26,6 +26,7 @@ export const StaticStore: StaticStoreType = {
     positive_score: false,
     readonly_age: 0,
     max_image_size: 0,
+    simple_view: false,
   },
   query: querySettings as QuerySettingsType,
 };
diff --git a/frontend/app/common/types.ts b/frontend/app/common/types.ts
index e55684a7..d0f55a24 100644
--- a/frontend/app/common/types.ts
+++ b/frontend/app/common/types.ts
@@ -111,6 +111,7 @@ export interface Config {
   positive_score: boolean;
   readonly_age: number;
   max_image_size: number;
+  simple_view: boolean;
 }
 
 export interface RemarkConfig {
diff --git a/frontend/app/components/comment/_editing/comment_editing.scss b/frontend/app/components/comment/_editing/comment_editing.scss
index 9d20f869..c46c3e15 100644
--- a/frontend/app/components/comment/_editing/comment_editing.scss
+++ b/frontend/app/components/comment/_editing/comment_editing.scss
@@ -3,11 +3,6 @@
     display: none;
   }
 
-  .comment__input {
-    border: 12px solid;
-    border-top-width: 6px;
-  }
-
   .comment__score {
     top: 4px;
     right: 0;
diff --git a/frontend/app/components/comment/_replying/comment_replying.scss b/frontend/app/components/comment/_replying/comment_replying.scss
index 98e516df..fbfb5dbf 100644
--- a/frontend/app/components/comment/_replying/comment_replying.scss
+++ b/frontend/app/components/comment/_replying/comment_replying.scss
@@ -1,9 +1,4 @@
 .comment_replying {
-  .comment__input {
-    border: 12px solid;
-    border-top-width: 6px;
-  }
-
   .comment__score {
     top: 4px;
     right: 0;
diff --git a/frontend/app/components/comment/comment.tsx b/frontend/app/components/comment/comment.tsx
index a252a288..bbd49330 100644
--- a/frontend/app/components/comment/comment.tsx
+++ b/frontend/app/components/comment/comment.tsx
@@ -734,6 +734,7 @@ export class Comment extends Component<Props, State> {
             getPreview={this.props.getPreview!}
             autofocus={true}
             uploadImage={uploadImageHandler}
+            simpleView={StaticStore.config.simple_view}
           />
         )}
 
@@ -749,6 +750,7 @@ export class Comment extends Component<Props, State> {
             errorMessage={state.editDeadline === null ? 'Editing time has expired.' : undefined}
             autofocus={true}
             uploadImage={uploadImageHandler}
+            simpleView={StaticStore.config.simple_view}
           />
         )}
       </article>
diff --git a/frontend/app/components/input/_simple/input_simple.scss b/frontend/app/components/input/_simple/input_simple.scss
new file mode 100644
index 00000000..dd696ce0
--- /dev/null
+++ b/frontend/app/components/input/_simple/input_simple.scss
@@ -0,0 +1,3 @@
+.input_simple {
+  border-width: 12px;
+}
diff --git a/frontend/app/components/input/input.test.tsx b/frontend/app/components/input/input.test.tsx
new file mode 100644
index 00000000..8a656538
--- /dev/null
+++ b/frontend/app/components/input/input.test.tsx
@@ -0,0 +1,15 @@
+/** @jsx createElement */
+import { createElement } from 'preact';
+import { shallow } from 'enzyme';
+
+import { Input, Props } from './input';
+
+describe('<Input />', () => {
+  it('shoud render without control panel, preview button, and rss links in "simple view" mode', () => {
+    const element = shallow(<Input {...({ simpleView: true } as Props)} />);
+
+    expect(element.exists('.input__control-panel')).toEqual(false);
+    expect(element.exists('.input__button_type_preview')).toEqual(false);
+    expect(element.exists('.input__rss')).toEqual(false);
+  });
+});
diff --git a/frontend/app/components/input/input.tsx b/frontend/app/components/input/input.tsx
index 8bdcb425..8688ceef 100644
--- a/frontend/app/components/input/input.tsx
+++ b/frontend/app/components/input/input.tsx
@@ -24,7 +24,7 @@ const RSS_REPLIES_URL = `${BASE_URL}${API_BASE}/rss/reply?site=${siteId}&user=`;
 
 let textareaId = 0;
 
-interface Props {
+export interface Props {
   /** user id for rss link generation */
   userId?: User['id'];
   errorMessage?: string;
@@ -32,6 +32,7 @@ interface Props {
   mix?: Mix;
   mode?: 'main' | 'edit' | 'reply';
   theme: Theme;
+  simpleView: boolean | undefined;
   autofocus?: boolean;
 
   onSubmit(text: string, pageTitle: string): Promise<void>;
@@ -353,6 +354,7 @@ export class Input extends Component<Props, State> {
           mods: {
             theme: props.theme || 'light',
             type: props.mode || 'reply',
+            simple: props.simpleView,
           },
           mix: props.mix,
         })}
@@ -361,13 +363,15 @@ export class Input extends Component<Props, State> {
         onDragOver={this.onDragOver}
         onDrop={this.onDrop}
       >
-        <div className="input__control-panel">
-          <MarkdownToolbar
-            allowUpload={Boolean(this.props.uploadImage)}
-            uploadImages={this.uploadImages}
-            textareaId={this.textareaId}
-          />
-        </div>
+        {!props.simpleView && (
+          <div className="input__control-panel">
+            <MarkdownToolbar
+              allowUpload={Boolean(this.props.uploadImage)}
+              uploadImages={this.uploadImages}
+              textareaId={this.textareaId}
+            />
+          </div>
+        )}
         <div className="input__field-wrapper">
           <TextareaAutosize
             id={this.textareaId}
@@ -395,20 +399,22 @@ export class Input extends Component<Props, State> {
           ))}
 
         <div className="input__actions">
-          <button
-            className={b('input__button', {}, { type: 'preview' })}
-            type="button"
-            disabled={isDisabled}
-            onClick={this.getPreview}
-          >
-            Preview
-          </button>
+          {!props.simpleView && (
+            <button
+              className={b('input__button', {}, { type: 'preview' })}
+              type="button"
+              disabled={isDisabled}
+              onClick={this.getPreview}
+            >
+              Preview
+            </button>
+          )}
 
           <button className={b('input__button', {}, { type: 'send' })} type="submit" disabled={isDisabled}>
             {label}
           </button>
 
-          {props.mode === 'main' && (
+          {!props.simpleView && props.mode === 'main' && (
             <div className="input__rss">
               <div className="input__markdown">
                 Styling with{' '}
diff --git a/frontend/app/components/input/styles.ts b/frontend/app/components/input/styles.ts
index d32c8759..36df55d6 100644
--- a/frontend/app/components/input/styles.ts
+++ b/frontend/app/components/input/styles.ts
@@ -1,6 +1,7 @@
 import '@app/components/raw-content';
 
 import './input.scss';
+import './_simple/input_simple.scss';
 
 import './__actions/input__actions.scss';
 
diff --git a/frontend/app/components/root/root.tsx b/frontend/app/components/root/root.tsx
index c7465d98..ea40d21b 100644
--- a/frontend/app/components/root/root.tsx
+++ b/frontend/app/components/root/root.tsx
@@ -249,6 +249,7 @@ export class Root extends Component<Props, State> {
                   onSubmit={(text, title) => this.props.addComment(text, title)}
                   getPreview={this.props.getPreview}
                   uploadImage={imageUploadHandler}
+                  simpleView={StaticStore.config.simple_view}
                 />
               )}
 
diff --git a/frontend/app/testUtils/index.ts b/frontend/app/testUtils/index.ts
index 7fc1f067..a5bd6733 100644
--- a/frontend/app/testUtils/index.ts
+++ b/frontend/app/testUtils/index.ts
@@ -21,5 +21,6 @@ beforeEach(() => {
     positive_score: false,
     readonly_age: 100,
     version: 'jest-test',
+    simple_view: false,
   };
 });
diff --git a/frontend/package.json b/frontend/package.json
index d1c5e5c9..38d5d452 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,7 +14,7 @@
     "hooks": {
       "pre-commit": "./node_modules/.bin/lint-staged",
       "post-commit": "git update-index --again",
-      "pre-push": "npm test"
+      "pre-push": "npm run check && npm test"
     }
   },
   "lint-staged": {