+ {candidates.map((result, idx) => {
+ const {code, qualCode, examplesStatus, candidateId, errorMessage, docs} = result;
+ const examples = result.examples || [];
+ const header = (
+
+
+
+ {idx + 1}
+
+
+ {addDocs(code, docs)}
+
+ );
+ const handleClick = () => getMoreExamples({candidateId, code: qualCode, examples});
+ const isOpen = examples.length > 0 && resultsFeatures.permitExamples;
+ const isLoading = examplesStatus === LOADING;
+ const buttonVariant = examplesStatus === ERROR ? "outline-danger" : "outline-primary"
+ const message = examplesStatus === LOADING ? "Loading..." :
+ examplesStatus === DONE ? "More Examples" :
+ errorMessage;
+ return (
+
+
+
+
+
+ {resultsFeatures.permitExamples ?
+ () : (<>>)}
+
+
+ {resultsFeatures.enableGetMoreExamples ? (
+ ) : (<>>)}
+
+
+
+ );
+ })
+ }
+ {/* https://www.npmjs.com/package/react-spinners */}
+
+
+ )
+};
+
+const CandidateList = connect(mapStateToProps, mapDispatchToProps)(ConnectedCandidateList);
+
+export default CandidateList;
diff --git a/new_webapp/src/components/EditableTable/EditableCell.js b/new_webapp/src/components/EditableTable/EditableCell.js
new file mode 100644
index 00000000..425689e5
--- /dev/null
+++ b/new_webapp/src/components/EditableTable/EditableCell.js
@@ -0,0 +1,68 @@
+import React, { cloneElement } from 'react';
+
+import Highlight from 'react-highlight.js';
+
+/**
+ * Editable Cell:
+ * Props:
+ * - cell
+ * - editingCellId : str
+ * - onUpdateCell : ({value, colName}, row) -> event -> ()
+ * - onClick : (row) -> ()
+ * - onBlur : (row) -> ()
+ */
+export const EditableCell = ({cell, editingColId, editingRowId, value,
+ onUpdateCell, onClickEdit, onClickSave}) => {
+ const onKeyPress = (event) => {
+ if (event.key === "Enter") {
+ onClickSave({colName: editingColId, rowName: editingRowId});
+ }
+ };
+
+ const k = cell.rowId + '-' + cell.colName;
+
+ if(cell.rowId === editingRowId) {
+ const inputCell = (