Add markdown support to OperatorHub and InstalledOperators pages

openshift · Jun 25, 2020 · ffa2296 · ffa2296
1 parent 50c6e66
commit ffa2296
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 6 deletions.
diff --git a/frontend/packages/operator-lifecycle-manager/src/components/clusterserviceversion.tsx b/frontend/packages/operator-lifecycle-manager/src/components/clusterserviceversion.tsx
@@ -689,6 +689,7 @@ export const MarkdownView = (props: {
   content: string;
   styles?: string;
   exactHeight?: boolean;
+  truncateContent?: boolean;
 }) => {
   return (
     <AsyncComponent
@@ -717,7 +718,7 @@ export const CRDCard: React.SFC<CRDCardProps> = (props) => {
         />
       </CardHeader>
       <CardBody>
-        <p>{crd.description}</p>
+        <MarkdownView content={crd.description} truncateContent />
       </CardBody>
       {canCreate && (
         <RequireCreatePermission model={model} namespace={csv.metadata.namespace}>

diff --git a/...nd/packages/operator-lifecycle-manager/src/components/operand/DEPRECATED_operand-form.tsx b/...nd/packages/operator-lifecycle-manager/src/components/operand/DEPRECATED_operand-form.tsx
@@ -40,6 +40,7 @@ import {
 import { ClusterServiceVersionLogo } from '../index';
 import { ResourceRequirements } from '../descriptors/spec/resource-requirements';
 import { Descriptor, SpecCapability, StatusCapability } from '../descriptors/types';
+import { SyncMarkdownView } from '@console/internal/components/markdown-view';
 import {
   NodeAffinity,
   PodAffinity,
@@ -1208,7 +1209,7 @@ export const DEPRECATED_CreateOperandForm: React.FC<OperandFormProps> = ({
                 icon={_.get(csv, 'spec.icon[0]')}
                 provider={_.get(csv, 'spec.provider')}
               />
-              {providedAPI.description}
+              <SyncMarkdownView content={providedAPI.description} />
             </div>
           )}
         </div>

diff --git a/frontend/packages/operator-lifecycle-manager/src/components/operand/operand-form.tsx b/frontend/packages/operator-lifecycle-manager/src/components/operand/operand-form.tsx
@@ -6,6 +6,7 @@ import * as React from 'react';
 import { ClusterServiceVersionKind, CRDDescription, APIServiceDefinition } from '../../types';
 import { ClusterServiceVersionLogo } from '../index';
 import { DynamicForm } from '@console/shared/src/components/dynamic-form';
+import { SyncMarkdownView } from '@console/internal/components/markdown-view';
 import { getUISchema } from './utils';
 import { prune } from '@console/shared';
 
@@ -54,7 +55,7 @@ export const OperandForm: React.FC<OperandFormProps> = ({
                 icon={_.get(csv, 'spec.icon[0]')}
                 provider={_.get(csv, 'spec.provider')}
               />
-              {providedAPI.description}
+              <SyncMarkdownView content={providedAPI.description} />
             </div>
           )}
         </div>

diff --git a/frontend/public/components/markdown-view.tsx b/frontend/public/components/markdown-view.tsx
@@ -46,7 +46,7 @@ const markdownConvert = (markdown) => {
 };
 
 export class SyncMarkdownView extends React.Component<
-  { content: string; styles?: string; exactHeight?: boolean },
+  { content: string; styles?: string; exactHeight?: boolean; truncateContent?: boolean },
   {}
 > {
   private frame: any;
@@ -89,13 +89,19 @@ export class SyncMarkdownView extends React.Component<
         <link rel="stylesheet" href="${link.href}">`,
       '',
     );
+    const content = this.props.truncateContent
+      ? _.truncate(this.props.content, {
+          length: 100,
+          separator: ' ',
+        })
+      : this.props.content;
 
     const contents = `
       ${linkRefs}
       <style type="text/css">
       body {
         background-color: transparent !important;
-        color: ${this.props.content ? '#333' : '#999'};
+        color: ${content ? '#333' : '#999'};
         font-family: var(--pf-global--FontFamily--sans-serif);
         min-width: auto !important;
       }
@@ -116,7 +122,7 @@ export class SyncMarkdownView extends React.Component<
       ${this.props.styles ? this.props.styles : ''}
       </style>
       <body class="pf-m-redhat-font"><div style="overflow-y: auto;">${markdownConvert(
-        this.props.content || 'Not available',
+        content || 'Not available',
       )}</div></body>`;
     return (
       <iframe