Fix: Grouping by Id instead of name and include expected Lifetime days in the table #1278

[joshdimanteto]

Description

see #1278

Testing instructions

Add a set up instructions describing how the reviewer should test the code

• Review code
• Check Actions build
• Review changes to test coverage

Agile board tracking

closes #1278

[joshdimanteto]

Add tests later

[codecov]

❌ 2 Tests Failed:

Tests completed	Failed	Passed	Skipped
717	2	715	1

View the top 2 failed tests by shortest run time

src/systems/systemItemsTable.component.test.tsx > SystemItemsTable > SystemItemsTable (usageStatus) > renders correctly

Stack Traces | 0.699s run time

Error: Snapshot `SystemItemsTable > SystemItemsTable (usageStatus) > renders correctly 1` mismatched

- Expected
+ Received

@@ -79,11 +79,11 @@
                      </svg>
                      <input
                        aria-invalid="false"
                        autocomplete="new-password"
                        class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd css-12yjm75-MuiInputBase-input-MuiOutlinedInput-input"
-                       id=":rja:"
+                       id=":rme:"
                        placeholder="Search"
                        type="text"
                        value=""
                      />
                      <div
@@ -280,11 +280,11 @@
                          <input
                            aria-invalid="false"
                            aria-label="Filter by Catalogue Item"
                            autocomplete="new-password"
                            class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                           id=":rjg:"
+                           id=":rmk:"
                            placeholder="Filter by Catalogue Item"
                            title="Filter by Catalogue Item"
                            type="text"
                            value=""
                          />
@@ -481,11 +481,11 @@
                          <input
                            aria-invalid="false"
                            aria-label="Filter by Serial Number"
                            autocomplete="new-password"
                            class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                           id=":rjm:"
+                           id=":rmq:"
                            placeholder="Filter by Serial Number"
                            title="Filter by Serial Number"
                            type="text"
                            value=""
                          />
@@ -986,11 +986,11 @@
                </label>
                <div
                  class="MuiInputBase-root MuiInput-root MuiInputBase-colorPrimary css-1mmm5cp-MuiInputBase-root-MuiInput-root-MuiSelect-root"
                >
                  <div
-                   aria-controls=":rjr:"
+                   aria-controls=":rmv:"
                    aria-expanded="false"
                    aria-haspopup="listbox"
                    aria-label="Rows per page"
                    class="MuiSelect-select MuiSelect-standard MuiInputBase-input MuiInput-input css-1rxz5jq-MuiSelect-select-MuiInputBase-input-MuiInput-input"
                    role="combobox"

 ❯ src/systems/systemItemsTable.component.test.tsx:393:33

src/systems/systemItemsTable.component.test.tsx > SystemItemsTable > SystemItemsTable (normal) > renders correctly

Stack Traces | 5.28s run time

Error: Snapshot `SystemItemsTable > SystemItemsTable (normal) > renders correctly 1` mismatched

- Expected
+ Received

@@ -233,11 +233,11 @@
      <div
        class="MuiTableContainer-root css-fa3r-MuiTableContainer-root"
      >
        <table
          class="MuiTable-root MuiTable-stickyHeader css-ts728e-MuiTable-root"
-         style="--header-catalogueItem_name-size: 250; --col-catalogueItem_name-size: 250; --header-mrt_row_expand-size: 100; --col-mrt_row_expand-size: 100; --header-mrt_row_select-size: 60; --col-mrt_row_select-size: 60; --header-item_serial_number-size: 250; --col-item_serial_number-size: 250; --header-item_modified_time-size: 350; --col-item_modified_time-size: 350; --header-item_delivered_date-size: 350; --col-item_delivered_date-size: 350; --header-item_is_defective-size: 200; --col-item_is_defective-size: 200; --header-item_usage_status-size: 200; --col-item_usage_status-size: 200; --header-mrt_row_spacer-size: 40; --col-mrt_row_spacer-size: 40; --header-item_created_time-size: 350; --col-item_created_time-size: 350;"
+         style="--header-catalogueItem_name-size: 250; --col-catalogueItem_name-size: 250; --header-mrt_row_expand-size: 100; --col-mrt_row_expand-size: 100; --header-mrt_row_select-size: 60; --col-mrt_row_select-size: 60; --header-item_serial_number-size: 250; --col-item_serial_number-size: 250; --header-item_modified_time-size: 350; --col-item_modified_time-size: 350; --header-item_delivered_date-size: 350; --col-item_delivered_date-size: 350; --header-item_is_defective-size: 200; --col-item_is_defective-size: 200; --header-item_usage_status-size: 200; --col-item_usage_status-size: 200; --header-catalogueItem_expected_lifetime_days-size: 300; --col-catalogueItem_expected_lifetime_days-size: 300; --header-mrt_row_spacer-size: 40; --col-mrt_row_spacer-size: 40; --header-item_created_time-size: 350; --col-item_created_time-size: 350;"
        >
          <thead
            class="MuiTableHead-root css-q4cnup-MuiTableHead-root"
          >
            <tr
@@ -1055,11 +1055,11 @@
                            <input
                              aria-invalid="false"
                              aria-label="Min"
                              autocomplete="new-password"
                              class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                             id=":r30:"
+                             id=":r3e:"
                              inputmode="text"
                              placeholder="Min"
                              title="Min"
                              type="text"
                              value=""
@@ -1100,11 +1100,11 @@
                            <input
                              aria-invalid="false"
                              aria-label="Max"
                              autocomplete="new-password"
                              class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                             id=":r32:"
+                             id=":r3g:"
                              inputmode="text"
                              placeholder="Max"
                              title="Max"
                              type="text"
                              value=""
@@ -1721,13 +1721,187 @@
                  </div>
                </div>
              </th>
              <th
                aria-sort="none"
-               class="MuiTableCell-root MuiTableCell-head MuiTableCell-stickyHeader MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1mc0kk9-MuiTableCell-root"
+               class="MuiTableCell-root MuiTableCell-head MuiTableCell-stickyHeader MuiTableCell-alignLeft MuiTableCell-sizeMedium css-6cw453-MuiTableCell-root"
                colspan="1"
+               data-can-sort="true"
                data-index="9"
+               scope="col"
+             >
+               <div
+                 class="Mui-TableHeadCell-Content MuiBox-root css-c8wlay"
+               >
+                 <div
+                   class="Mui-TableHeadCell-Content-Labels MuiBox-root css-68rqdf"
+                 >
+                   <div
+                     class="Mui-TableHeadCell-Content-Wrapper MuiBox-root css-1t5kuvk"
+                   >
+                     <p
+                       aria-label="Expected Lifetime (Days)"
+                       class="MuiTypography-root MuiTypography-body1 css-1jmsoko-MuiTypography-root"
+                       data-mui-internal-clone-element="true"
+                       role="tooltip"
+                     >
+                       Expected Lifetime (Days)
+                     </p>
+                   </div>
+                   <span
+                     aria-label="Sort by Expected Lifetime (Days) descending"
+                     class="MuiBadge-root css-1c32n2y-MuiBadge-root"
+                     data-mui-internal-clone-element="true"
+                   >
+                     <span
+                       aria-label="Sort by Expected Lifetime (Days) descending"
+                       class="MuiButtonBase-root MuiTableSortLabel-root Mui-active css-118d58w-MuiButtonBase-root-MuiTableSortLabel-root"
+                       role="button"
+                       tabindex="0"
+                     >
+                       <svg
+                         aria-hidden="true"
+                         class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc css-1vweko9-MuiSvgIcon-root-MuiTableSortLabel-icon"
+                         data-testid="SyncAltIcon"
+                         focusable="false"
+                         style="transform: rotate(-90deg) scaleX(0.9) translateX(-1px);"
+                         viewBox="0 0 24 24"
+                       >
+                         <path
+                           d="m18 12 4-4-4-4v3H3v2h15zM6 12l-4 4 4 4v-3h15v-2H6z"
+                         />
+                       </svg>
+                     </span>
+                     <span
+                       class="MuiBadge-badge MuiBadge-standard MuiBadge-invisible MuiBadge-anchorOriginTopRight MuiBadge-anchorOriginTopRightCircular MuiBadge-overlapCircular css-2v5rxe-MuiBadge-badge"
+                     >
+                       0
+                     </span>
+                   </span>
+                 </div>
+                 <div
+                   class="Mui-TableHeadCell-Content-Actions MuiBox-root css-epvm6"
+                 >
+                   <button
+                     aria-label="Move"
+                     class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1uxkzex-MuiButtonBase-root-MuiIconButton-root"
+                     data-mui-internal-clone-element="true"
+                     draggable="true"
+                     tabindex="0"
+                     type="button"
+                   >
+                     <svg
+                       aria-hidden="true"
+                       class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                       data-testid="DragHandleIcon"
+                       focusable="false"
+                       viewBox="0 0 24 24"
+                     >
+                       <path
+                         d="M20 9H4v2h16zM4 15h16v-2H4z"
+                       />
+                     </svg>
+                   </button>
+                   <button
+                     aria-label="Column Actions"
+                     class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1p8dotb-MuiButtonBase-root-MuiIconButton-root"
+                     data-mui-internal-clone-element="true"
+                     tabindex="0"
+                     type="button"
+                   >
+                     <svg
+                       aria-hidden="true"
+                       class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                       data-testid="MoreVertIcon"
+                       focusable="false"
+                       style="transform: scale(0.9);"
+                       viewBox="0 0 24 24"
+                     >
+                       <path
+                         d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2m0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"
+                       />
+                     </svg>
+                     <span
+                       class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                     />
+                   </button>
+                 </div>
+                 <div
+                   class="Mui-TableHeadCell-ResizeHandle-Wrapper MuiBox-root css-1ug570k"
+                 >
+                   <hr
+                     class="MuiDivider-root MuiDivider-fullWidth MuiDivider-vertical MuiDivider-flexItem Mui-TableHeadCell-ResizeHandle-Divider css-f5y87h-MuiDivider-root"
+                   />
+                 </div>
+               </div>
+               <div
+                 class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-entered css-pwcg7p-MuiCollapse-root"
+                 style="min-height: 0px;"
+               >
+                 <div
+                   class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
+                 >
+                   <div
+                     class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
+                   >
+                     <div
+                       class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-jk1t0h-MuiFormControl-root-MuiTextField-root"
+                     >
+                       <div
+                         class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd css-953pxc-MuiInputBase-root-MuiInput-root"
+                       >
+                         <input
+                           aria-invalid="false"
+                           aria-label="Filter by Expected Lifetime (Days)"
+                           autocomplete="new-password"
+                           class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
+                           id=":r1k:"
+                           placeholder="Filter by Expected Lifetime (Days)"
+                           title="Filter by Expected Lifetime (Days)"
+                           type="text"
+                           value=""
+                         />
+                         <div
+                           class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-standard MuiInputAdornment-sizeMedium css-1laqsz7-MuiInputAdornment-root"
+                         >
+                           <span
+                             aria-label="Clear filter"
+                             class=""
+                             data-mui-internal-clone-element="true"
+                           >
+                             <button
+                               aria-label="Clear filter"
+                               class="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-sizeSmall css-1so9ih7-MuiButtonBase-root-MuiIconButton-root"
+                               disabled=""
+                               tabindex="-1"
+                               type="button"
+                             >
+                               <svg
+                                 aria-hidden="true"
+                                 class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                                 data-testid="CloseIcon"
+                                 focusable="false"
+                                 viewBox="0 0 24 24"
+                               >
+                                 <path
+                                   d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+                                 />
+                               </svg>
+                             </button>
+                           </span>
+                         </div>
+                       </div>
+                     </div>
+                   </div>
+                 </div>
+               </div>
+             </th>
+             <th
+               aria-sort="none"
+               class="MuiTableCell-root MuiTableCell-head MuiTableCell-stickyHeader MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1mc0kk9-MuiTableCell-root"
+               colspan="1"
+               data-index="10"
                scope="col"
              >
                <div
                  class="Mui-TableHeadCell-Content MuiBox-root css-1w86f15"
                >
@@ -1883,12 +2057,25 @@
              <td
                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-11phabq-MuiTableCell-root-MuiTableCell-root"
                data-index="8"
              />
              <td
+               class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-qezcu7-MuiTableCell-root-MuiTableCell-root"
+               data-index="9"
+             >
+               <div
+                 aria-label="3418"
+                 class="MuiTypography-root MuiTypography-body1 css-kj4bc9-MuiTypography-root"
+                 data-mui-internal-clone-element="true"
+                 role="tooltip"
+               >
+                 3418
+               </div>
+             </td>
+             <td
                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-sui33z-MuiTableCell-root"
-               data-index="9"
+               data-index="10"
              />
            </tr>
            <tr
              class="MuiTableRow-root css-1hdg57s-MuiTableRow-root"
              data-index="2"
@@ -2040,21 +2227,34 @@
                >
                  In Use
                </div>
              </td>
              <td
-               class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-sui33z-MuiTableCell-root"
+               class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-qezcu7-MuiTableCell-root-MuiTableCell-root"
                data-index="9"
+             >
+               <div
+                 aria-label="1709"
+                 class="MuiTypography-root MuiTypography-body1 css-kj4bc9-MuiTypography-root"
+                 data-mui-internal-clone-element="true"
+                 role="tooltip"
+               >
+                 1709
+               </div>
+             </td>
+             <td
+               class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-sui33z-MuiTableCell-root"
+               data-index="10"
              />
            </tr>
            <tr
              class="MuiTableRow-root Mui-TableBodyCell-DetailPanel css-cvwpbq-MuiTableRow-root"
              data-index="3"
            >
              <td
                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium Mui-TableBodyCell-DetailPanel css-1exvi8x-MuiTableCell-root"
-               colspan="10"
+               colspan="11"
              />
            </tr>
            <tr
              class="MuiTableRow-root css-1hdg57s-MuiTableRow-root"
              data-index="4"
@@ -2198,21 +2398,34 @@
                >
                  In Use
                </div>
              </td>
              <td
+               class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-qezcu7-MuiTableCell-root-MuiTableCell-root"
+               data-index="9"
+             >
+               <div
+                 aria-label="1709"
+                 class="MuiTypography-root MuiTypography-body1 css-kj4bc9-MuiTypography-root"
+                 data-mui-internal-clone-element="true"
+                 role="tooltip"
+               >
+                 1709
+               </div>
+             </td>
+             <td
                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-sui33z-MuiTableCell-root"
-               data-index="9"
+               data-index="10"
              />
            </tr>
            <tr
              class="MuiTableRow-root Mui-TableBodyCell-DetailPanel css-cvwpbq-MuiTableRow-root"
              data-index="5"
            >
              <td
                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium Mui-TableBodyCell-DetailPanel css-1exvi8x-MuiTableCell-root"
-               colspan="10"
+               colspan="11"
              />
            </tr>
            <tr
              class="MuiTableRow-root css-1hdg57s-MuiTableRow-root"
              data-index="6"
@@ -2348,12 +2561,25 @@
              <td
                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-11phabq-MuiTableCell-root-MuiTableCell-root"
                data-index="8"
              />
              <td
-               class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-sui33z-MuiTableCell-root"
+               class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-qezcu7-MuiTableCell-root-MuiTableCell-root"
                data-index="9"
+             >
+               <div
+                 aria-label="1414"
+                 class="MuiTypography-root MuiTypography-body1 css-kj4bc9-MuiTypography-root"
+                 data-mui-internal-clone-element="true"
+                 role="tooltip"
+               >
+                 1414
+               </div>
+             </td>
+             <td
+               class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-sui33z-MuiTableCell-root"
+               data-index="10"
              />
            </tr>
          </tbody>
          <tfoot
            class="MuiTableFooter-root css-4ar9ic-MuiTableFooter-root"
@@ -2444,11 +2670,11 @@
                </label>
                <div
                  class="MuiInputBase-root MuiInput-root MuiInputBase-colorPrimary css-1mmm5cp-MuiInputBase-root-MuiInput-root-MuiSelect-root"
                >
                  <div
-                   aria-controls=":r1g:"
+                   aria-controls=":r1m:"
                    aria-expanded="false"
                    aria-haspopup="listbox"
                    aria-label="Rows per page"
                    class="MuiSelect-select MuiSelect-standard MuiInputBase-input MuiInput-input css-1rxz5jq-MuiSelect-select-MuiInputBase-input-MuiInput-input"
                    role="combobox"

 ❯ src/systems/systemItemsTable.component.test.tsx:77:33

To view more test analytics, go to the Test Analytics Dashboard
📢 Thoughts on this report? Let us know!