diff --git a/frontend/pages/DashboardPage/cards/MDM/MDM.tests.tsx b/frontend/pages/DashboardPage/cards/MDM/MDM.tests.tsx index 98ab7d11f6..ad49d09198 100644 --- a/frontend/pages/DashboardPage/cards/MDM/MDM.tests.tsx +++ b/frontend/pages/DashboardPage/cards/MDM/MDM.tests.tsx @@ -21,15 +21,16 @@ describe("MDM Card", () => { createMockMdmSolution({ name: "Test Solution", id: 3 }), createMockMdmSolution({ name: "Test Solution", id: 4 }), createMockMdmSolution({ name: "Test Solution 2", id: 5 }), + createMockMdmSolution({ name: null, id: 6 }), + createMockMdmSolution({ name: null, id: 7 }), ]} /> ); - debug(); - expect(screen.getAllByText("MDM Solution").length).toBe(1); expect(screen.getAllByText("Test Solution").length).toBe(1); expect(screen.getAllByText("Test Solution 2").length).toBe(1); + expect(screen.getAllByText("Unknown").length).toBe(1); }); it("render the correct number of Enrollment status", async () => { diff --git a/frontend/pages/DashboardPage/cards/MDM/MDM.tsx b/frontend/pages/DashboardPage/cards/MDM/MDM.tsx index 762c09cb5a..5a92c85469 100644 --- a/frontend/pages/DashboardPage/cards/MDM/MDM.tsx +++ b/frontend/pages/DashboardPage/cards/MDM/MDM.tsx @@ -65,6 +65,28 @@ const EmptyMdmSolutions = (): JSX.Element => ( /> ); +type IMdmSolutionMap = Record; + +const reduceSolutionsToObj = (mdmSolutions: IMdmSolution[]) => { + return mdmSolutions.reduce((acc, nextSolution) => { + // The solution name can be null so we add an Unknown key to the + // accumulator in this case. + if (nextSolution.name === null) { + if (acc.Unknown) { + acc.Unknown.hosts_count += nextSolution.hosts_count; + } else { + acc.Unknown = Object.assign({ ...nextSolution }); + } + } else if (acc[nextSolution.name]) { + acc[nextSolution.name].hosts_count += nextSolution.hosts_count; + } else { + acc[nextSolution.name] = Object.assign({ ...nextSolution }); + } + + return acc; + }, {}); +}; + const Mdm = ({ isFetching, error, @@ -85,19 +107,7 @@ const Mdm = ({ return []; } - return mdmSolutions.reduce((acc, nextSolution) => { - const existingSolution = acc.find( - (solution) => solution.name === nextSolution.name - ); - - if (existingSolution) { - existingSolution.hosts_count += nextSolution.hosts_count; - } else { - acc.push(nextSolution); - } - - return acc; - }, []); + return Object.values(reduceSolutionsToObj(mdmSolutions)); }, [mdmSolutions]); const solutionsTableHeaders = useMemo( @@ -108,10 +118,7 @@ const Mdm = ({ () => generateStatusTableHeaders(selectedTeamId), [selectedTeamId] ); - const solutionsDataSet = generateSolutionsDataSet( - rolledupMdmSolutionsData, - selectedPlatformLabelId - ); + const solutionsDataSet = generateSolutionsDataSet(rolledupMdmSolutionsData); const statusDataSet = generateStatusDataSet( mdmStatusData, selectedPlatformLabelId @@ -143,6 +150,7 @@ const Mdm = ({ ) : ( + className={`${baseClass}__mdm-solutions-table`} columnConfigs={solutionsTableHeaders} data={solutionsDataSet} isLoading={isFetching} @@ -163,6 +171,7 @@ const Mdm = ({ ) : ( [ title: "Name", Header: "Name", disableSortBy: true, - accessor: "name", + accessor: "displayName", Cell: (cellProps: ICellProps) => ( ), @@ -61,27 +57,17 @@ export const generateSolutionsTableHeaders = (): IDataColumn[] => [ }, ]; -const enhanceSolutionsData = ( - solutions: IMdmSolution[], - selectedPlatformLabelId?: number -): IMdmSolution[] => { - return Object.values(solutions).map((solution) => { - return { - id: solution.id, - name: solution.name || "Unknown", - server_url: solution.server_url, - hosts_count: solution.hosts_count, - selectedPlatformLabelId, - }; - }); -}; - export const generateSolutionsDataSet = ( - solutions: IMdmSolution[] | null, - selectedPlatformLabelId?: number + solutions: IMdmSolution[] | null ): IMdmSolution[] => { if (!solutions) { return []; } - return [...enhanceSolutionsData(solutions, selectedPlatformLabelId)]; + + return solutions.map((solution) => { + return { + ...solution, + displayName: solution.name ?? "Unknown", + }; + }); }; diff --git a/frontend/pages/DashboardPage/cards/MDM/_styles.scss b/frontend/pages/DashboardPage/cards/MDM/_styles.scss index cd27f12b6f..e4f3526fe3 100644 --- a/frontend/pages/DashboardPage/cards/MDM/_styles.scss +++ b/frontend/pages/DashboardPage/cards/MDM/_styles.scss @@ -7,47 +7,39 @@ display: none; } - .data-table-block { - .data-table__table { - table-layout: fixed; + &__mdm-status-table { + .data-table-block { + .data-table__table { + thead { + .status__header { + width: 30%; + } - thead { - .name__header, - .status__header { - width: 30%; - } - .server_url__header { - width: 30%; - } - .hosts_count__header, - .hosts__header { - border-right: 0; - padding-right: 0; - width: 60px; - } - .linkToFilteredHosts__header { - width: 140px; - } - } + .hosts__header { + border-right: 0; + padding-right: 0; + width: 60px; + } - tbody { - .mdm-solution-link { - opacity: 0; - transition: 250ms; - text-overflow: none; - } - tr:hover { - .mdm-solution-link { - opacity: 1; + .linkToFilteredHosts__header { + width: 140px; } } } } - } - .count-loading { - color: $ui-fleet-black-50; - } - .count-error { - color: $ui-error; + + tbody { + .mdm-solution-link { + opacity: 0; + transition: 250ms; + text-overflow: none; + } + tr:hover { + .mdm-solution-link { + opacity: 1; + } + } + } + } } diff --git a/frontend/pages/DashboardPage/components/MdmSolutionModal/MdmSolutionModal.tsx b/frontend/pages/DashboardPage/components/MdmSolutionModal/MdmSolutionModal.tsx index 0cebb3f94e..e8063c86d1 100644 --- a/frontend/pages/DashboardPage/components/MdmSolutionModal/MdmSolutionModal.tsx +++ b/frontend/pages/DashboardPage/components/MdmSolutionModal/MdmSolutionModal.tsx @@ -29,8 +29,6 @@ const MdmSolutionsModal = ({ selectedTeamId, onCancel, }: IMdmSolutionModalProps) => { - console.log(mdmSolutions); - const solutionsTableHeaders = useMemo( () => generateSolutionsTableHeaders(selectedTeamId), [selectedTeamId] @@ -43,7 +41,7 @@ const MdmSolutionsModal = ({ return ( diff --git a/frontend/pages/DashboardPage/components/MdmSolutionModal/MdmSolutionModalTableConfig.tsx b/frontend/pages/DashboardPage/components/MdmSolutionModal/MdmSolutionModalTableConfig.tsx index cc15a0d609..085df2eec0 100644 --- a/frontend/pages/DashboardPage/components/MdmSolutionModal/MdmSolutionModalTableConfig.tsx +++ b/frontend/pages/DashboardPage/components/MdmSolutionModal/MdmSolutionModalTableConfig.tsx @@ -86,21 +86,6 @@ export const generateSolutionsTableHeaders = ( }, ]; -const enhanceSolutionsData = ( - solutions: IMdmSolution[], - selectedPlatformLabelId?: number -): IMdmSolution[] => { - return Object.values(solutions).map((solution) => { - return { - id: solution.id, - name: solution.name || "Unknown", - server_url: solution.server_url, - hosts_count: solution.hosts_count, - selectedPlatformLabelId, - }; - }); -}; - export const generateSolutionsDataSet = ( solutions: IMdmSolution[] | null, selectedPlatformLabelId?: number @@ -108,5 +93,11 @@ export const generateSolutionsDataSet = ( if (!solutions) { return []; } - return [...enhanceSolutionsData(solutions, selectedPlatformLabelId)]; + + return solutions.map((solution) => { + return { + ...solution, + selectedPlatformLabelId, + }; + }); };