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 <[email protected]>
OpenFn · Jun 13, 2024 · 5b8cbd2 · 5b8cbd2
1 parent f8e9c7f
commit 5b8cbd2
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 24 deletions.
diff --git 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
@@ -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;
+export default DocsPanel;
diff --git 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' && (