Skip to content

tech-story: [M3-9052] - Migrate PlacementGroups to Tanstack router #21215

tech-story: [M3-9052] - Migrate PlacementGroups to Tanstack router

tech-story: [M3-9052] - Migrate PlacementGroups to Tanstack router #21215

Triggered via pull request January 7, 2025 18:25
Status Failure
Total duration 15m 39s
Artifacts 3

ci.yml

on: pull_request
build-validation
26s
build-validation
Matrix: lint
build-sdk
26s
build-sdk
publish-validation
0s
publish-validation
test-sdk
23s
test-sdk
publish-sdk
0s
publish-sdk
publish-storybook
0s
publish-storybook
Fit to window
Zoom out
Zoom in

Annotations

10 errors and 14 warnings
src/routes/routes.test.tsx > Migration Router > route: /placement-groups/create: packages/manager/src/routes/routes.test.tsx#L57
TestingLibraryElementError: Unable to find role="heading" Ignored nodes: comments, script, style <body style="padding-right: 1024px; overflow: hidden;" > <div aria-hidden="true" > <div data-testid="migration-router" > <div class="MuiGrid2-root MuiGrid2-container MuiGrid2-direction-xs-row css-1tueisv-MuiGrid2-root" data-qa-entity-header="true" > <div class="MuiGrid2-root MuiGrid2-direction-xs-row css-27y2fm-MuiGrid2-root" > <div class="css-13hlpjo-StyledRootDiv" > <div class="css-7wrpxj-StyledDiv" > <div class="css-hfoiwb-StyledDiv" > <h1 class="MuiTypography-root MuiTypography-h1 css-6cpn15-MuiTypography-root-StyledH1Header" data-qa-header="Placement Groups" tabindex="0" > Placement Groups </h1> </div> </div> </div> </div> <div class="MuiGrid2-root MuiGrid2-direction-xs-row css-27y2fm-MuiGrid2-root" > <div class="MuiGrid2-root MuiGrid2-direction-xs-row css-6r0yxx-MuiGrid2-root" > <a aria-label="Docs - link opens in a new tab" class="css-1gyjd8d-root docsButton css-1a970vz-StyledDocsLink" data-testid="external-link" href="https://techdocs.akamai.com/cloud-computing/docs/work-with-placement-groups" rel="noopener noreferrer" target="_blank" > <svg height="18" viewBox="0 0 20 20" width="18" xmlns="http://www.w3.org/2000/svg" > <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.25" > <path d="M1.974 19.375c-.727 0-1.316-.56-1.316-1.25V1.875c0-.69.589-1.25 1.316-1.25h13.158c.343 0 .672.127.918.355l2.632 2.402c.254.236.397.558.397.895v15.098H1.974zM4.605 6.875L15.132 6.875M4.605 10.625L9.868 10.625M4.605 14.375L12.105 14.5" /> </g> </svg> Docs </a> <div class="css-80jyct" > <button aria-disabled="false" class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-wkum4l-MuiButtonBase-root-MuiButton-root" data-testid="button" tabindex="0" type="button" > <span class="css-fn767b" data-testid="loadingIcon" > Create Placement Group </span> <span class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root" /> </button> </div> </div> </div> </div> <div class="MuiBox-root css-0" > <div class="visually-hidden MuiBox-root css-15ybjgl" data-testid="inputLabelWrapper" > <label class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-animated MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-animated css-17cf11i-MuiFormLabel-root-MuiInputLabel-root" data-qa-textfield-label="Search" for="search" > Search </label> </div> <div class="MuiBox-root css-0" > <div
src/features/PlacementGroups/PlacementGroupsAssignLinodesDrawer.test.tsx > PlacementGroupsAssignLinodesDrawer > should render the drawer components: packages/manager/src/features/PlacementGroups/PlacementGroupsAssignLinodesDrawer.test.tsx#L147
TestingLibraryElementError: Unable to find an element with the text: Linode-11. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible. Ignored nodes: comments, script, style <body style="padding-right: 1024px; overflow: hidden;" > <div aria-hidden="true" /> <div aria-labelledby="assignLinodesToPlacementGroupPg1" class="MuiDrawer-root MuiDrawer-modal MuiModal-root css-xvvah-MuiModal-root-MuiDrawer-root" data-qa-drawer="true" data-testid="drawer" role="dialog" > <div aria-hidden="true" class="MuiBackdrop-root MuiModal-backdrop css-5wkxgu-MuiBackdrop-root-MuiModal-backdrop" style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;" /> <div data-testid="sentinelStart" tabindex="0" /> <div class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation16 MuiDrawer-paper css-13aj6q8-common-default MuiDrawer-paperAnchorRight css-1jnuxa1-MuiPaper-root-MuiDrawer-paper" tabindex="-1" > <div class="MuiGrid2-root MuiGrid2-container MuiGrid2-wrap-xs-nowrap MuiGrid2-direction-xs-row css-1oum9fv-drawerHeader css-xsbm6p-MuiGrid2-root" > <div class="MuiGrid2-root MuiGrid2-direction-xs-row css-27y2fm-MuiGrid2-root" > <h2 class="MuiTypography-root MuiTypography-h2 css-156khuw-title css-1j96obb-MuiTypography-root" data-qa-drawer-title="Assign Linodes to Placement Group PG-1" data-testid="drawer-title" id="assignLinodesToPlacementGroupPg1" > Assign Linodes to Placement Group PG-1 </h2> </div> <div class="MuiGrid2-root MuiGrid2-direction-xs-row css-27y2fm-MuiGrid2-root" > <button aria-label="Close drawer" class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary MuiIconButton-sizeLarge css-1hc97o1-MuiButtonBase-root-MuiIconButton-root" data-qa-close-drawer="true" tabindex="0" type="button" > <svg aria-hidden="true" class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-6yqi1c-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> <span class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root" /> </button> </div> </div> <div class="MuiBox-root css-k008qs" > <dl class="MuiGrid2-root MuiGrid2-container MuiGrid2-direction-xs-row css-1wzkr4e-MuiGrid2-root-StyledDL" > <div class="MuiGrid2-root MuiGrid2-direction-xs-row css-1t2u0mk-MuiGrid2-root-StyledDLItemSeparator" > <dt class="MuiTypography-root MuiTypography-body1 css-1iparo0-MuiTypography-root-StyledDT" > Placement Group Type </dt> <dd class="MuiTypography-root MuiTypography-body1 css-4ofmxk-MuiTypography-root" > Anti-affinity </dd> </div> <div class="MuiGrid2-root MuiGrid2-direction-xs-row css-1t2u0mk-MuiGrid2-root-StyledDLItemSeparator" > <dt class="MuiTypography-root MuiTypography-body1 css-1iparo0-MuiTypography-root-StyledDT" > Placement Group Policy </dt> <dd class="MuiTypography-root MuiTypography-body1 css-4ofmxk-MuiTypography-root" > Strict </dd> </div> </dl> </div> <hr class="Mui
src/features/PlacementGroups/PlacementGroupsDeleteModal.test.tsx > PlacementGroupsDeleteModal > should render the right form elements: packages/manager/src/features/PlacementGroups/PlacementGroupsDeleteModal.test.tsx#L63
TestingLibraryElementError: Unable to find an accessible element with the role "heading" and name "Delete Placement Group PG-to-delete" Here are the accessible roles: strong: Name "": <strong style="font-size: 1rem;" /> -------------------------------------------------- button: Name "Hide Error": <button style="appearance: none; font-size: .6em; border: 1px solid currentcolor; padding: .1rem .2rem; font-weight: bold; border-radius: .25rem;" /> -------------------------------------------------- code: Name "": <code /> -------------------------------------------------- Ignored nodes: comments, script, style <body style="" > <div> <div style="padding: .5rem; max-width: 100%;" > <div style="display: flex; align-items: center; gap: .5rem;" > <strong style="font-size: 1rem;" > Something went wrong! </strong> <button style="appearance: none; font-size: .6em; border: 1px solid currentcolor; padding: .1rem .2rem; font-weight: bold; border-radius: .25rem;" > Hide Error </button> </div> <div style="height: .25rem;" /> <div> <pre style="font-size: .7em; border: 1px solid red; border-radius: .25rem; padding: .3rem; color: red; overflow: auto;" > <code> Invariant failed: You should not use &lt;Link&gt; outside a &lt;Router&gt; </code> </pre> </div> </div> </div> </body> ❯ Object.getElementError ../../node_modules/@testing-library/dom/dist/config.js:37:19 ❯ ../../node_modules/@testing-library/dom/dist/query-helpers.js:76:38 ❯ ../../node_modules/@testing-library/dom/dist/query-helpers.js:52:17 ❯ getByRole ../../node_modules/@testing-library/dom/dist/query-helpers.js:95:19 ❯ src/features/PlacementGroups/PlacementGroupsDeleteModal.test.tsx:63:7
src/features/PlacementGroups/PlacementGroupsDeleteModal.test.tsx > PlacementGroupsDeleteModal > should be enabled when there's no assigned linodes: packages/manager/src/features/PlacementGroups/PlacementGroupsDeleteModal.test.tsx#L100
TestingLibraryElementError: Unable to find an element by: [data-testid="textfield-input"] Ignored nodes: comments, script, style <body style="" > <div> <div style="padding: .5rem; max-width: 100%;" > <div style="display: flex; align-items: center; gap: .5rem;" > <strong style="font-size: 1rem;" > Something went wrong! </strong> <button style="appearance: none; font-size: .6em; border: 1px solid currentcolor; padding: .1rem .2rem; font-weight: bold; border-radius: .25rem;" > Hide Error </button> </div> <div style="height: .25rem;" /> <div> <pre style="font-size: .7em; border: 1px solid red; border-radius: .25rem; padding: .3rem; color: red; overflow: auto;" > <code> Invariant failed: You should not use &lt;Link&gt; outside a &lt;Router&gt; </code> </pre> </div> </div> </div> </body> ❯ Object.getElementError ../../node_modules/@testing-library/dom/dist/config.js:37:19 ❯ ../../node_modules/@testing-library/dom/dist/query-helpers.js:76:38 ❯ ../../node_modules/@testing-library/dom/dist/query-helpers.js:52:17 ❯ getByTestId ../../node_modules/@testing-library/dom/dist/query-helpers.js:95:19 ❯ src/features/PlacementGroups/PlacementGroupsDeleteModal.test.tsx:100:23
src/features/PlacementGroups/PlacementGroupsDetailPanel.test.tsx > PlacementGroupsDetailPanel > should have its select disabled and no create PG button on initial render: packages/manager/src/features/PlacementGroups/PlacementGroupsDetailPanel.test.tsx#L86
TestingLibraryElementError: Unable to find an accessible element with the role "combobox" Here are the accessible roles: strong: Name "": <strong style="font-size: 1rem;" /> -------------------------------------------------- button: Name "Hide Error": <button style="appearance: none; font-size: .6em; border: 1px solid currentcolor; padding: .1rem .2rem; font-weight: bold; border-radius: .25rem;" /> -------------------------------------------------- code: Name "": <code /> -------------------------------------------------- Ignored nodes: comments, script, style <body> <div> <div style="padding: .5rem; max-width: 100%;" > <div style="display: flex; align-items: center; gap: .5rem;" > <strong style="font-size: 1rem;" > Something went wrong! </strong> <button style="appearance: none; font-size: .6em; border: 1px solid currentcolor; padding: .1rem .2rem; font-weight: bold; border-radius: .25rem;" > Hide Error </button> </div> <div style="height: .25rem;" /> <div> <pre style="font-size: .7em; border: 1px solid red; border-radius: .25rem; padding: .3rem; color: red; overflow: auto;" > <code> Cannot read properties of undefined (reading 'location') </code> </pre> </div> </div> </div> </body> ❯ Object.getElementError ../../node_modules/@testing-library/dom/dist/config.js:37:19 ❯ ../../node_modules/@testing-library/dom/dist/query-helpers.js:76:38 ❯ ../../node_modules/@testing-library/dom/dist/query-helpers.js:52:17 ❯ getByRole ../../node_modules/@testing-library/dom/dist/query-helpers.js:95:19 ❯ src/features/PlacementGroups/PlacementGroupsDetailPanel.test.tsx:86:12
src/features/PlacementGroups/PlacementGroupsDetailPanel.test.tsx > PlacementGroupsDetailPanel > should have its select enabled and a create PG button when provided a region: packages/manager/src/features/PlacementGroups/PlacementGroupsDetailPanel.test.tsx#L100
TestingLibraryElementError: Unable to find an accessible element with the role "combobox" Here are the accessible roles: strong: Name "": <strong style="font-size: 1rem;" /> -------------------------------------------------- button: Name "Hide Error": <button style="appearance: none; font-size: .6em; border: 1px solid currentcolor; padding: .1rem .2rem; font-weight: bold; border-radius: .25rem;" /> -------------------------------------------------- code: Name "": <code /> -------------------------------------------------- Ignored nodes: comments, script, style <body> <div> <div style="padding: .5rem; max-width: 100%;" > <div style="display: flex; align-items: center; gap: .5rem;" > <strong style="font-size: 1rem;" > Something went wrong! </strong> <button style="appearance: none; font-size: .6em; border: 1px solid currentcolor; padding: .1rem .2rem; font-weight: bold; border-radius: .25rem;" > Hide Error </button> </div> <div style="height: .25rem;" /> <div> <pre style="font-size: .7em; border: 1px solid red; border-radius: .25rem; padding: .3rem; color: red; overflow: auto;" > <code> Cannot read properties of undefined (reading 'location') </code> </pre> </div> </div> </div> </body> ❯ Object.getElementError ../../node_modules/@testing-library/dom/dist/config.js:37:19 ❯ ../../node_modules/@testing-library/dom/dist/query-helpers.js:76:38 ❯ ../../node_modules/@testing-library/dom/dist/query-helpers.js:52:17 ❯ getByRole ../../node_modules/@testing-library/dom/dist/query-helpers.js:95:19 ❯ src/features/PlacementGroups/PlacementGroupsDetailPanel.test.tsx:100:12
src/features/PlacementGroups/PlacementGroupsDetailPanel.test.tsx > PlacementGroupsDetailPanel > should have its select disabled and no create PG button when provided a region without PG capability: packages/manager/src/features/PlacementGroups/PlacementGroupsDetailPanel.test.tsx#L114
TestingLibraryElementError: Unable to find an accessible element with the role "combobox" Here are the accessible roles: strong: Name "": <strong style="font-size: 1rem;" /> -------------------------------------------------- button: Name "Hide Error": <button style="appearance: none; font-size: .6em; border: 1px solid currentcolor; padding: .1rem .2rem; font-weight: bold; border-radius: .25rem;" /> -------------------------------------------------- code: Name "": <code /> -------------------------------------------------- Ignored nodes: comments, script, style <body> <div> <div style="padding: .5rem; max-width: 100%;" > <div style="display: flex; align-items: center; gap: .5rem;" > <strong style="font-size: 1rem;" > Something went wrong! </strong> <button style="appearance: none; font-size: .6em; border: 1px solid currentcolor; padding: .1rem .2rem; font-weight: bold; border-radius: .25rem;" > Hide Error </button> </div> <div style="height: .25rem;" /> <div> <pre style="font-size: .7em; border: 1px solid red; border-radius: .25rem; padding: .3rem; color: red; overflow: auto;" > <code> Cannot read properties of undefined (reading 'location') </code> </pre> </div> </div> </div> </body> ❯ Object.getElementError ../../node_modules/@testing-library/dom/dist/config.js:37:19 ❯ ../../node_modules/@testing-library/dom/dist/query-helpers.js:76:38 ❯ ../../node_modules/@testing-library/dom/dist/query-helpers.js:52:17 ❯ getByRole ../../node_modules/@testing-library/dom/dist/query-helpers.js:95:19 ❯ src/features/PlacementGroups/PlacementGroupsDetailPanel.test.tsx:114:12
src/features/PlacementGroups/PlacementGroupsDetailPanel.test.tsx > PlacementGroupsDetailPanel > should have its PG select enabled and Create Placement Group button disabled if the region has reached its PG capacity: packages/manager/src/features/PlacementGroups/PlacementGroupsDetailPanel.test.tsx#L131
TestingLibraryElementError: Unable to find an element with the placeholder text of: None Ignored nodes: comments, script, style <body> <div> <div style="padding: .5rem; max-width: 100%;" > <div style="display: flex; align-items: center; gap: .5rem;" > <strong style="font-size: 1rem;" > Something went wrong! </strong> <button style="appearance: none; font-size: .6em; border: 1px solid currentcolor; padding: .1rem .2rem; font-weight: bold; border-radius: .25rem;" > Hide Error </button> </div> <div style="height: .25rem;" /> <div> <pre style="font-size: .7em; border: 1px solid red; border-radius: .25rem; padding: .3rem; color: red; overflow: auto;" > <code> Cannot read properties of undefined (reading 'location') </code> </pre> </div> </div> </div> </body> ❯ Object.getElementError ../../node_modules/@testing-library/dom/dist/config.js:37:19 ❯ ../../node_modules/@testing-library/dom/dist/query-helpers.js:76:38 ❯ ../../node_modules/@testing-library/dom/dist/query-helpers.js:52:17 ❯ getByPlaceholderText ../../node_modules/@testing-library/dom/dist/query-helpers.js:95:19 ❯ src/features/PlacementGroups/PlacementGroupsDetailPanel.test.tsx:131:20
src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail.test.tsx > PlacementGroupsLanding > renders breadcrumbs, docs link and tabs: packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail.test.tsx#L115
TestingLibraryElementError: Unable to find an element with the text: /my first pg/i. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible. Ignored nodes: comments, script, style <body> <div> <div style="padding: .5rem; max-width: 100%;" > <div style="display: flex; align-items: center; gap: .5rem;" > <strong style="font-size: 1rem;" > Something went wrong! </strong> <button style="appearance: none; font-size: .6em; border: 1px solid currentcolor; padding: .1rem .2rem; font-weight: bold; border-radius: .25rem;" > Hide Error </button> </div> <div style="height: .25rem;" /> <div> <pre style="font-size: .7em; border: 1px solid red; border-radius: .25rem; padding: .3rem; color: red; overflow: auto;" > <code> Cannot read properties of undefined (reading 'location') </code> </pre> </div> </div> </div> </body> ❯ Object.getElementError ../../node_modules/@testing-library/dom/dist/config.js:37:19 ❯ ../../node_modules/@testing-library/dom/dist/query-helpers.js:76:38 ❯ ../../node_modules/@testing-library/dom/dist/query-helpers.js:52:17 ❯ getByText ../../node_modules/@testing-library/dom/dist/query-helpers.js:95:19 ❯ src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail.test.tsx:115:12
src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding.test.tsx > PlacementGroupsLanding > renders docs link and create button: packages/manager/src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding.test.tsx#L80
TestingLibraryElementError: Unable to find an element with the text: /create placement group/i. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible. Ignored nodes: comments, script, style <body> <div> <div style="padding: .5rem; max-width: 100%;" > <div style="display: flex; align-items: center; gap: .5rem;" > <strong style="font-size: 1rem;" > Something went wrong! </strong> <button style="appearance: none; font-size: .6em; border: 1px solid currentcolor; padding: .1rem .2rem; font-weight: bold; border-radius: .25rem;" > Hide Error </button> </div> <div style="height: .25rem;" /> <div> <pre style="font-size: .7em; border: 1px solid red; border-radius: .25rem; padding: .3rem; color: red; overflow: auto;" > <code> Cannot read properties of undefined (reading 'location') </code> </pre> </div> </div> </div> </body> ❯ Object.getElementError ../../node_modules/@testing-library/dom/dist/config.js:37:19 ❯ ../../node_modules/@testing-library/dom/dist/query-helpers.js:76:38 ❯ ../../node_modules/@testing-library/dom/dist/query-helpers.js:52:17 ❯ getByText ../../node_modules/@testing-library/dom/dist/query-helpers.js:95:19 ❯ src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding.test.tsx:80:12
test-search
ubuntu-latest pipelines will use ubuntu-24.04 soon. For more details, see https://github.com/actions/runner-images/issues/10636
lint (@linode/validation)
ubuntu-latest pipelines will use ubuntu-24.04 soon. For more details, see https://github.com/actions/runner-images/issues/10636
build-validation
ubuntu-latest pipelines will use ubuntu-24.04 soon. For more details, see https://github.com/actions/runner-images/issues/10636
lint (@linode/ui)
ubuntu-latest pipelines will use ubuntu-24.04 soon. For more details, see https://github.com/actions/runner-images/issues/10636
test-ui
ubuntu-latest pipelines will use ubuntu-24.04 soon. For more details, see https://github.com/actions/runner-images/issues/10636
lint (@linode/api-v4)
ubuntu-latest pipelines will use ubuntu-24.04 soon. For more details, see https://github.com/actions/runner-images/issues/10636
test-sdk
ubuntu-latest pipelines will use ubuntu-24.04 soon. For more details, see https://github.com/actions/runner-images/issues/10636
build-sdk
ubuntu-latest pipelines will use ubuntu-24.04 soon. For more details, see https://github.com/actions/runner-images/issues/10636
validate-sdk
ubuntu-latest pipelines will use ubuntu-24.04 soon. For more details, see https://github.com/actions/runner-images/issues/10636
lint (linode-manager)
ubuntu-latest pipelines will use ubuntu-24.04 soon. For more details, see https://github.com/actions/runner-images/issues/10636
typecheck-ui
ubuntu-latest pipelines will use ubuntu-24.04 soon. For more details, see https://github.com/actions/runner-images/issues/10636
typecheck-manager
ubuntu-latest pipelines will use ubuntu-24.04 soon. For more details, see https://github.com/actions/runner-images/issues/10636
build-storybook
ubuntu-latest pipelines will use ubuntu-24.04 soon. For more details, see https://github.com/actions/runner-images/issues/10636
test-manager
ubuntu-latest pipelines will use ubuntu-24.04 soon. For more details, see https://github.com/actions/runner-images/issues/10636

Artifacts

Produced during runtime
Name Size
packages-api-v4-lib
336 KB
packages-validation-lib
147 KB
storybook-build
11.3 MB