Display chaincode metadata in chaincodes tab

Signed-off-by: saksham1203 <[email protected]>

Author: saksham1203

client/src/components/Lists/Chaincodes.js

@@ -7,19 +7,49 @@ import { withStyles } from '@material-ui/core/styles';
 import matchSorter from 'match-sorter';
 import Dialog from '@material-ui/core/Dialog';
 import ReactTable from '../Styled/Table';
-import ChaincodeForm from '../Forms/ChaincodeForm';
-import ChaincodeModal from '../View/ChaincodeModal';
 import { chaincodeListType } from '../types';
+import ChaincodeMetaDataView from '../View/ChaincodeMetaDataView';
 
-const styles = theme => ({
-	hash: {
-		whiteSpace: 'nowrap',
-		overflow: 'hidden',
-		textOverflow: 'ellipsis',
-		maxWidth: 60,
-		letterSpacing: '2px'
-	}
-});
+const styles = theme => {
+	const { type } = theme.palette;
+	const dark = type === 'dark';
+	return {
+		hash: {
+			'&, & li, & ul': {
+				overflow: 'visible !important'
+			}
+		},
+		partialHash: {
+			textAlign: 'center',
+			position: 'relative !important',
+			'&:hover $fullHash': {
+				display: 'block',
+				position: 'absolute !important',
+				padding: '4px 4px',
+				backgroundColor: dark ? '#5e558e' : '#000000',
+				marginTop: -30,
+				marginLeft: -215,
+				borderRadius: 8,
+				color: '#ffffff',
+				opacity: dark ? 1 : undefined
+			},
+			'&:hover $lastFullHash': {
+				display: 'block',
+				position: 'absolute !important',
+				padding: '4px 4px',
+				backgroundColor: dark ? '#5e558e' : '#000000',
+				marginTop: -30,
+				marginLeft: -415,
+				borderRadius: 8,
+				color: '#ffffff',
+				opacity: dark ? 1 : undefined
+			}
+		},
+		fullHash: {
+			display: 'none'
+		}
+	};
+};
 
 export class Chaincodes extends Component {
 	constructor(props) {
@@ -31,27 +61,31 @@ export class Chaincodes extends Component {
 		};
 	}
 
-	handleDialogOpen = () => {
+	handleDialogOpen = async tid => {
+		await this.props.getChaincodeMetaData(tid);
 		this.setState({ dialogOpen: true });
 	};
 
 	handleDialogClose = () => {
 		this.setState({ dialogOpen: false });
 	};
 
-	sourceDialogOpen = chaincode => {
-		this.setState({ chaincode });
-		this.setState({ sourceDialog: true });
-	};
-
-	sourceDialogClose = () => {
-		this.setState({ sourceDialog: false });
-	};
-
 	reactTableSetup = classes => [
 		{
 			Header: 'Chaincode Name',
 			accessor: 'chaincodename',
+			className: classes.hash,
+			Cell: row => (
+				<span>
+					<a
+						data-command="transaction-partial-hash"
+						className={classes.partialHash}
+						onClick={() => this.handleDialogOpen(row.value)}
+						href="#/chaincodes"
+					>{row.value}
+					</a>
+				</span>
+			),
 			filterMethod: (filter, rows) =>
 				matchSorter(
 					rows,
@@ -112,13 +146,10 @@ export class Chaincodes extends Component {
 	];
 
 	render() {
-		const { chaincodeList, classes } = this.props;
+		const { chaincodeList, chaincodeMetaData, classes } = this.props;
 		const { dialogOpen, sourceDialog, chaincode } = this.state;
 		return (
 			<div>
-				{/* <Button className="button" onClick={() => this.handleDialogOpen()}>
-          Add Chaincode
-          </Button> */}
 				<ReactTable
 					data={chaincodeList}
 					columns={this.reactTableSetup(classes)}
@@ -133,18 +164,9 @@ export class Chaincodes extends Component {
 					fullWidth
 					maxWidth="md"
 				>
-					<ChaincodeForm />
-				</Dialog>
-				<Dialog
-					open={sourceDialog}
-					onClose={this.sourceDialogClose}
-					fullWidth
-					maxWidth="md"
-				>
-					<ChaincodeModal
-						chaincode={chaincode}
-						classes={classes}
-						onClose={this.sourceDialogClose}
+					<ChaincodeMetaDataView
+						chaincodeMetaData={chaincodeMetaData}
+						onClose={this.handleDialogClose}
 					/>
 				</Dialog>
 			</div>

client/src/components/Lists/Chaincodes.spec.js

@@ -6,6 +6,7 @@
 import React from 'react';
 import ReactTable from '../Styled/Table';
 import { Chaincodes } from './Chaincodes';
+import ChaincodeMetaDataView from '../View/ChaincodeMetaDataView';//s
 
 jest.useFakeTimers();
 
@@ -33,6 +34,7 @@ const setup = () => {
       txCount: '36',
     },
     getChaincodes: jest.fn(),
+    getChaincodeMetaData: jest.fn()
   };
 
   const chaincode = {
@@ -149,18 +151,38 @@ describe('Chaincodes', () => {
     expect(wrapper.find(ReactTable).find('TrGroupComponent').length).toBe(1);
   });
 
-  test('handleDialogOpen sets state to true', () => {
-    const { wrapper } = setup();
-    wrapper.instance().handleDialogOpen();
-    expect(wrapper.state('dialogOpen')).toBe(true);
-  });
-
-  test('handleDialogClose sets state to false', () => {
-    const { wrapper } = setup();
-    wrapper.setState({ dialogOpen: true });
-    wrapper.instance().handleDialogClose();
-    expect(wrapper.state('dialogOpen')).toBe(false);
-  });
+  test('Modal for ChaincodeMetaDataView View should not exist', () => {
+		const { wrapper } = setup();
+		expect(wrapper.find(ChaincodeMetaDataView).exists()).toBe(false);
+	});
+
+	test('Modal for ChaincodeMetaDataView View should exist', () => {
+		const { wrapper } = setup();
+		wrapper.setState({ dialogOpen: true });
+		wrapper.update();
+		expect(wrapper.find(ChaincodeMetaDataView).exists()).toBe(true);
+	});
+
+	test('handleDialogOpen should set dialogOpen to true', async () => {
+		const { wrapper } = setup();
+		await wrapper
+			.instance()
+			.handleDialogOpen(
+				'basic'
+			);
+		expect(wrapper.state('dialogOpen')).toBe(true);
+		wrapper.update();
+		expect(wrapper.find(ChaincodeMetaDataView).exists()).toBe(true);
+	});
+
+	test('handleDialogClose should set dialogOpen to false', () => {
+		const { wrapper } = setup();
+		wrapper.setState({ dialogOpen: true });
+		wrapper.update();
+		wrapper.instance().handleDialogClose();
+		wrapper.update();
+		expect(wrapper.state('dialogOpen')).toBe(false);
+	});
 
   test('sourceDialogOpen', () => {
     const { wrapper, chaincode } = setup();

client/src/components/Main.js

@@ -27,6 +27,7 @@ import {
 	peerStatusType,
 	blockRangeSearchType,
 	blockListSearchType,
+	chaincodeMetaDataType,
 	transactionType,
 	transactionByOrgType,
 	transactionListType
@@ -50,6 +51,7 @@ const {
 	peerListSelector,
 	txnListSelector,
 	blockSearchSelector,
+	chaincodeMetaDataSelector,
 	transactionSelector,
 	transactionListSelector,
 	blockRangeSearchSelector,
@@ -88,7 +90,8 @@ export const Main = props => {
 		txnList,
 		blockSearch,
 		peerStatus,
-		txnList,//s
+		chaincodeMetaData,
+		getChaincodeMetaData,
 		transaction,
 		transactionByOrg,
 		transactionList,
@@ -126,7 +129,9 @@ export const Main = props => {
 		transaction
 	};
 	const chaincodeViewProps = {
-		chaincodeList
+		chaincodeList,
+		chaincodeMetaData,
+		getChaincodeMetaData
 	};
 
 	const channelsViewProps = {
@@ -253,6 +258,7 @@ Main.propTypes = {
 	txnList: txnListType.isRequired,
 	blockSearch: blockSearchType.isRequired,
 	peerStatus: peerStatusType.isRequired,
+	chaincodeMetaData: chaincodeMetaDataType.isRequired,
 	transaction: transactionType.isRequired,
 	transactionByOrg: transactionByOrgType.isRequired,
 	transactionList: transactionListType.isRequired
@@ -269,6 +275,7 @@ const connectedComponent = connect(
 		txnList: txnListSelector(state),
 		blockSearch: blockSearchSelector(state),
 		peerStatus: peerStatusSelector(state),
+		chaincodeMetaData: chaincodeMetaDataSelector(state),
 		transaction: transactionSelector(state),
 		transactionByOrg: transactionByOrgSelector(state),
 		transactionList: transactionListSelector(state),
@@ -290,7 +297,8 @@ const connectedComponent = connect(
 		getBlockListSearch: tableOperations.blockListSearch,
 		getBlockRangeSearch: tableOperations.blockRangeSearch,
 		getTransactionListSearch: tableOperations.transactionListSearch,
-		getTxnList: tableOperations.txnList
+		getTxnList: tableOperations.txnList,
+		getChaincodeMetaData: tableOperations.chaincodeMetaData,
 	}
 )(Main);
 export default withStyles(styles)(connectedComponent);