Add ConsoleCLIDownload CRD extension

frontend/__tests__/reducers/features.spec.tsx

@@ -45,6 +45,7 @@ describe('featureReducer', () => {
       [FLAGS.CLUSTER_API]: false,
       [FLAGS.MACHINE_CONFIG]: false,
       [FLAGS.MACHINE_AUTOSCALER]: false,
+      [FLAGS.CONSOLE_CLI_DOWNLOAD]: false,
     }));
   });
 });

frontend/public/components/app-contents.tsx

@@ -125,6 +125,7 @@ const AppContents = withRouter(React.memo(() => (
           <Route path="/overview" exact component={NamespaceRedirect} />
 
           <LazyRoute path="/start-guide" exact loader={() => import('./start-guide' /* webpackChunkName: "start-guide" */).then(m => m.StartGuidePage)} />
+          <LazyRoute path="/command-line-tools" exact loader={() => import('./command-line-tools' /* webpackChunkName: "command-line-tools" */).then(m => m.CommandLineToolsPage)} />
 
           <LazyRoute path="/operatorhub/all-namespaces" exact loader={() => import('./operator-hub/operator-hub-page' /* webpackChunkName: "operator-hub" */).then(m => m.OperatorHubPage)} />
           <LazyRoute path="/operatorhub/ns/:ns" exact loader={() => import('./operator-hub/operator-hub-page' /* webpackChunkName: "operator-hub" */).then(m => m.OperatorHubPage)} />

frontend/public/components/command-line-tools.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import { Helmet } from 'react-helmet';
+import * as _ from 'lodash-es';
+
+import { OC_DOWNLOAD_LINK, ODO_DOWNLOAD_LINK, FLAGS } from '../const';
+import { ExternalLink, Firehose, FirehoseResult } from './utils';
+import { connectToFlags } from '../reducers/features';
+import { ConsoleCLIDownloadModel } from '../models';
+import { referenceForModel } from '../module/k8s';
+import { MarkdownView } from './operator-lifecycle-manager/clusterserviceversion';
+
+const CommandLineTools: React.FC<CommandLineToolsProps> = ({obj}) => {
+  const title = 'Command Line Tools';
+  const additionalCommandLineTools = _.map(_.sortBy(_.get(obj, 'data'), 'spec.displayName'), (tool) => {
+    const displayName = tool.spec.displayName;
+    const defaultLinkText = `Download ${displayName}`;
+    return <React.Fragment key={tool.metadata.uid}>
+      <hr />
+      <h2 className="co-section-heading">{displayName}</h2>
+      <MarkdownView content={tool.spec.description} exactHeight />
+      {tool.spec.links.length === 1 && <p><ExternalLink href={tool.spec.links[0].href} text={tool.spec.links[0].text || defaultLinkText} /></p>}
+      {tool.spec.links.length > 1 && <ul>
+        {_.map(tool.spec.links, (link, i) => <li key={i}><ExternalLink href={link.href} text={link.text || defaultLinkText} /></li>)}
+      </ul>}
+    </React.Fragment>;
+  });
+
+  return <React.Fragment>
+    <Helmet>
+      <title>{title}</title>
+    </Helmet>
+    <div className="co-m-pane__body">
+      <h1 className="co-m-pane__heading">
+        <div className="co-m-pane__name">
+          {title}
+        </div>
+      </h1>
+      <h2 className="co-section-heading">oc - OpenShift Command Line Interface (CLI)</h2>
+      <p>With the OpenShift command line interface, you can create applications and manage OpenShift projects from a terminal.</p>
+      <p>The oc binary offers the same capabilities as the kubectl binary, but it is further extended to natively support OpenShift Container Platform features.</p>
+      <p>
+        <ExternalLink href={OC_DOWNLOAD_LINK} text="Download oc" />
+        {(window as any).SERVER_FLAGS.requestTokenURL && (
+          <React.Fragment>
+            &nbsp;<span className="co-action-divider" aria-hidden="true">|</span>
+            &nbsp;<ExternalLink href={(window as any).SERVER_FLAGS.requestTokenURL} text="Copy Login Command" />
+          </React.Fragment>
+        )}
+      </p>
+      <hr />
+      <h2 className="co-section-heading">odo - Developer-focused CLI for OpenShift</h2>
+      <p><span className="label label-warning">Tech Preview</span></p>
+      <p>OpenShift Do (odo) is a fast, iterative, and straightforward CLI tool for developers who write, build, and deploy applications on OpenShift.</p>
+      <p>odo abstracts away complex Kubernetes and OpenShift concepts, thus allowing developers to focus on what is most important to them: code.</p>
+      <p><ExternalLink href={ODO_DOWNLOAD_LINK} text="Download odo" /></p>
+      {additionalCommandLineTools}
+    </div>
+  </React.Fragment>;
+};
+
+export const CommandLineToolsPage = connectToFlags(FLAGS.CONSOLE_CLI_DOWNLOAD)(({ flags, ...props }) => {
+  const resources = flags[FLAGS.CONSOLE_CLI_DOWNLOAD]
+    ? [{
+      kind: referenceForModel(ConsoleCLIDownloadModel),
+      isList: true,
+      prop: 'obj',
+    }]
+    : [];
+
+  return <Firehose resources={resources}>
+    <CommandLineTools {...props as any} />
+  </Firehose>;
+});
+
+type CommandLineToolsProps = {
+  obj: FirehoseResult;
+};

frontend/public/components/masthead-toolbar.jsx

@@ -12,7 +12,6 @@ import { history, Firehose } from './utils';
 import { openshiftHelpBase } from './utils/documentation';
 import { AboutModal } from './about-modal';
 import { getAvailableClusterUpdates, clusterVersionReference } from '../module/k8s/cluster-settings';
-import { commandLineToolsModal } from './modals';
 import * as plugins from '../plugins';
 
 const SystemStatusButton = ({statuspageData, className}) => !_.isEmpty(_.get(statuspageData, 'incidents'))
@@ -168,7 +167,7 @@ class MastheadToolbar_ extends React.Component {
 
   _onCommandLineTools(e) {
     e.preventDefault();
-    commandLineToolsModal({});
+    history.push('/command-line-tools');
   }
 
   _copyLoginCommand(e) {

frontend/public/components/modals/index.ts

@@ -60,9 +60,6 @@ export const tolerationsModal = (props) => import('./tolerations-modal' /* webpa
 export const installPlanPreviewModal = (props) => import('./installplan-preview-modal' /* webpackChunkName: "installplan-preview-modal" */)
   .then(m => m.installPlanPreviewModal(props));
 
-export const commandLineToolsModal = (props) => import('./command-line-tools-modal' /* webpackChunkName: "command-line-tools-modal" */)
-  .then(m => m.commandLineToolsModal(props));
-
 export const expandPVCModal = (props) => import('./expand-pvc-modal' /* webpackChunkName: "expand-pvc-modal" */)
   .then(m => m.expandPVCModal(props));
 

frontend/public/components/operator-lifecycle-manager/clusterserviceversion.tsx

@@ -153,7 +153,7 @@ export const ClusterServiceVersionsPage = connect(stateToProps)((props: ClusterS
   </React.Fragment>;
 });
 
-export const MarkdownView = (props: {content: string, styles?: string}) => {
+export const MarkdownView = (props: {content: string, styles?: string, exactHeight?: boolean}) => {
   return <AsyncComponent loader={() => import('./markdown-view').then(c => c.SyncMarkdownView)} {...props} />;
 };
 

frontend/public/components/operator-lifecycle-manager/markdown-view.tsx

@@ -25,7 +25,7 @@ const markdownConvert = (markdown) => {
   });
 };
 
-export class SyncMarkdownView extends React.Component<{content: string, styles?: string}, {}> {
+export class SyncMarkdownView extends React.Component<{content: string, styles?: string, exactHeight?: boolean}, {}> {
   private frame: any;
 
   constructor(props) {
@@ -45,8 +45,12 @@ export class SyncMarkdownView extends React.Component<{content: string, styles?:
 
     // Let the new height take effect, then reset again once we recompute
     setTimeout(() => {
-      // Increase by 15px for the case where a horizontal scrollbar might appear
-      this.frame.style.height = `${this.frame.contentWindow.document.body.firstChild.scrollHeight + 15}px`;
+      if (this.props.exactHeight) {
+        this.frame.style.height = `${this.frame.contentWindow.document.body.firstChild.scrollHeight}px`;
+      } else {
+        // Increase by 15px for the case where a horizontal scrollbar might appear
+        this.frame.style.height = `${this.frame.contentWindow.document.body.firstChild.scrollHeight + 15}px`;
+      }
     });
   }
 
@@ -72,6 +76,6 @@ export class SyncMarkdownView extends React.Component<{content: string, styles?:
       ${this.props.styles ? this.props.styles : ''}
       </style>
       <body><div style="overflow-y: auto;">${markdownConvert(this.props.content || 'Not available')}</div></body>`;
-    return <iframe sandbox="allow-popups allow-same-origin" srcDoc={contents} style={{border: '0px', width: '100%', height: '0'}} ref={(r) => this.frame = r} onLoad={() => this.updateDimensions()} />;
+    return <iframe sandbox="allow-popups allow-same-origin" srcDoc={contents} style={{border: '0px', display: 'block', width: '100%', height: '0'}} ref={(r) => this.frame = r} onLoad={() => this.updateDimensions()} />;
   }
 }

frontend/public/const.ts

@@ -67,4 +67,5 @@ export enum FLAGS {
   CLUSTER_VERSION = 'CLUSTER_VERSION',
   MACHINE_CONFIG = 'MACHINE_CONFIG',
   MACHINE_AUTOSCALER = 'MACHINE_AUTOSCALER',
+  CONSOLE_CLI_DOWNLOAD = 'CONSOLE_CLI_DOWNLOAD',
 }

frontend/public/models/index.ts

@@ -899,5 +899,17 @@ export const ConsoleLinkModel: K8sKind = {
   namespaced: false,
   kind: 'ConsoleLink',
   id: 'consolelink',
+};
+
+export const ConsoleCLIDownloadModel: K8sKind = {
+  label: 'Console CLI Download',
+  labelPlural: 'Console CLI Downloads',
+  apiVersion: 'v1',
+  apiGroup: 'console.openshift.io',
+  plural: 'consoleclidownloads',
+  abbr: 'CCD',
+  namespaced: false,
+  kind: 'ConsoleCLIDownload',
+  id: 'consoleclidownload',
   crd: true,
 };

frontend/public/models/yaml-templates.ts

@@ -817,6 +817,19 @@ spec:
   href: 'https://www.example.com'
   location: HelpMenu
   text: Additional help menu link
+`).setIn([referenceForModel(k8sModels.ConsoleCLIDownloadModel), 'default'], `
+apiVersion: console.openshift.io/v1
+kind: ConsoleCLIDownload
+metadata:
+  name: example
+spec:
+  displayName: examplecli
+  description: |
+    This is an example CLI download description that can include markdown such as paragraphs, unordered lists, code, [links](https://www.example.com), etc.
+
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a lobortis justo, eu suscipit purus.
+  links:
+    - href: 'https://www.example.com'
 `);
 
 const pluginTemplates = ImmutableMap<GroupVersionKind, ImmutableMap<string, string>>()

frontend/public/reducers/features.ts

@@ -11,6 +11,7 @@ import {
   MachineConfigModel,
   OperatorSourceModel,
   PrometheusModel,
+  ConsoleCLIDownloadModel,
 } from '../models';
 import { referenceForModel } from '../module/k8s';
 import { ActionType as K8sActionType } from '../actions/k8s';
@@ -32,6 +33,7 @@ export const baseCRDs = {
   [referenceForModel(MachineModel)]: FLAGS.CLUSTER_API,
   [referenceForModel(MachineConfigModel)]: FLAGS.MACHINE_CONFIG,
   [referenceForModel(MachineAutoscalerModel)]: FLAGS.MACHINE_AUTOSCALER,
+  [referenceForModel(ConsoleCLIDownloadModel)]: FLAGS.CONSOLE_CLI_DOWNLOAD,
 };
 
 const CRDs = { ...baseCRDs };