Allow italics, bold in Descriptor list and Dataset titles

- `<Markdown` supports `basic` attribute that limits what markdown is allowed
- `<MarkdownField` supports `basicMarkdown` property

src/ui/catalog/descriptorlist/Card.tsx

@@ -12,7 +12,7 @@ const DescriptorListCard = ({descriptorList, className}: {descriptorList: Descri
       return (
         <Card className={ className }>
           <CardHeader title={ (
-            <DescriptorListLink to={ descriptorList }>{ descriptorList.title || 'Untitled' }</DescriptorListLink>
+            <DescriptorListLink to={ descriptorList }>{ descriptorList.title ? <Markdown basic source={ descriptorList.title } /> : 'Untitled' }</DescriptorListLink>
             ) } />
           <Divider />
           { descriptorList.description && descriptorList.description.substring(0, 200) !== '' && (

src/ui/common/markdown/index.tsx

@@ -6,23 +6,42 @@ import FormControl from 'material-ui/Form/FormControl';
 
 interface IMarkdownTextProps extends React.HTMLProps<HTMLElement> {
     source: string;
+    basic?: boolean;
 }
 
 // TODO Add textLength attribute to trim text here, not in the parent
-export default function Markdown({source, style, className}: IMarkdownTextProps) {
+export default function Markdown({source, style, className, basic}: IMarkdownTextProps) {
 
   if (source) {
-    return (<div style={ style }><MarkdownComponent className={ `markdown ${className ? className : ''}` } source={ source } /></div>);
+    if (basic) {
+      // the 'markdown-basic' className is used to render the div as inline-block
+      return (
+        <MarkdownComponent skipHtml unwrapDisallowed allowedTypes={ [ 'strong', 'emphasis'] }
+          className={ `markdown-basic ${className ? className : ''}` } source={ source } />
+      );
+    } else {
+      if (style) {
+        return (
+          <div style={ style }><MarkdownComponent skipHtml
+            className={ `markdown ${className ? className : ''}` } source={ source } />
+          </div>
+        );
+      } else {
+        return <div><MarkdownComponent skipHtml className={ `markdown ${className ? className : ''}` } source={ source } /></div>;
+      }
+    }
   } else {
     return null;
   }
 }
 
-export const MarkdownField = ({input, InputLabelProps, label, meta: {touched, error}, ...custom}) => (
-
-<FormControl fullWidth>
-    <InputLabel { ...InputLabelProps }>{ label }</InputLabel>
-    <Input multiline { ...input } { ...custom } />
-    <h6>Markdown supported</h6>
-</FormControl>
-);
+export const MarkdownField = ({basicMarkdown, input, InputLabelProps, label, meta: {touched, error}, ...custom}) => {
+  const basic: boolean = basicMarkdown === undefined || null ? false : basicMarkdown;
+  return (
+    <FormControl fullWidth>
+        <InputLabel { ...InputLabelProps }>{ label }</InputLabel>
+        <Input multiline={ !basic } { ...input } { ...custom } />
+        <h6>{ basic ? 'Basic markdown supported: * **' : 'Full markdown supported' }</h6>
+    </FormControl>
+  );
+};

src/ui/pages/dataset/c/Card.tsx

@@ -78,7 +78,7 @@ class DatasetCard extends React.Component<IDatasetCardProps, any> {
                     title={
                         (
                             <Link to={ '/datasets/' + dataset.uuid }>
-                                { dataset.title }
+                                <Markdown basic source={ dataset.title } />
                             </Link>
                         )
                     }

src/ui/pages/dataset/c/DatasetDisplay.tsx

@@ -225,7 +225,7 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
                 <Grid item xs={ 12 } className="p-20">
                     <Card className={ classes.card } square>
   										<CardHeader className={ classes.cardHeader } title={ (
-  											<span>{ dataset.title } <small>{ dataset.version }</small></span>
+  											<span><Markdown basic source={ dataset.title } /> <small>{ dataset.version }</small></span>
   										) } />
   										<Divider />
   										<CardContent className={ classes.cardContent }>

src/ui/pages/dataset/dataset-stepper/steps/basic-info/BasicInfoForm.tsx

@@ -48,17 +48,18 @@ class BasicInfoStep extends React.Component<ILoginContainerProps, any> {
                     editable={ ! (initialValues.uuid && initialValues.version) }
                     onBlur={ this.save }
                 />
-                <Field
+                <Field required
                     name="title"
-                    component={ TextField }
-                    label="Title of the dataset*"
+                    basicMarkdown
+                    component={ MarkdownField }
+                    label="Title of the dataset"
                     placeholder="Title"
                     onBlur={ this.save }
                 />
                 <Field
                     name="description"
                     component={ MarkdownField }
-                    label="Dataset description*"
+                    label="Dataset description"
                     placeholder="An abstract, short or long description of the resource. Descriptive details improves discoverability of the resource."
                     onBlur={ this.save }
                 />

src/ui/pages/descriptorlist/DisplayPage.tsx

@@ -136,7 +136,7 @@ class DescriptorListPage extends React.Component<IDescriptorListPageProps, any>
 								<Grid item xs={ 12 }>
 									<Card className={ classes.card } square>
 										<CardHeader className={ classes.cardHeader } title={ (
-											<span>{ descriptorList.title } <small>{ descriptorList.versionTag }</small></span>
+											<span><Markdown basic source={ descriptorList.title } /> <small>{ descriptorList.versionTag }</small></span>
 										) } />
 										<Divider />
 										<CardContent className={ classes.cardContent }>

src/ui/pages/descriptorlist/c/DescriptorListForm.tsx

@@ -19,7 +19,7 @@ const DescriptorListForm = ({error, handleSubmit, initialValues, onPublish, part
           editable={ ! (initialValues.uuid && initialValues.version) }
           component={ SelectPartner } partners={ partners } />
       <Field name="crop" label="Crop code" placeholder="maize" component={ TextField } />
-      <Field required name="title" label="Descriptor list title" placeholder="My descriptor" component={ TextField } />
+      <Field required name="title" label="Descriptor list title" placeholder="Descriptors for" basicMarkdown component={ MarkdownField } />
       <Field name="description" label="Description" placeholder="Full description of the descriptor list" component={ MarkdownField } />
       <Field required name="versionTag" label="Version tag" placeholder="1.0" component={ TextField } />
       <Field required name="publisher" label="Publisher" placeholder="" component={ TextField } />

styles/app.styles.scss

@@ -429,6 +429,7 @@ table.genesys-table {
 		}
 	}
 }
+
 // Markdown
 .markdown {
 	& > :first-child {
@@ -454,6 +455,11 @@ table.genesys-table {
 	}
 }
 
+// Markdown basic: the inlined version
+div.markdown-basic {
+	display: inline-block;
+}
+
 h1, h2, h3, h4, h5, h6 {
 	&:first-child {
 		margin-top: 0;