Merge pull request #26 in PROD/datahubenterprise from ~MWOOLDRI/datah…

…ubenterprise:ux-updates to develop

* commit '675bd3d0f24d501a0907d5369fa31e3695e77678':
  Style and formatting updates

web/src/main/explorer-ui/src/assets/mock-data/search-results.js

@@ -7,7 +7,7 @@ const searchResultsData =
             source: 'AdvantageFlow',
             fileType: 'JSON',
             user: 'admin',
-            content: 'John Smith 28 124 Cascade Blvd San Franscisco CA 98765 655-907-8899 655-887-9898 [email protected]'
+            content: 'Lorem ipsum dolor sit amet, eos ei utamur scriptorem, omnesque efficiendi interesset vis an. Illud ullum vim te, sit atqui dolore cu, vix te modus lorem sadipscing.'
         },
         {
             collection: 'Customer',
@@ -16,16 +16,16 @@ const searchResultsData =
             source: 'AdvantageFlow',
             fileType: 'JSON',
             user: 'admin',
-            content: 'Mary Lou'
+            content: 'Quo sanctus intellegebat conclusionemque an, has libris dolores interesset ex. Vidisse eruditi incorrupte in quo, ex mea primis ridens minimum. Ad rebum eligendi atomorum has.'
         },
         {
             collection: 'MapCust',
             id: 1002,
             created: '2005-03-22T12:03:07.665187-07:00',
             source: 'BedrockFlow',
-            fileType: 'CSV',
+            fileType: 'XML',
             user: 'admin',
-            content: 'Some data here...'
+            content: 'Ut pri intellegam dissentiunt, ex velit voluptua qui, vis ne quod exerci postea. Ex solum mentitum ponderum eum, eu per congue laoreet sapientem. Nam ad veri principes, ut mea corrumpit accommodare.'
         },
         {
             collection: 'Product',
@@ -34,7 +34,7 @@ const searchResultsData =
             source: 'ProdFlow',
             fileType: 'XML',
             user: 'admin',
-            content: 'Andrew Deer'
+            content: 'Vel minim audiam in, eu facer legere vim, qui noster inermis reformidans cu. Ut dolore fabulas scribentur vis, alterum perpetua imperdiet eum ex.'
         },
         {
             collection: 'Product',
@@ -43,7 +43,7 @@ const searchResultsData =
             source: 'TestFlow',
             fileType: 'JSON',
             user: 'admin',
-            content: 'Test test test'
+            content: 'Lorem ipsum dolor sit amet, eos ei utamur scriptorem, omnesque efficiendi interesset vis an. Illud ullum vim te, sit atqui dolore cu, vix te modus lorem sadipscing.'
         },
         {
             collection: 'Customer',
@@ -52,7 +52,7 @@ const searchResultsData =
             source: 'AdvantageFlow',
             fileType: 'JSON',
             user: 'admin',
-            content: 'DeAndre Gold'
+            content: 'Quo sanctus intellegebat conclusionemque an, has libris dolores interesset ex. Vidisse eruditi incorrupte in quo, ex mea primis ridens minimum. Ad rebum eligendi atomorum has.'
         },
         {
             collection: 'MapProd',
@@ -61,16 +61,16 @@ const searchResultsData =
             source: 'Prod2Flow',
             fileType: 'XML',
             user: 'admin',
-            content: 'This is the product for...'
+            content: 'Ut pri intellegam dissentiunt, ex velit voluptua qui, vis ne quod exerci postea. Ex solum mentitum ponderum eum, eu per congue laoreet sapientem. Nam ad veri principes, ut mea corrumpit accommodare.'
         },
         {
             collection: 'Product',
             id: 4566,
             created: '2014-03-02T12:03:07.665187-07:00',
             source: 'MyProdFlow',
-            fileType: 'CSV',
+            fileType: 'JSON',
             user: 'admin',
-            content: 'Air Conditioned'
+            content: 'Vel minim audiam in, eu facer legere vim, qui noster inermis reformidans cu. Ut dolore fabulas scribentur vis, alterum perpetua imperdiet eum ex.'
         },
         {
             collection: 'Customer',
@@ -79,16 +79,16 @@ const searchResultsData =
             source: 'AdvantageFlow',
             fileType: 'JSON',
             user: 'admin',
-            content: 'Stephanie Laurie'
+            content: 'Lorem ipsum dolor sit amet, eos ei utamur scriptorem, omnesque efficiendi interesset vis an. Illud ullum vim te, sit atqui dolore cu, vix te modus lorem sadipscing.'
         },
         {
             collection: 'MapCust',
             id: 123,
             created: '2014-03-23T12:03:07.665187-07:00',
             source: 'MappingCustFlow',
-            fileType: 'CSV',
+            fileType: 'XML',
             user: 'admin',
-            content: 'Mapping to be done here'
+            content: 'Quo sanctus intellegebat conclusionemque an, has libris dolores interesset ex. Vidisse eruditi incorrupte in quo, ex mea primis ridens minimum. Ad rebum eligendi atomorum has.'
         }
     ];
 

web/src/main/explorer-ui/src/components/detail-header/detail-header.module.scss

@@ -1,6 +1,7 @@
 .title {
     font-size: 18px;
     font-weight: bold;
+    margin-bottom: 2px;
   }
 
   .summary {

web/src/main/explorer-ui/src/components/detail-header/detail-header.tsx

@@ -9,19 +9,19 @@ const Header = (props) => {
         <>
             <div id='header'>
                 <div id='title' className={styles.title}>
-                    <Text>Customer</Text>
+                    <Text>Customer </Text>
                     <Icon style={{ fontSize: '12px' }} type="right" />
-                    <Text type="secondary">id: </Text>
+                    <Text type="secondary"> id: </Text>
                     <Text>{props.document.envelope.instance.id}</Text>
                 </div>
                 <div id='summary' className={styles.summary}>
                     <Text type="secondary">Created: </Text>
                     <Text>{props.document.envelope.headers.createdOn}</Text>
-                    <Text type="secondary"> Sources: </Text>
+                    <Text type="secondary">&nbsp; &nbsp; Sources: </Text>
                     <Text>{props.document.envelope.headers.sources[0].name}</Text>
-                    <Text type="secondary"> File Type: </Text>
+                    <Text type="secondary">&nbsp; &nbsp; File Type: </Text>
                     <Text>JSON</Text>
-                    <Text type="secondary"> User: </Text>
+                    <Text type="secondary">&nbsp; &nbsp; User: </Text>
                     <Text>{props.document.envelope.headers.createdBy}</Text>
                 </div>
             </div>

web/src/main/explorer-ui/src/components/search-pagination/search-pagination.tsx

@@ -6,8 +6,10 @@ const SearchPagination = () => {
     return (
         <div className={styles.searchPaginationContainer}>
             <Pagination 
+            	size="small" 
                 defaultCurrent={6} 
-                total={50} 
+            	total={50} 
+            	showSizeChanger 
             />
         </div>
     )

web/src/main/explorer-ui/src/components/search-results/search-results.module.scss

@@ -5,6 +5,6 @@
 }
 
 .label {
-    color: grey;
+    color: rgb(150, 150, 150);
     font-weight: bold;
 }

web/src/main/explorer-ui/src/components/search-results/search-results.tsx

@@ -17,15 +17,15 @@ const SearchResults:React.FC<Props> = (props) => {
                 renderItem={item => (
                     <List.Item>
                         <List.Item.Meta
-                            title={<Link to="/detail" style={{ color: 'black', fontWeight: 'bold' }}>{item.collection + " > id: " + item.id}</Link>} 
+                            title={<Link to="/detail" style={{ color: 'rgba(0, 0, 0, 0.65)', fontWeight: 'bold', fontSize: '16px' }}>{item.collection + " > id: " + item.id}</Link>} 
                             description={
                                 <p>
                                     <label className={styles.label}>Created: </label>{item.created} 
                                     <label className={styles.label}>&nbsp; &nbsp; Source: </label>{item.source}
                                     <label className={styles.label}>&nbsp; &nbsp; File Type: </label>{item.fileType}
                                     <label className={styles.label}>&nbsp; &nbsp; User: </label>{item.user}
                                     <br />
-                                    <label className={styles.label}>Content: </label>{item.content}
+                                    {item.content}
                                 </p>
                             }
                         />

web/src/main/explorer-ui/src/components/search-summary/search-summary.module.scss

@@ -2,4 +2,12 @@
     float: left;
     position: relative;
     padding: 10px;
+}
+
+label {
+	color: rgb(150, 150, 150);
+}
+
+.summaryValue {
+	font-weight: bold;
 }

web/src/main/explorer-ui/src/components/search-summary/search-summary.tsx

@@ -5,7 +5,7 @@ const SearchSummary = (props) => {
 
   return (
     <div className={styles.searchSummaryContainer}>
-      Showing 1-10 of 1,234
+      <label>Showing</label> <span className={styles.summaryValue}>1-10</span> <label>of</label> <span className={styles.summaryValue}>1,234</span>
     </div>
   );
 }

web/src/main/explorer-ui/src/components/sidebar/sidebar.module.scss

@@ -1,5 +1,5 @@
 .sidebarContainer {
-	background-color: #f3f3f3;
+	background-color: rgb(245, 245, 245);
 	width: 300px;
-	padding: 15px 0 0 20px;
+	padding: 24px 0 0 22px;
 }

web/src/main/explorer-ui/src/components/table-view/table-view.tsx

@@ -30,7 +30,9 @@ const TableView = (props) => {
           textOverflow: 'ellipsis',
           overflow: 'hidden',
           maxWidth: '150ex',
-          cursor: 'pointer'
+          cursor: 'pointer',
+          padding: '0',
+          margin: '0'
         } as React.CSSProperties
         return <p onClick={() => handleClick()} style={pStyle}>{value}</p>
       },

web/src/main/explorer-ui/src/pages/Detail.tsx

@@ -20,7 +20,7 @@ const Detail: React.FC<Props> = ({ history }) => {
 
   return (
     <Layout>
-      <Content style={{ background: '#fff', padding: '24px' }}>
+      <Content style={{ background: '#fff', padding: '18px 36px' }}>
         <div id='back-button'>
           <PageHeader style={{ padding: '0px', marginBottom: '20px' }} onBack={() => history.push('/browse')} title="Back" />
         </div>
@@ -34,7 +34,7 @@ const Detail: React.FC<Props> = ({ history }) => {
                 Instance
              </Menu.Item>
               <Menu.Item key="full" id='full'>
-                Full
+                Source
              </Menu.Item>
             </Menu>
           </div>