feat: add cheatsheet based on renku-python json file

SwissDataScienceCenter · Nov 7, 2022 · 54a76de · 54a76de
1 parent c7b8f70
commit 54a76de
Show file tree

Hide file tree

Showing 6 changed files with 289 additions and 220 deletions.
diff --git a/client/src/notebooks/Notebooks.present.js b/client/src/notebooks/Notebooks.present.js
@@ -30,7 +30,6 @@ import {
 import _ from "lodash";
 
 import { NotebooksHelper } from "./index";
-import SessionCheatSheet from "./SessionCheatSheet";
 import {
   CheckNotebookIcon, StartNotebookServer, mergeEnumOptions, ServerOptionBoolean, ServerOptionEnum,
   ServerOptionRange
@@ -147,26 +146,6 @@ function SessionLogs(props) {
   );
 }
 
-function SessionCommands(props) {
-  const { tab, notebook } = props;
-
-  if (tab !== SESSION_TABS.commands)
-    return null;
-
-  const annotations = NotebooksHelper.cleanAnnotations(notebook.data.annotations, "renku.io");
-  const branch = annotations["branch"];
-
-  // ? Having a minHeight prevent losing the vertical scroll position.
-  // TODO: Revisit after #1219
-  return (
-    <Fragment>
-      <div className="p-2 p-lg-3" style={{ minHeight: 800 }}>
-        <SessionCheatSheet branch={branch}/>
-      </div>
-    </Fragment>
-  );
-}
-
 function SessionJupyter(props) {
   const { notebook, height = "800px", ready } = props;
   const history = useHistory();
@@ -776,5 +755,5 @@ NotebookServerRowAction.displayName = "NotebookServerRowAction";
 export {
   CheckNotebookIcon, Notebooks, NotebooksDisabled, ServerOptionBoolean, ServerOptionEnum, ServerOptionRange,
   StartNotebookServer, mergeEnumOptions, SessionJupyter, NotebookServerRowFull, NotebookServerRow,
-  SessionCommands, SESSION_TABS, SessionLogs
+  SESSION_TABS, SessionLogs
 };
diff --git a/client/src/notebooks/SessionCheatSheet.js b/client/src/notebooks/SessionCheatSheet.js
diff --git a/client/src/notebooks/components/ResourcesSessionModal.tsx b/client/src/notebooks/components/ResourcesSessionModal.tsx
@@ -22,8 +22,8 @@ import "./SessionModal.css";
 import { Notebook, SessionHandlers } from "./Session";
 import { Modal, ModalBody, ModalHeader, Nav, NavItem, NavLink, TabContent, TabPane } from "../../utils/ts-wrappers";
 import { SESSION_TABS, SessionLogs } from "../Notebooks.present";
-import SessionCheatSheet from "../SessionCheatSheet";
 import { Docs } from "../../utils/constants/Docs";
+import SessionCheatSheetGenerated from "./SessionCheatSheet";
 
 /**
  *  renku-ui
@@ -105,7 +105,7 @@ const Resources = ({ handlers, notebook, defaultBranch, activeTab }: ResourcesPr
       <TabContent activeTab={activeTab}>
         <TabPane key={SESSION_TABS.commands} tabId={SESSION_TABS.commands}>
           <div className="session-cheat-sheet bg-white border-radius-8">
-            <SessionCheatSheet branch={defaultBranch} />
+            <SessionCheatSheetGenerated />
           </div>
         </TabPane>
         <TabPane key={SESSION_TABS.docs} tabId={SESSION_TABS.docs}>

diff --git a/client/src/notebooks/SessionCheatSheet.css → ...otebooks/components/SessionCheatSheet.css b/client/src/notebooks/SessionCheatSheet.css → ...otebooks/components/SessionCheatSheet.css
@@ -4,12 +4,21 @@ div.commands {
   min-width: 300px;
   padding: 10px;
 }
+div.commands .break {
+  flex-basis: 100%;
+  width: 0;
+}
 
 .commands h1 {
   border-bottom: 2px solid rgba(0, 0, 0, 0.2);
 }
 
-.commands div.commands-row div {
+.command {
+  flex-grow: 1;
+  padding: 0 20px 5px 0;
+}
+
+.commands div.commands-row div:not(.command) {
   flex-basis: 0;
   flex-grow: 1;
   padding: 0 20px 5px 0;