From 6d08448ba640096fdbbaeeb1f963601f0ae57c4a Mon Sep 17 00:00:00 2001 From: Andrea Cordoba Date: Fri, 4 Nov 2022 16:40:49 +0100 Subject: [PATCH] feat: add cheatsheet based on renku-python json file --- client/src/notebooks/Notebooks.present.js | 23 +-- client/src/notebooks/SessionCheatSheet.js | 195 ------------------ .../components/ResourcesSessionModal.tsx | 4 +- .../{ => components}/SessionCheatSheet.css | 11 +- .../components/SessionCheatSheet.tsx | 169 +++++++++++++++ .../src/notebooks/components/cheatsheet.json | 101 +++++++++ 6 files changed, 283 insertions(+), 220 deletions(-) delete mode 100644 client/src/notebooks/SessionCheatSheet.js rename client/src/notebooks/{ => components}/SessionCheatSheet.css (68%) create mode 100644 client/src/notebooks/components/SessionCheatSheet.tsx create mode 100644 client/src/notebooks/components/cheatsheet.json diff --git a/client/src/notebooks/Notebooks.present.js b/client/src/notebooks/Notebooks.present.js index 058dbc2ae0..6475152f47 100644 --- 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 ( - -
- -
- - ); -} - 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 deleted file mode 100644 index d1746fcc77..0000000000 --- a/client/src/notebooks/SessionCheatSheet.js +++ /dev/null @@ -1,195 +0,0 @@ -/*! - * Copyright 2021 - Swiss Data Science Center (SDSC) - * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and - * Eidgenössische Technische Hochschule Zürich (ETHZ). - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT - * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - - -import React, { Fragment } from "react"; - -import "./SessionCheatSheet.css"; -import { Clipboard } from "../utils/components/Clipboard"; -import { ExternalDocsLink } from "../utils/components/ExternalLinks"; -import { RenkuPythonDocs } from "../utils/constants/Docs"; - -function CommandDesc({ command = "", desc = "", clipboard = true }) { - return
- {command} - { - (clipboard === true) ? : null - } -
{desc}
-
; -} - -function CommandsRow({ children }) { - return
- {children} -
; -} - -function TypicalWorkflow() { - return - -
-

Typical Workflow

-
- - -
-

Work as you normally would

-

Develop your model, write analysis code, etc.

-
- - Save your latest work, providing a message explaining what you have done.} /> - - - ; -} - -function RunningAndTrackingCommands() { - const desc = - Execute a <command>, creating a workflow template plan called - <name>, with Renku tracking inputs and outputs. - - ; - return - -
-

Running and Tracking Commands

-
- - - - - ; -} - -function ManagingContents() { - const addDesc = Add data from <url> to a dataset. - <url> can be a local file path, an http(s) address or a Git git+http or git+ssh repository.; - - const importDesc = "Import a dataset. can be a Renku, Zenodo or Dataverse URL\n" + - "or DOI."; - return - -
-

Working with Renku Datasets

-
- - - - - - - - - - - - - ; -} - -function Collaboration() { - const mergeDesc = Incorporate the changes from the <other branch> into your branch. - See the for details. - ; - return - -
-

Collaboration

-

- Working with others requires coordination, and branching/merging is a common way to handle this. -

-
- - - - - - ; -} - -function UndoCommit() { - return - -
-

Undo Renku Command

-
- - -
- -
- - ; -} - -function LearnMore() { - return - -
-

Want to learn more?

-
- - -
- For a more detailed overview of common commands, see the {" "} - {/* eslint-disable-next-line max-len */} - . -
-
- The covers much more. -
- - ; -} - - -function SessionCheatSheet({ branch }) { - return
-

Renku Cheat Sheet

- - - - - - -
; -} - -export default SessionCheatSheet; diff --git a/client/src/notebooks/components/ResourcesSessionModal.tsx b/client/src/notebooks/components/ResourcesSessionModal.tsx index f74126be2f..b042707a41 100644 --- 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
- +
diff --git a/client/src/notebooks/SessionCheatSheet.css b/client/src/notebooks/components/SessionCheatSheet.css similarity index 68% rename from client/src/notebooks/SessionCheatSheet.css rename to client/src/notebooks/components/SessionCheatSheet.css index 6ce6b36423..8f1b2356dd 100644 --- a/client/src/notebooks/SessionCheatSheet.css +++ b/client/src/notebooks/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; diff --git a/client/src/notebooks/components/SessionCheatSheet.tsx b/client/src/notebooks/components/SessionCheatSheet.tsx new file mode 100644 index 0000000000..bc448f61d9 --- /dev/null +++ b/client/src/notebooks/components/SessionCheatSheet.tsx @@ -0,0 +1,169 @@ +/*! + * Copyright 2021 - Swiss Data Science Center (SDSC) + * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and + * Eidgenössische Technische Hochschule Zürich (ETHZ). + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + + +import React, { useEffect, useState } from "react"; + +import "./SessionCheatSheet.css"; +import * as cheatsheetJson from "./cheatsheet.json"; +import { ExternalDocsLink } from "../../utils/components/ExternalLinks"; +import { RenkuPythonDocs } from "../../utils/constants/Docs"; +import { Clipboard } from "../../utils/components/Clipboard"; +import { Col } from "../../utils/ts-wrappers"; + +interface CommandDescProps { + command: string; + desc: string | React.ReactNode; + clipboard?: boolean; +} +function CommandDesc({ command = "", desc = "", clipboard = true }: CommandDescProps) { + return
+ {command} + { + clipboard ? : null + } +
{desc}
+
; +} + + +interface CommandsRowProps { + children: React.ReactNode; +} +function CommandsRow({ children }: CommandsRowProps) { + return
+ {children} +
; +} + + +function Collaboration() { + const mergeDesc = Incorporate the changes from the <other branch> into your branch. + See the for details. + ; + return
+ +
+

Collaboration

+

+ Working with others requires coordination, and branching/merging is a common way to handle this. +

+
+ + + + + +
; +} + + +function LearnMore() { + return
+ +
+

Want to learn more?

+
+ + +
+ For a more detailed overview of common commands, see the {" "} + {/* eslint-disable-next-line max-len */} + . +
+
+ The covers much more. +
+ +
; +} + +interface CommandsGroupProps { + group: GroupCommand; +} +function CommandsGroup({ group }: CommandsGroupProps) { + const commands = group.commands.map((command) => { + if (command.target.includes("ui")) { + return ( + ); + } + return null; + }); + return
+ +

{group.name}

+ + + {commands} + +
; +} + +interface CheatSheetFile { + default: { + groups: GroupCommand[]; + } +} +interface Command { + command: string; + description: string; + target: string[]; +} +interface GroupCommand { + name: string; + commands: Command[]; +} +interface SessionCheatSheetGeneratedProps { + version?: string; +} +function SessionCheatSheetGenerated({ version }: SessionCheatSheetGeneratedProps) { + const [groups, setGroups] = useState([]); + useEffect(() => { + const cheatSheet: CheatSheetFile = getCheatSheetByVersion(version); + const uiGroups = cheatsheetJsonToUIGroups(cheatSheet); + setGroups(uiGroups); + }, [version]); + + return
+

Renku Cheat Sheet

+ { groups.map((group) => )} + + +
; +} + +function getCheatSheetByVersion(version?: string): CheatSheetFile { + return cheatsheetJson as unknown as CheatSheetFile; +} + +function cheatsheetJsonToUIGroups(cheatSheet: CheatSheetFile) { + const allGroups: GroupCommand[] = cheatSheet?.default?.groups; + return allGroups.filter((group: GroupCommand) => { + const uiCommands = group?.commands?.filter( (command: Command) => { + return command.target?.includes("ui"); + }); + return uiCommands.length; + }); +} + +export default SessionCheatSheetGenerated; diff --git a/client/src/notebooks/components/cheatsheet.json b/client/src/notebooks/components/cheatsheet.json new file mode 100644 index 0000000000..246f67cf16 --- /dev/null +++ b/client/src/notebooks/components/cheatsheet.json @@ -0,0 +1,101 @@ +{ + "groups": [ + { + "name": "Typical Workflow", + "commands": [ + { + "command": "$ git status", + "description": "Take a look at what you have done since the last save.", + "target": [ + "ui", + "rp" + ] + }, + { + "command": "$ renku save -m ", + "description": "Save your latest work, providing a message explaining what you have done.", + "target": [ + "ui", + "rp" + ] + }, + { + "command": "$ renku run \u2026", + "description": "Run your code, capturing lineage of the inputs and outputs using Renku.", + "target": [ + "ui", + "rp" + ] + } + ] + }, + { + "name": "Getting Started", + "commands": [] + }, + { + "name": "Working with Renku Datasets", + "commands": [ + { + "command": "$ renku dataset create ", + "description": "Create a new dataset called .", + "target": [ + "rp", + "ui" + ] + }, + { + "command": "$ renku dataset ls", + "description": "List all datasets in the project.", + "target": [ + "rp", + "ui" + ] + }, + { + "command": "$ renku dataset add ", + "description": "Add data from to a dataset. can be a local\nfile path, an http(s) address or a Git git+http or git+ssh repository.", + "target": [ + "rp", + "ui" + ] + } + ] + }, + { + "name": "Running", + "commands": [] + }, + { + "name": "Workflows", + "commands": [] + }, + { + "name": "Config", + "commands": [] + }, + { + "name": "Misc", + "commands": [] + }, + { + "name": "Undo Renku Command", + "commands": [ + { + "command": "$ renku rollback", + "description": "Rollback project to a previous point in time.", + "target": [ + "ui" + ] + }, + { + "command": "$ renku workflow revert ", + "description": "Undo a Renku workflow execution.", + "target": [ + "ui" + ] + } + ] + } + ] +}