Allow user to show/hide internal commands in ui

Signed-off-by: Demetris Manikas <dmanikas@admin.grnet.gr>

Author: Demetris Manikas

ui/package.json

@@ -69,8 +69,8 @@
     "xterm": "4.1.0"
   },
   "scripts": {
-    "start": "NODE_ENV=development nodemon scripts/start.js",
-    "build": "node scripts/build.js"
+    "start": "NODE_ENV=development NODE_OPTIONS=--openssl-legacy-provider nodemon scripts/start.js",
+    "build": "NODE_OPTIONS=--openssl-legacy-provider node scripts/build.js"
   },
   "devDependencies": {
     "@types/jest": "^23.3.10",

ui/src/components/views/Commands/Commands/CommandsList/CommandsList.tsx

@@ -39,7 +39,9 @@ class CommandsList extends React.PureComponent<Props, State> {
       return <PortletSimple key={key}>
         {{
           top: {
-            left: key,
+            left: cmd.internal === true ? (<div>
+            {key} <br/> <span style={{fontSize: 'small'}}>(internal)</span>
+            </div>): key,
             right: (
                 <React.Fragment>
                   <IconButton

ui/src/contexts/withDevSpaceConfig/withDevSpaceConfig.tsx

@@ -50,6 +50,7 @@ interface RawConfig {
 
 export interface Command {
   command: string;
+  internal?: boolean;
 }
 
 interface ImageConfig {

ui/src/pages/commands/commands.tsx

@@ -10,13 +10,15 @@ import CommandsLinkTabSelector from 'components/basic/LinkTabSelector/CommandsLi
 import CommandsList, { getURLByName } from 'components/views/Commands/Commands/CommandsList/CommandsList';
 import InteractiveTerminal, { InteractiveTerminalProps } from 'components/advanced/InteractiveTerminal/InteractiveTerminal';
 import AdvancedCodeLine from 'components/basic/CodeSnippet/AdvancedCodeLine/AdvancedCodeLine';
+import Button from '../../components/basic/Button/Button';
 
 interface Props extends DevSpaceConfigContext, PopupContext, WarningContext, RouteComponentProps {}
 
 interface State {
   podList?: V1PodList;
   selected?: string;
   terminals: StateTerminalProps[];
+  showInternal: boolean;
 }
 
 interface StateTerminalProps extends InteractiveTerminalProps {
@@ -26,6 +28,7 @@ interface StateTerminalProps extends InteractiveTerminalProps {
 class Commands extends React.PureComponent<Props, State> {
   state: State = {
     terminals: [],
+    showInternal: false
   };
 
   onSelectCommand = (commandName: string) => {
@@ -81,11 +84,18 @@ class Commands extends React.PureComponent<Props, State> {
   };
 
   render() {
+    let commands = this.props.devSpaceConfig.config.commands;
+    if (this.state.showInternal === false) {
+      commands = Object.fromEntries(Object.entries(commands).filter(([_key, config]) => {
+        return config.internal !== true
+      }))
+    }
+
     return (
       <PageLayout className={styles['commands-component']} heading={<CommandsLinkTabSelector />}>
         {!this.props.devSpaceConfig.config ||
-        !this.props.devSpaceConfig.config.commands ||
-        Object.entries(this.props.devSpaceConfig.config.commands).length === 0 ? (
+          !this.props.devSpaceConfig.config.commands ||
+          Object.entries(this.props.devSpaceConfig.config.commands).length === 0 ? (
           <div className={styles['no-config']}>
             <div>
               No commands available. Take a look at&nbsp;
@@ -98,13 +108,27 @@ class Commands extends React.PureComponent<Props, State> {
         ) : (
           <React.Fragment>
             {this.renderTerminals()}
-            <div className={styles['info-part']}>
-              <CommandsList
-                commandsList={this.props.devSpaceConfig.config.commands}
-                running={this.state.terminals.map((terminal) => terminal.url)}
-                selected={this.state.selected}
-                onSelect={this.onSelectCommand}
-              />
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+              <div style={{ height: '3rem', display: 'flex', justifyContent: 'right', marginRight: '10px', marginBottom: '10px' }}>
+                <Button
+                  onClick={() => {
+                    this.setState((state) => {
+                      return {
+                        showInternal: !state.showInternal
+                      }
+                    })
+                  }}
+                >{this.state.showInternal ? 'Hide internal' : 'Show internal'}</Button>
+              </div>
+
+              <div className={styles['info-part']} style={{ overflowY: 'auto' }}>
+                <CommandsList
+                  commandsList={commands}
+                  running={this.state.terminals.map((terminal) => terminal.url)}
+                  selected={this.state.selected}
+                  onSelect={this.onSelectCommand}
+                />
+              </div>
             </div>
           </React.Fragment>
         )}

ui/tsconfig.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "baseUrl": "src",
     "typeRoots": ["./node_modules/@types", "./@types"],
-    "lib": ["dom", "es2015", "es2016", "es2017"], // es6, es7, es8
+    "lib": ["dom", "es2015", "es2016", "es2017", "es2019"], // es6, es7, es8
     "target": "es5",
     "module": "esnext",
     "jsx": "react", // "preserve" would throw error