Skip to content

Commit 5cc1776

Browse files
Manishnemade12Manishnemade12
committed
revert(smi-table): clean up unused imports and variables
1 parent b6e4110 commit 5cc1776

File tree

1 file changed

+98
-97
lines changed

1 file changed

+98
-97
lines changed

‎src/components/SMI-Table/index.js‎

Lines changed: 98 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -12,101 +12,11 @@ import passingMark from "../../assets/images/landscape/passing.svg";
1212
import failingMark from "../../assets/images/landscape/failing.svg";
1313
import ServiceMeshIcon from "../../assets/images/service-mesh-icons/service-mesh.svg";
1414

15-
const TOOLTIP_ID = "smi-table-tooltip";
16-
1715
// const halfMark = "../../assets/images/landscape/half.svg";
1816
// const passingMark = "../../assets/images/landscape/passing.svg";
1917
// const failingMark = "../../assets/images/landscape/failing.svg";
2018
// const ServiceMeshIcon = "../../assets/images/service-mesh-icons/service-mesh.svg";
2119

22-
const TableRow = React.memo(({ row, rowIndex, prepareRow }) => {
23-
const [isCollapsed, setIsCollapsed] = useState(false);
24-
25-
prepareRow(row);
26-
27-
return (
28-
<React.Fragment key={`row-${rowIndex}`}>
29-
<tr
30-
id={`row${rowIndex}`}
31-
className="primaryRow"
32-
{...row.getRowProps()}
33-
onClick={() => setIsCollapsed((prevState) => !prevState)}
34-
>
35-
<td>
36-
{
37-
(non_functional.find(ele => ele.name.includes(row.original.mesh_name))) ?
38-
<img data-tooltip-id={TOOLTIP_ID} data-tooltip-content={row.original.mesh_name} className="smiMark" src={non_functional.find(ele => ele.name.includes(row.original.mesh_name)).icon} alt="Mesh Icon" />
39-
: <img data-tooltip-id={TOOLTIP_ID} data-tooltip-content={"Service Mesh"} className="smiMark" src={ServiceMeshIcon} alt="Service Mesh" />
40-
}
41-
</td>
42-
<td>{row.original.mesh_version}</td>
43-
{row.original.more_details.map((spec, index) => {
44-
if (spec["capability"] === "FULL") {
45-
return <td key={`spec${index}`}>
46-
<div className="tooltip-div" data-tooltip-id={TOOLTIP_ID} data-tooltip-content={`${spec["result"]}`}>
47-
<img className="smiMark" src={passingMark} alt="Pass Mark" />
48-
</div>
49-
</td>;
50-
} else if (spec["capability"] === "HALF") {
51-
return <td key={`spec${index}`}>
52-
<div className="tooltip-div" data-tooltip-id={TOOLTIP_ID} data-tooltip-content={`${spec["reason"]}<br>${spec["result"]}`}>
53-
<img className="smiMark" src={halfMark} alt="Half Mark" />
54-
</div>
55-
</td>;
56-
} else if (spec["capability"] === "NONE") {
57-
return <td key={`spec${index}`}>
58-
<div className="tooltip-div" data-tooltip-id={TOOLTIP_ID} data-tooltip-content={`${spec["reason"]}<br>${spec["result"]}`}>
59-
<img className="smiMark" src={failingMark} alt="Fail Mark" />
60-
</div>
61-
</td>;
62-
} else {
63-
return <td key={`spec${index}`}>
64-
<IconContext.Provider value={{ color: "gray", size: "20px" }}>
65-
<IoMdHelpCircle />
66-
</IconContext.Provider>
67-
</td>;
68-
}
69-
})
70-
}
71-
<td>{row.original.passing_percentage}</td>
72-
</tr>
73-
74-
{
75-
row.original.previous_versions && row.original.previous_versions.map((prevResult, index) => {
76-
return (
77-
<tr key={`collapse-row-${rowIndex}-${index}`} className={isCollapsed ? "secondaryRow" : "secondaryRow-hidden"} >
78-
<td></td>
79-
<td>{prevResult.mesh_version}</td>
80-
{prevResult.more_details.map((spec, prevIndex) => {
81-
if (spec["capability"] === "Full") {
82-
return <td key={`spec${prevIndex}`}>
83-
<img className="smiMark" src={passingMark} alt="Passing Mark" />
84-
</td>;
85-
} else if (spec["capability"] === "None") {
86-
return <td key={`spec${prevIndex}`}>
87-
<img className="smiMark" src={failingMark} alt="Fail Mark" />
88-
</td>;
89-
} else if (spec["capability"] === "Half") {
90-
return <td key={`spec${prevIndex}`}>
91-
<img className="smiMark" src={halfMark} alt="Half Mark" />
92-
</td>;
93-
} else {
94-
return <td key={`spec${prevIndex}`}>
95-
<IconContext.Provider value={{ color: "gray", size: "20px" }}>
96-
<IoMdHelpCircle />
97-
</IconContext.Provider>
98-
</td>;
99-
}
100-
})}
101-
<td>{prevResult.passing_percentage}</td>
102-
</tr>
103-
);
104-
})
105-
}
106-
</React.Fragment>
107-
);
108-
});
109-
11020
const Table = ({ columns, data, spec }) => {
11121
// Use the state and functions returned from useTable to build the UI
11222
const {
@@ -121,6 +31,7 @@ const Table = ({ columns, data, spec }) => {
12131
});
12232

12333
// Render the UI for the table
34+
const [isCollapsed, setCollapse] = useState(new Array(rows.length).fill(false));
12435
return (
12536
<TableWrapper>
12637
<table {...getTableProps()}>
@@ -140,16 +51,106 @@ const Table = ({ columns, data, spec }) => {
14051
</thead>
14152
<tbody {...getTableBodyProps()}>
14253
{rows.map((row, i) => {
143-
return <TableRow key={`row${i}`} row={row} rowIndex={i} prepareRow={prepareRow} />;
54+
prepareRow(row);
55+
return (
56+
<React.Fragment key={`row${i}`}>
57+
<tr key={`row${i}`} id={`row${i}`} className="primaryRow" {...row.getRowProps()} onClick={() => {
58+
let e = isCollapsed; e[i] = !isCollapsed[i]; setCollapse([...e]);
59+
}}
60+
>
61+
<td>
62+
{
63+
(non_functional.find(ele => ele.name.includes(row.original.mesh_name))) ?
64+
<>
65+
<img data-tooltip-id="react-tooltip" data-tooltip-content={row.original.mesh_name} className="smiMark" src={non_functional.find(ele => ele.name.includes(row.original.mesh_name)).icon} alt="Mesh Icon" />
66+
<Tooltip
67+
id="react-tooltip"
68+
place="bottom"
69+
style={{ backgroundColor: "rgb(60,73,79)" }}
70+
className="smi-tooltip"
71+
/>
72+
</>
73+
: <>
74+
<img data-tooltip-id="react-tooltip" data-tooltip-content={"Service Mesh"} className="smiMark" src={ServiceMeshIcon} alt="Service Mesh" />
75+
<Tooltip
76+
id="react-tooltip"
77+
place="bottom"
78+
style={{ backgroundColor: "rgb(60,73,79)" }}
79+
className="smi-tooltip"
80+
/>
81+
</>
82+
}
83+
</td>
84+
<td>{row.original.mesh_version}</td>
85+
{row.original.more_details.map((spec,i) => {
86+
if (spec["capability"] === "FULL"){
87+
return <td key={`spec${i}`}>
88+
<div className="tooltip-div" data-tooltip-id="react-tooltip" data-tooltip-content={`${spec["result"]}`}>
89+
<img className="smiMark" src={passingMark} alt="Pass Mark" />
90+
</div>
91+
</td>;
92+
} else if (spec["capability"] === "HALF"){
93+
return <td key={`spec${i}`}>
94+
<div className="tooltip-div" data-tooltip-id="react-tooltip" data-tooltip-content={`${spec["reason"]}<br>${spec["result"]}`}>
95+
<img className="smiMark" src={halfMark} alt="Half Mark" />
96+
</div>
97+
</td>;
98+
} else if (spec["capability"] === "NONE") {
99+
return <td key={`spec${i}`}>
100+
<div className="tooltip-div" data-tooltip-id="react-tooltip" data-tooltip-content={`${spec["reason"]}<br>${spec["result"]}`}>
101+
<img className="smiMark" src={failingMark} alt="Fail Mark" />
102+
</div>
103+
</td>;
104+
} else {
105+
return <td key={`spec${i}`}>
106+
<IconContext.Provider value={{ color: "gray", size: "20px" }}>
107+
<IoMdHelpCircle />
108+
</IconContext.Provider>
109+
</td>;
110+
}
111+
})
112+
}
113+
<td>{row.original.passing_percentage}</td>
114+
</tr>
115+
116+
{
117+
row.original.previous_versions && row.original.previous_versions.map(prevResult => {
118+
return (
119+
<tr key={`collapse-row${i}`} className={isCollapsed[i] ? "secondaryRow" : "secondaryRow-hidden"} >
120+
<td></td>
121+
<td>{prevResult.mesh_version}</td>
122+
{prevResult.more_details.map((spec,i) => {
123+
if (spec["capability"] === "Full"){
124+
return <td key={`spec${i}`}>
125+
<img className="smiMark" src={passingMark} alt="Passing Mark" />
126+
</td>;
127+
} else if (spec["capability"] === "None"){
128+
return <td key={`spec${i}`}>
129+
<img className="smiMark" src={failingMark} alt="Fail Mark" />
130+
</td>;
131+
} else if (spec["capability"] === "Half"){
132+
return <td key={`spec${i}`}>
133+
<img className="smiMark" src={halfMark} alt="Half Mark" />
134+
</td>;
135+
} else {
136+
return <td key={`spec${i}`}>
137+
<IconContext.Provider value={{ color: "gray", size: "20px" }}>
138+
<IoMdHelpCircle />
139+
</IconContext.Provider>
140+
</td>;
141+
}
142+
})}
143+
<td>{prevResult.passing_percentage}</td>
144+
</tr>
145+
);
146+
})
147+
}
148+
149+
</React.Fragment>
150+
);
144151
})}
145152
</tbody>
146153
</table>
147-
<Tooltip
148-
id={TOOLTIP_ID}
149-
place="bottom"
150-
style={{ backgroundColor: "rgb(60,73,79)" }}
151-
className="smi-tooltip"
152-
/>
153154
</TableWrapper>
154155
);
155156
};

0 commit comments

Comments
 (0)