JDOC-794 Share button saves OpenAPI instead of JSight

src/components/Editor/index.tsx

@@ -29,6 +29,7 @@ interface EditorProps {
   setError?: React.Dispatch<React.SetStateAction<ErrorSimpleType | null>>;
   readOnly?: boolean;
   currentTheme?: string;
+  jsightEditorId?: string;
 }
 
 function initializeEditor(
@@ -67,18 +68,20 @@ export const Editor = React.memo(
     reload,
     reloadedEditor,
     readOnly = false,
+    jsightEditorId = 'jsightEditor',
   }: EditorProps) => {
     const {key, version, history} = useContext(SharingContext);
     const ref = useRef<HTMLDivElement | null>(null);
     const jsightEditor = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
     const decorationsRef = useRef<string[]>([]);
     const [isEditorLoaded, setIsEditorLoaded] = useState<boolean>(false);
+    const [isContentRendered, setIsContentRendered] = useState<boolean>(false);
     const dontUpdateSharingBtn = useRef<boolean>(false);
     const languagesList = ['jsight', 'jschema', 'markdown'];
     const currentLanguage = 'jsight';
 
     // @ts-ignore
-    window['jsightEditor'] = jsightEditor;
+    window[jsightEditorId] = jsightEditor;
 
     const languages: monaco.languages.ILanguageExtensionPoint[] = languagesList.map((id) => ({
       id,
@@ -210,6 +213,8 @@ export const Editor = React.memo(
     useEffect(() => {
       if (isEditorLoaded) {
         if (key) {
+          //   if (isContentRendered && readOnly) return;
+
           dontUpdateSharingBtn.current = true;
           (async () => {
             try {
@@ -223,6 +228,7 @@ export const Editor = React.memo(
                 history.push(`/r/${result.code}/${result.version}`);
               }
               highlightError();
+              setIsContentRendered(true);
             } catch (error) {
               if (error.Code) {
                 setError &&

src/components/MainContent/index.tsx

@@ -408,14 +408,18 @@ export const MainContent = React.memo((props: MainContentProps) => {
       (currentDocSidebar === 'htmldoc' && isJdocLoading),
   });
 
+  /* TODO: This is workaround. Refactor to avoid openapi compatibility check */
+  const isValidOpenApiContent = openApiContent.substr(0, 7) === 'openapi';
+
   return (
     <div className="main-content-wrapper">
       <div className={mainContentClasses}>
-        {currentDocSidebar === 'openapi' && viewMode !== 'doc' && (
+        {currentDocSidebar === 'openapi' && viewMode !== 'doc' && isValidOpenApiContent && (
           <div className="openapi-wrapper">
             <Editor
               content={openApiContent}
               readOnly={true}
+              jsightEditorId="openApiViewer"
               reload={reloadOpenApi}
               reloadedEditor={handleReloadOpenapi}
               currentTheme="default"

src/components/ShareButton/index.tsx

@@ -17,9 +17,16 @@ export const ShareButton: React.FC<ShareButtonProps> = ({openSharingModal, disab
   const {key, version} = useContext(SharingContext);
   const isAbleUpdate = useMemo(() => key && version, [key, version]);
 
-  const handleNewState = async (updateOrCreateState: () => void) => {
+  const handleCreateState = async () => {
     try {
-      await updateOrCreateState();
+      await createState();
+      openSharingModal();
+    } catch (err) {}
+  };
+
+  const handleUpdateState = async () => {
+    try {
+      await updateExistState();
       openSharingModal();
     } catch (err) {}
   };
@@ -37,7 +44,7 @@ export const ShareButton: React.FC<ShareButtonProps> = ({openSharingModal, disab
           </div>
         </DropdownToggle>
         <DropdownMenu offsetX={-160}>
-          <div className="menu-item" onClick={() => handleNewState(updateExistState)}>
+          <div className="menu-item" onClick={handleUpdateState}>
             <div>
               <i className="icon-upload" />
             </div>
@@ -47,7 +54,7 @@ export const ShareButton: React.FC<ShareButtonProps> = ({openSharingModal, disab
             </div>
           </div>
           <hr />
-          <div className="menu-item" onClick={() => handleNewState(createState)}>
+          <div className="menu-item" onClick={handleCreateState}>
             <div>
               <i className="icon-plus" />
             </div>
@@ -64,7 +71,7 @@ export const ShareButton: React.FC<ShareButtonProps> = ({openSharingModal, disab
       disabled={disableSharing || !process.env.REACT_APP_CLOUD_URL}
       icon="link"
       className="save-by-link-btn"
-      onClick={() => handleNewState(createState)}
+      onClick={handleCreateState}
     >
       Share
     </Button>

src/hooks/useSharing.ts

@@ -1,4 +1,4 @@
-import {createNewState, updateState} from 'api/codeSharing';
+import {createNewState, updateState, CodeSharingParamsType} from 'api/codeSharing';
 import {useParams} from 'react-router-dom';
 import {toast} from 'react-toastify';
 import {ToastOptions} from 'react-toastify/dist/types';
@@ -30,13 +30,18 @@ export function useSharing() {
     ? (window as any).jsightEditor
     : null;
 
-  const createState = () => {
+  const getUrl = (response: CodeSharingParamsType) =>
+    `/r/${response.code}/${response.version}${path ? `#${path}` : ''}`;
+
+  const createState = async () => {
     const content = jsightEditor.current?.getValue();
 
     if (content !== undefined) {
       return createNewState(content)
         .then((response) => {
-          history.push(`/r/${response.code}/${response.version}${path ? `#${path}` : ''}`);
+          const url = getUrl(response);
+          console.log(url);
+          window.history.pushState({}, document.title, url);
         })
         .catch(() => {
           toast.warning(SharingErrorNotification, errorOptions);
@@ -47,13 +52,14 @@ export function useSharing() {
     }
   };
 
-  const updateExistState = () => {
+  const updateExistState = async () => {
     const content = jsightEditor.current?.getValue();
 
     if (content !== undefined) {
       return updateState(key, content)
         .then((response) => {
-          history.push(`/r/${response.code}/${response.version}${path ? `#${path}` : ''}`);
+          const url = getUrl(response);
+          window.history.pushState({}, document.title, url);
         })
         .catch(() => {
           toast.warning(SharingErrorNotification, errorOptions);