Skip to content

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

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

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

Triggered via pull request January 10, 2025 15:38
Status Failure
Total duration 16m 19s
Artifacts 3

ci.yml

on: pull_request
build-validation
29s
build-validation
Matrix: lint
build-sdk
33s
build-sdk
publish-validation
0s
publish-validation
test-sdk
29s
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-r1tcgg-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/PlacementGroupsDeleteModal.test.tsx > PlacementGroupsDeleteModal > should render the right form elements: packages/manager/src/features/PlacementGroups/PlacementGroupsDeleteModal.test.tsx#L85
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> <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:85: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#L127
TestingLibraryElementError: Unable to find an element by: [data-testid="textfield-input"] 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> 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:127:23
src/features/PlacementGroups/PlacementGroupsUnassignModal.test.tsx > PlacementGroupsUnassignModal > should render and have the proper content and CTAs: packages/manager/src/features/PlacementGroups/PlacementGroupsUnassignModal.test.tsx#L51
TestingLibraryElementError: Unable to find a label with the text of: Unassign test-linode Ignored nodes: comments, script, style <body style="padding-right: 1024px; overflow: hidden;" > <div aria-hidden="true" /> <div class="MuiDialog-root MuiModal-root css-15dpna2-MuiModal-root-MuiDialog-root" data-qa-dialog="true" data-qa-drawer="true" data-testid="drawer" role="dialog" > <div aria-hidden="true" class="MuiBackdrop-root MuiModal-backdrop css-rmx4qb-MuiBackdrop-root-MuiDialog-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="MuiDialog-container MuiDialog-scrollPaper css-1sep8xo-MuiDialog-container" role="presentation" 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;" tabindex="-1" > <div aria-labelledby="unassign" class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation24 MuiDialog-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm css-sahk2q-MuiPaper-root-MuiDialog-paper" > <div class="MuiBox-root css-zcxndt" > <h2 class="MuiTypography-root MuiTypography-h6 MuiDialogTitle-root css-n9wxm8-MuiTypography-root-MuiDialogTitle-root" data-qa-dialog-title="Unassign" id="unassign" title="Unassign" > <div class="MuiBox-root css-1y8wdwb" data-qa-dialog-title="Unassign" data-qa-drawer-title="Unassign" > <span class="MuiBox-root css-0" > Unassign </span> <button aria-label="Close" class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary MuiIconButton-sizeLarge css-1vee8jx-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> </h2> <div class="MuiDialogContent-root css-keggj3-MuiDialogContent-root" > <div class="MuiGrid2-root MuiGrid2-direction-xs-row css-0-error-ref error-for-scroll notice css-1vvi65p-error-errorList-root css-11f3avs-MuiGrid2-root-StyledNoticeGrid" data-qa-error="true" data-qa-notice="true" data-testid="notice-error" role="alert" > <div class="css-1rzyf5b-inner" > <p class="MuiTypography-root MuiTypography-body1 css-153jlhh-noticeText css-0-noticeText-ref noticeText css-4ofmxk-MuiTypography-root" > There was a problem retrieving this linode </p> </div> </div> <p class="MuiTypography-root MuiTypography-body1 css-4ofmxk-MuiTypography-root" > Are you sure you want to unassign this Linode? </p> <div class="MuiStack-root css-1udig2n-MuiStack-root" > <div class="
src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail.test.tsx > PlacementGroupsLanding > renders breadcrumbs, docs link and tabs: packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail.test.tsx#L124
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> Invariant failed: Could not find an active match from "/placement-groups/$id" </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:124:12
src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding.test.tsx > PlacementGroupsLanding > renders docs link and create button: packages/manager/src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding.test.tsx#L89
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> 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 ❯ getByText ../../node_modules/@testing-library/dom/dist/query-helpers.js:95:19 ❯ src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding.test.tsx:89:12
src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding.test.tsx > PlacementGroupsLanding > renders placement groups: packages/manager/src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding.test.tsx#L115
TestingLibraryElementError: Unable to find an element with the text: /group 1/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> 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 ❯ getByText ../../node_modules/@testing-library/dom/dist/query-helpers.js:95:19 ❯ src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding.test.tsx:115:12
src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsLinodes/PlacementGroupsLinodes.test.tsx > PlacementGroupsLinodes > renders an error state if placement groups are undefined: packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsLinodes/PlacementGroupsLinodes.test.tsx#L34
TestingLibraryElementError: Unable to find an element with the text: There was an error loading Linodes for this Placement Group.. 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> Invariant failed: Could not find an active match from "/placement-groups/$id" </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/PlacementGroupsLinodes/PlacementGroupsLinodes.test.tsx:34:7
src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsLinodes/PlacementGroupsLinodes.test.tsx > PlacementGroupsLinodes > features the linodes table, a filter field, a create button and a docs link: packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsLinodes/PlacementGroupsLinodes.test.tsx#L56
TestingLibraryElementError: Unable to find an element with the placeholder text of: Search Linodes 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> Invariant failed: Could not find an active match from "/placement-groups/$id" </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/PlacementGroupsDetail/PlacementGroupsLinodes/PlacementGroupsLinodes.test.tsx:56:12
src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsLinodes/PlacementGroupsLinodesTable.test.tsx > PlacementGroupsLinodesTable > should have the correct number of columns: packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsLinodes/PlacementGroupsLinodesTable.test.tsx#L61
TestingLibraryElementError: Unable to find an accessible element with the role "columnheader" 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> 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 ❯ getAllByRole ../../node_modules/@testing-library/dom/dist/query-helpers.js:109:15 ❯ src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsLinodes/PlacementGroupsLinodesTable.test.tsx:61: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/api-v4)
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
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
test-ui
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
lint (linode-manager)
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
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
337 KB
packages-validation-lib
147 KB
storybook-build
11.3 MB