Merge pull request #211 from jsightapi/rc/5.1

Release 5.1

.env

@@ -1,3 +1,4 @@
 REACT_APP_API_URL=http://localhost:8080
 REACT_APP_CLOUD_URL=https://cloud.jsight.io
 REACT_APP_GTM_ID=
+REACT_APP_CUSTOM_MESSAGE_URL=https://jsightapi.github.io/online-editor-custom-messages.json

Dockerfile

@@ -3,9 +3,11 @@ FROM node:14-alpine as builder
 ARG API_URL="/parse-jsight"
 ARG GTM_ID=""
 ARG CLOUD_URL="https://cloud.jsight.io"
+ARG CUSTOM_MESSAGE_URL="https://jsightapi.github.io/online-editor-custom-messages.json"
 ENV REACT_APP_API_URL=$API_URL
 ENV REACT_APP_GTM_ID=$GTM_ID
 ENV REACT_APP_CLOUD_URL=$CLOUD_URL
+ENV REACT_APP_CUSTOM_MESSAGE_URL=$CUSTOM_MESSAGE_URL
 RUN npm i -g npm@8
 # Set working directory
 WORKDIR /app

src/App.tsx

@@ -1,4 +1,4 @@
-import React, {Suspense} from 'react';
+import React, {Suspense, useState} from 'react';
 import {
   Switch,
   BrowserRouter as Router,
@@ -13,10 +13,13 @@ import './styles/globals.scss';
 import {HashRouterParams} from 'types';
 import {SharingContext} from 'store/SharingStore';
 import {CookieExceptShown} from 'components/Modals/CookieExceptShown';
+import {CustomMessage} from 'components/Modals/CustomMessage';
 import './components/Modals/style.scss';
 
 const {isExport} = window as any;
 
+const customMessageUrl = process.env.REACT_APP_CUSTOM_MESSAGE_URL;
+
 const isCookieExceptModalOpen = !Boolean(localStorage.getItem('isCookieExceptShown'));
 
 const onCookieExceptClose = () => localStorage.setItem('isCookieExceptShown', 'true');
@@ -42,10 +45,21 @@ const EditorWithPathScreen = () => {
 };
 
 const App = () => {
+  const [cookieModalOpened, setCookieModalOpened] = useState(isCookieExceptModalOpen);
+
+  const onCloseCookieModal = () => {
+    setCookieModalOpened(false);
+    onCookieExceptClose();
+  };
+
   return (
     <Router>
       <Suspense fallback={<div>Loading...</div>}>
-        {isCookieExceptModalOpen && <CookieExceptShown onAccept={onCookieExceptClose} />}
+        {cookieModalOpened ? (
+          <CookieExceptShown onClose={onCloseCookieModal} />
+        ) : (
+          customMessageUrl && <CustomMessage customMessageUrl={customMessageUrl} />
+        )}
         <Switch>
           <Route path="/" exact component={EditorWithPathScreen} />
           <Route path="/r/:key/:version?" exact component={EditorWithPathScreen} />

src/components/Header/HeaderLogo.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
-import {Link} from 'react-router-dom';
 import logo from 'assets/images/Logo.svg';
 
 export const HeaderLogo = () => (
   <div className="logo">
-    <Link to="/">
+    <a href="https://jsight.io" target="_blank" rel="noreferrer noopener">
       <img src={logo} alt="JSight" />
-    </Link>
+    </a>
   </div>
 );

src/components/Header/index.tsx

@@ -59,6 +59,17 @@ export const Header = ({
           <li className="item" onClick={switchDocsMenu}>
             <DocsMenu isMenuOpened={docsMenuVisible} setIsMenuOpened={setDocsMenuVisible} />
           </li>
+          <li className="item">
+            <button>
+              <a
+                href="https://jsight.io/products/jsight-validator/"
+                target="_blank"
+                rel="noreferrer noopener"
+              >
+                Message validator
+              </a>
+            </button>
+          </li>
           <li className="item">
             <button onClick={() => setContactModalVisible(true)}>Ask a question</button>
           </li>

src/components/Modals/CookieExceptShown/index.tsx

@@ -3,22 +3,26 @@ import Modal from 'react-modal';
 import './CookieExceptShown.styles.scss';
 
 interface CookieExceptShownProps {
-  onAccept: () => void;
+  onClose: () => void;
 }
 
-export const CookieExceptShown: FC<CookieExceptShownProps> = ({onAccept}) => {
+export const CookieExceptShown: FC<CookieExceptShownProps> = ({onClose}) => {
   const [isModalOpen, setIsModalOpen] = useState<boolean>(true);
 
-  const onCookieReject = () => setIsModalOpen(false);
-
+  // eslint-disable-next-line
   const goToCookiesPolicy = (e: React.MouseEvent<HTMLElement>) => {
     e.preventDefault();
     /** TODO implement this method later (when the cookie policy window will be ready)*/
   };
 
   const onCookiePolicyAccept = () => {
-    onAccept();
     setIsModalOpen(false);
+    onClose();
+  };
+
+  const onCookiePolicyReject = () => {
+    setIsModalOpen(false);
+    onClose();
   };
 
   return (
@@ -32,7 +36,7 @@ export const CookieExceptShown: FC<CookieExceptShownProps> = ({onAccept}) => {
       <div className="cookie-except">
         <div className="d-flex header">
           <div className="title">🍪 Cookie Consent</div>
-          <button onClick={onCookieReject} className="btn-close">
+          <button onClick={onCookiePolicyReject} className="btn-close">
             <i className="icon-close" />
           </button>
         </div>

src/components/Modals/CustomMessage/CustomMessage.styles.scss

@@ -0,0 +1,29 @@
+@import 'src/styles/variables';
+
+.custom-message-modal {
+  .custom-message {
+    .content {
+      padding: 1.7rem 0;
+    }
+
+    .footer {
+      padding-top: 1.7rem;
+      display: flex;
+      justify-content: flex-end;
+
+      button {
+        padding: 1rem 4.6rem;
+        border-radius: 4px;
+        font-size: 1.6rem;
+        line-height: 2.4rem;
+        font-weight: 600;
+        margin-left: 20px;
+        transition: 0.3s background;
+
+        &:hover {
+          background: #f8f8fa;
+        }
+      }
+    }
+  }
+}

src/components/Modals/CustomMessage/index.tsx

@@ -0,0 +1,89 @@
+import {FC, useEffect, useState} from 'react';
+import Modal from 'react-modal';
+import {Button} from 'components/Button';
+
+import './CustomMessage.styles.scss';
+
+interface CustmomMessageProps {
+  customMessageUrl: string;
+}
+
+interface Message {
+  id: string;
+  regex: string;
+  content: string;
+  width?: number;
+}
+
+export const CustomMessage: FC<CustmomMessageProps> = ({customMessageUrl}) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [allMessages, setAllMessages] = useState([] as Message[]);
+  const [message, setMessage] = useState({} as Message);
+
+  useEffect(() => {
+    const getCustomMessages = async () => {
+      try {
+        const response = await fetch(customMessageUrl);
+        const allMessages = await response.json();
+        setAllMessages(allMessages);
+      } catch (err) {
+        throw err;
+      }
+    };
+
+    getCustomMessages();
+  }, [customMessageUrl]);
+
+  useEffect(() => {
+    const url = window.location.href;
+    const message = allMessages.find(({regex}) => {
+      const regexp = new RegExp(regex);
+      return regexp.test(url);
+    });
+
+    message && setMessage(message);
+  }, [allMessages]);
+
+  useEffect(() => {
+    const isShowModal = !!message.id && !Boolean(localStorage.getItem(message.id));
+
+    setIsModalOpen(isShowModal);
+  }, [message]);
+
+  const closeModal = () => setIsModalOpen(false);
+
+  const onCloseForever = () => {
+    localStorage.setItem(message.id, 'true');
+    closeModal();
+  };
+
+  return (
+    <Modal
+      isOpen={isModalOpen}
+      shouldCloseOnOverlayClick={true}
+      shouldCloseOnEsc={true}
+      className="r-modal custom-message-modal"
+      overlayClassName="r-modal-overlay"
+      style={{
+        content: {
+          width: message?.width ? `${message.width}px` : 'auto',
+          minWidth: message?.width ? 'unset' : '680px',
+          maxWidth: message?.width ? 'unset' : '90vw',
+          padding: '25px 32px 42px',
+        },
+      }}
+    >
+      <div className="custom-message">
+        <div className="content" dangerouslySetInnerHTML={{__html: message.content}} />
+        <div className="footer">
+          <Button className="button close-forever" onClick={onCloseForever}>
+            Close Forever
+          </Button>
+          <Button className="button close-show-later" onClick={closeModal}>
+            Show Later
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  );
+};

src/components/Resource/Http/index.tsx

@@ -73,7 +73,7 @@ export const HttpResource = ({interactions, resourceKey, index, path}: HttpResou
               {item.description && <Description markdown={item.description} />}
             </div>
           )}
-          {tabs && ( item.annotation || item.description ) && (
+          {tabs && (item.annotation || item.description) && (
             <div className="http-method-annotation-description">
               {item.annotation && <h4 className="method-annotation">{item.annotation}</h4>}
               {item.description && <Description markdown={item.description} />}

src/components/TableView/RowsCollection.tsx

@@ -17,7 +17,7 @@ export const RowsCollection = ({
   level = 0,
   isNestedChild = false,
   key,
-  isArrayLastItem
+  isArrayLastItem,
 }: RowsCollectionProps): JSX.Element[] => {
   let rows: JSX.Element[] = [];
 
@@ -41,7 +41,7 @@ export const RowsCollection = ({
         level={level + 1}
         property={content}
         isNestedChild={isNestedChild}
-        isArrayLastItem={isArrayLastItem}       
+        isArrayLastItem={isArrayLastItem}
       />
     );
     content.children?.forEach((item, index) => {

tests/manual-tests/all-features-test.jst

@@ -53,7 +53,7 @@ URL /cats
     200 // Cat’s list.
       Headers
         { # we shouldn't forget to add "additionalProperties: true" to JDoc Exchange Schema
-          "Content-Type": "application/json" // {const: true}
+          "content-type": "application/json" // {const: true}
         }
       Body [@cat]
 
@@ -212,7 +212,7 @@ PATCH /dogs/{id}
   }
   Headers
   { // {allOf: "@standardHeaders"}
-    "Content-type": "application/json"
+    "content-type": "application/json"
   }
 
   200 // Status is successfully changed.
@@ -225,7 +225,7 @@ URL /dogs/{id}
     Request
       Headers 
       {
-        "Content-type": "application/json" // {const: true}
+        "content-type": "application/json" // {const: true}
       }
 
       Body