From 5b8cbd22ff68baf4427549193b1aa7246990c2d8 Mon Sep 17 00:00:00 2001
From: josephjclark <josephjclark@gmail.com>
Date: Thu, 13 Jun 2024 13:54:09 +0100
Subject: [PATCH] Fix Docs Panel (#2198)

* run prettier on docs panel

* docs-panel: tweak margins to take up maximum width

in vertical alignment, various paddings mean that the component doe not take all the available wwidth, and so the scrollbars are in the wrong place

* docs-panel: stop the tabs creating a scrollbar if there isnt enoguh space

this created a not very useful double scrollbar in small screens. Now if there isn't enough space, some of the tab is inaccessible. This just has to be how it is - there simply isn't enough screen space

* docs-panel: restore overflow-hidden to the editors parent

* Update CHANGELOG


---------

Co-authored-by: Stuart Corbishley <corbish@gmail.com>
---
 CHANGELOG.md                                  |  3 ++
 .../js/adaptor-docs/components/DocsPanel.tsx  | 54 ++++++++++++-------
 assets/js/job-editor/JobEditor.tsx            | 11 ++--
 3 files changed, 44 insertions(+), 24 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8a350a3a08..5af0b742b8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -21,6 +21,9 @@ and this project adheres to
 
 ### Fixed
 
+- Fix vanishing Docs panel when Editor panel is collapsed and opened again
+  [#2195](https://github.com/OpenFn/lightning/issues/2195)
+
 ## [v2.6.1] - 2024-06-12
 
 ### Changed
diff --git a/assets/js/adaptor-docs/components/DocsPanel.tsx b/assets/js/adaptor-docs/components/DocsPanel.tsx
index 9724dd2177..7ea458814b 100644
--- a/assets/js/adaptor-docs/components/DocsPanel.tsx
+++ b/assets/js/adaptor-docs/components/DocsPanel.tsx
@@ -6,27 +6,37 @@ import Function from './render/Function';
 type DocsPanelProps = {
   specifier?: string;
   onInsert?: (text: string) => void;
-}
+};
 
-const docsLink = (<p>You can check the external docs site at 
-<a className="text-indigo-400 underline underline-offset-2 hover:text-indigo-500 ml-2" href="https://docs.openfn.org/adaptors/#where-to-find-them." target="none">docs.openfn.org/adaptors</a>.
-</p>)
+const docsLink = (
+  <p>
+    You can check the external docs site at
+    <a
+      className="text-indigo-400 underline underline-offset-2 hover:text-indigo-500 ml-2"
+      href="https://docs.openfn.org/adaptors/#where-to-find-them."
+      target="none"
+    >
+      docs.openfn.org/adaptors
+    </a>
+    .
+  </p>
+);
 
 const DocsPanel = ({ specifier, onInsert }: DocsPanelProps) => {
-  if (!specifier) {;
+  if (!specifier) {
     return <div>Nothing selected</div>;
   }
-  
+
   const pkg = useDocs(specifier);
-  
+
   if (pkg === null) {
-    return <div className="block m-2">Loading docs...</div>
+    return <div className="block m-2">Loading docs...</div>;
   }
   if (pkg === false) {
     return (
       <div className="block m-2">
         <p>Sorry, an error occurred loading the docs for this adaptor.</p>
-        {docsLink}    
+        {docsLink}
       </div>
     );
   }
@@ -35,26 +45,34 @@ const DocsPanel = ({ specifier, onInsert }: DocsPanelProps) => {
   if (functions.length === 0) {
     return (
       <div className="block m-2">
-        <h1 className="h1 text-lg font-bold text-secondary-700 mb-2">{name} ({version})</h1>
+        <h1 className="h1 text-lg font-bold text-secondary-700 mb-2">
+          {name} ({version})
+        </h1>
         <p>Sorry, docs are unavailable for this adaptor.</p>
-        {docsLink}    
+        {docsLink}
       </div>
     );
   }
-  
+
   return (
-    <div className="block m-2 w-full overflow-auto">
-      <h1 className="h1 text-lg font-bold text-secondary-700 mb-2">{name} ({version})</h1>
-      <div className="text-sm mb-4">These are the operations available for this adaptor:</div>
+    <div className="block w-full overflow-auto ml-1">
+      <h1 className="h1 text-lg font-bold text-secondary-700 mb-2">
+        {name} ({version})
+      </h1>
+      <div className="text-sm mb-4">
+        These are the operations available for this adaptor:
+      </div>
       {functions
         .sort((a, b) => {
           if (a.name > b.name) return 1;
           else if (a.name < b.name) return -1;
           return 0;
         })
-        .map((fn) => <Function key={fn.name} fn={fn} onInsert={onInsert} />)}
+        .map(fn => (
+          <Function key={fn.name} fn={fn} onInsert={onInsert} />
+        ))}
     </div>
-    );
+  );
 };
 
-export default DocsPanel;
\ No newline at end of file
+export default DocsPanel;
diff --git a/assets/js/job-editor/JobEditor.tsx b/assets/js/job-editor/JobEditor.tsx
index fb77eadab1..afdb2684b8 100644
--- a/assets/js/job-editor/JobEditor.tsx
+++ b/assets/js/job-editor/JobEditor.tsx
@@ -155,7 +155,7 @@ export default ({
     <>
       <div className="cursor-pointer"></div>
       <div className={`flex h-full flex-${vertical ? 'col' : 'row'}`}>
-        <div className="flex-1 rounded-md">
+        <div className="flex-1 rounded-md overflow-hidden">
           <Editor
             source={source}
             adaptor={adaptor}
@@ -166,8 +166,8 @@ export default ({
         </div>
         <div
           className={`${
-            showPanel ? 'flex flex-1 flex-col z-10 overflow-auto' : ''
-          } bg-white`}
+            showPanel ? 'flex flex-1 flex-col z-10 overflow-hidden' : ''
+          } ${vertical ? 'pt-2' : 'pl-2'} bg-white`}
         >
           <div
             className={[
@@ -178,7 +178,6 @@ export default ({
               'w-full',
               'justify-items-end',
               'sticky',
-              vertical ? 'pt-2' : 'pl-2',
             ].join(' ')}
           >
             <Tabs
@@ -192,7 +191,7 @@ export default ({
             />
             <div
               className={`flex select-none flex-1 text-right py-2 ${
-                !showPanel && !vertical ? 'px-2 flex-col-reverse' : 'flex-row'
+                !showPanel && !vertical ? 'flex-col-reverse' : 'flex-row'
               }`}
             >
               <ViewColumnsIcon
@@ -211,7 +210,7 @@ export default ({
             <div
               className={`flex flex-1 ${
                 vertical ? 'overflow-auto' : 'overflow-hidden'
-              } px-2`}
+              }`}
             >
               {selectedTab === 'docs' && <Docs adaptor={adaptor} />}
               {selectedTab === 'metadata' && (