Merge pull request Marklogic-retired#141 in PROD/explorer-ui from ~SV…

…ISHAKA/explorer-ui:DHFPROD-3728 to develop

* commit '9c4ba0aff4066b1b15cf9ea40cc701c3eef5659f':
  redirect icons to detail page
  redirect Icons

src/App.scss

@@ -0,0 +1,6 @@
+.ant-table-row-collapsed::after {
+  content: '>';
+}
+.ant-table-row-expanded::after {
+  content: '\22C1';
+}

src/components/expandable-table-view/expandable-table-view.tsx

@@ -39,6 +39,7 @@ const ExpandableTableView: React.FC<Props> = (props) => {
     })
   }
 
+
   const columns = [
     {
       title: 'Property',

src/components/search-result/search-result.module.scss

@@ -42,4 +42,19 @@
     padding-right: 5px;
     text-transform: uppercase;
   }
+}
+
+.expandableIcon {
+	font-size: 15px;
+	margin-right: 5px;
+	cursor: pointer
+}
+
+.redirectIcons {
+	float: right;
+}
+
+.redirectIcons a {
+	padding: 8px;
+	color: #666;
 }

src/components/search-result/search-result.tsx

@@ -6,6 +6,8 @@ import { dateConverter } from '../../util/date-conversion';
 import { xmlParser } from '../../util/xml-parser';
 import ExpandableTableView from "../expandable-table-view/expandable-table-view";
 import { Icon } from "antd";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faExternalLinkAlt, faCode } from '@fortawesome/free-solid-svg-icons'
 
 interface Props extends RouteComponentProps {
   item: any;
@@ -102,14 +104,20 @@ const SearchResult: React.FC<Props> = (props) => {
   }
 
   return (
-      <div>
+      <div style={{width: '100%'}}>
         <div className={styles.title} onClick={() => showTableEntityProperties()}>
-          <Icon style={{fontSize: '15px', marginRight: '5px'}} type='right' rotate={show ? 90 : undefined}/>
+          <Icon className={styles.expandableIcon} type='right' rotate={show ? 90 : undefined}/>
+          <div className={styles.redirectIcons}>
+            <Link to={{pathname: `/detail/${primaryKeyValue}/${uri}`,state: {selectedValue:'instance'}}} data-cy='primary-key'>
+              <FontAwesomeIcon  icon={faExternalLinkAlt} size="sm" />
+            </Link>
+            <Link to={{pathname: `/detail/${primaryKeyValue}/${uri}`,state: {selectedValue:'source'}}} data-cy='primary-key'>
+              <FontAwesomeIcon  icon={faCode} size="sm" />
+            </Link>
+          </div>
           <span className={styles.entityName} data-cy='entity-name'>{itemEntityName}</span>
           {entityDef.primaryKey && <span className={styles.primaryKey}>{entityDef.primaryKey}:</span>}
-          <Link to={{pathname: `/detail/${primaryKeyValue}/${uri}`}} data-cy='primary-key'>
             {entityDef.primaryKey ? primaryKeyValue : props.item.uri}
-          </Link>
         </div>
         <div className={styles.snippet} data-cy='snipped'>
           {props.item.matches.length >= 1 && snippet}

src/pages/Browse.tsx

@@ -20,6 +20,7 @@ interface Props extends RouteComponentProps<any> {
 }
 
 const Browse: React.FC<Props> = ({ location }) => {
+
   const { Content, Sider } = Layout;
   const componentIsMounted = useRef(true);
   const { user, handleError } = useContext(AuthContext);

src/pages/Detail.tsx

@@ -16,12 +16,13 @@ interface Props extends RouteComponentProps<any> { }
 const { Content } = Layout;
 
 const Detail: React.FC<Props> = ({ history, location }) => {
+
   const { user, handleError } = useContext(AuthContext);
   const uriSplit = location.pathname.replace('/detail/', '');
   const pkValue = uriSplit.split('/')[0] === '-' ? '' : decodeURIComponent(uriSplit.split('/')[0]);
   const uri = decodeURIComponent(uriSplit.split('/')[1]).replace(/ /g, "%2520");
   const docUri = uri.replace(/%25/g, "%");
-  const [selected, setSelected] = useState('instance');
+  const [selected, setSelected] = useState();
   const [data, setData] = useState();
   const [isLoading, setIsLoading] = useState(false);
   const [contentType, setContentType] = useState();
@@ -52,7 +53,12 @@ const Detail: React.FC<Props> = ({ history, location }) => {
             setData(xmlParser(decodedXml).Document);
             setXml(xmlDecoder(decodedXml));
           }
-
+          if(location.state.selectedValue === 'instance') {
+            setSelected('instance')
+          }
+          else{
+            setSelected('full')
+          }
           setIsLoading(false);
         }
 
@@ -71,6 +77,7 @@ const Detail: React.FC<Props> = ({ history, location }) => {
 
   }, []);
 
+
   const handleClick = (event) => {
     setSelected(event.key);
   }
@@ -98,11 +105,11 @@ const Detail: React.FC<Props> = ({ history, location }) => {
         </div>
         <div>
           {
-            isLoading || user.error.type === 'ALERT' ? <div style={{ marginTop: '40px' }}>
+          isLoading || user.error.type === 'ALERT' ? <div style={{ marginTop: '40px' }}>
               <AsyncLoader />
             </div>
               :
-              contentType === 'json' ?
+                contentType === 'json'  ?
                 selected === 'instance' ? (data && <TableView document={data} contentType={contentType} />) : (data && <JsonView document={data} />)
                 :
                 selected === 'instance' ? (data && <TableView document={data} contentType={contentType} />) : (data && <XmlView document={xml} />)