feat: [M3-8676] - Provide Customer Notice for OS Distro Nearing EOL/EOS #11253

harsh-akamai · 2024-11-13T10:41:55Z

Description 📝

Add Notice for OS Distro Nearing EOL/EOS

Changes 🔄

Added a notice for images that are nearing EOL/EOS

Target release date 🗓️

10/12

Preview 📷

Before	After

How to test 🧪

Verification steps

Navigate to the Create Linode page
Choose an OS that is deprecated
You should see a notice similar to the one in Preview

As an Author, I have considered 🤔

👀 Doing a self review
❔ Our contribution guidelines
🤏 Splitting feature into small PRs
➕ Adding a changeset
🧪 Providing/improving test coverage
🔐 Removing all sensitive information from the code and PR description
🚩 Using a feature flag to protect the release
👣 Providing comprehensive reproduction steps
📑 Providing or updating our documentation
🕛 Scheduling a pair reviewing session
📱 Providing mobile support
♿ Providing accessibility support

I have read and considered all applicable items listed above.

As an Author, before moving this PR from Draft to Open, I confirmed ✅

All unit tests are passing
TypeScript compilation succeeded without errors
Code passes all linting rules

bnussman-akamai · 2024-11-13T14:51:40Z

packages/manager/src/features/Linodes/LinodeCreate/Tabs/OperatingSystems.tsx

+  const [imageDeprecatedText, setImageDeprecatedText] = React.useState<
+    null | string
+  >(null);


We may want to consider deriving state from existing state rather than creating new state for this.

For example:

const { data: image } = useImageQuery( field.value ?? '', Boolean(field.value) ); const showImageDeprecatedWarning = image !== undefined && isImageDeprecated(image);

Using extra state here might be fine, but deriving from the existing form state could be beneficial because it would gracefully handle things like reacting to the form being reset for example.

What you have recommended makes sense but when I implemented it there is a visible delay for the text displayed. The delay is caused because of the call to useImageQuery. If it is not much of an issue I will push the updated changes

Screen.Recording.2024-11-18.at.1.31.45.PM.mov

That's a fair point. It is a tradeoff. You can make the final call here!

After thinking a little more, I think we should probably do it by deriving for now so that it is constant with with other parts of Linode Create like packages/manager/src/features/Linodes/LinodeCreate/Summary/Summary.tsx for example.

We can probably make some optimizations on the React Query level if we need to address the small delay

Got it! Pushed the changes you've mentioned.

bnussman-akamai · 2024-11-13T14:53:29Z

packages/manager/src/features/Linodes/LinodeCreate/Tabs/OperatingSystems.tsx

+        {imageDeprecatedText && (
+          <Notice
+            dataTestId="os-distro-deprecated-image-notice"
+            spacingBottom={0}
+            spacingTop={16}
+            variant="warning"
+          >
+            <Typography fontFamily={theme.font.bold}>
+              {imageDeprecatedText}. After this date, this OS distribution will
+              no longer receive security updates or technical support. We
+              recommend selecting a newer supported version to ensure continued
+              security and stability for your linodes.
+            </Typography>
+          </Notice>
+        )}


Rather than having imageDeprecatedText be a string, what do you think about having a boolean control this, and putting the content directly in the JSX

Suggested change

{imageDeprecatedText && (

<Notice

dataTestId="os-distro-deprecated-image-notice"

spacingBottom={0}

spacingTop={16}

variant="warning"

>

<Typography fontFamily={theme.font.bold}>

{imageDeprecatedText}. After this date, this OS distribution will

no longer receive security updates or technical support. We

recommend selecting a newer supported version to ensure continued

security and stability for your linodes.

</Typography>

</Notice>

)}

{image && showImageDeprecatedWarning && (

<Notice

dataTestId="os-distro-deprecated-image-notice"

spacingBottom={0}

spacingTop={16}

variant="warning"

>

<Typography fontFamily={(theme) => theme.font.bold}>

{image.label} will reach its end-of-life on{' '}

{formatDate(image.eol ?? '', { format: 'MM/dd/yyyy' })}. After

this date, this OS distribution will no longer receive security

updates or technical support. We recommend selecting a newer

supported version to ensure continued security and stability for

your linodes.

</Typography>

</Notice>

)}

I find that this is a bit cleaner and more readable.

bnussman-akamai · 2024-11-13T14:57:01Z

packages/manager/src/features/Linodes/LinodeCreate/Tabs/OperatingSystems.tsx

@@ -42,6 +49,16 @@ export const OperatingSystems = () => {
  const onChange = async (image: Image | null) => {
    field.onChange(image?.id ?? null);

+    let deprecatedNoticeText = null;
+    if (image && isImageDeprecated(image)) {


Most of the images I select seem to have EOL dates in the past. Saying "Debian will reach its end of life on xx/xx/xx" may be a bit confusing if that date is in the past.

We may need different logic or a copy change here so that is makes more sense.

ahh beat me to it

hkhalil-akamai · 2024-11-13T15:31:20Z

A couple comments on the copy, I believe we should take these concerns to UX:

Adding a qualifier

IMO, the phrase "The selected Ubuntu 23.10 will reach ..." doesn't seem valid. It should be qualified, for example "The selected OS distribution, Ubuntu 23.10, will reach ...".

Past EOL dates

We should ask UX for a slight variation of the copy when the EOL date is in the past. As a suggestion we could say:

The selected Ubuntu 23.10 reached its end-of-life on 07/12/2024. This OS distribution no longer receives security updates or technical support. We recommend selecting a newer supported version to ensure continued security and stability for your linodes.

hkhalil-akamai · 2024-11-13T15:33:01Z

Some distributions marked as deprecated have EOL dates well into the future (up to 4 years in the future in some cases). This is probably the expected behavior, it's just a little surprising.

harsh-akamai · 2024-11-19T17:21:03Z

We should ask UX for a slight variation of the copy when the EOL date is in the past. As a suggestion we could say:
The selected Ubuntu 23.10 reached its end-of-life on 07/12/2024. This OS distribution no longer receives security updates or technical support. We recommend selecting a newer supported version to ensure continued security and stability for your linodes.

I've pushed the changes to ensure the tense matches with the eol date.
@hkhalil-akamai @bnussman-akamai

github-actions · 2024-11-19T17:50:22Z

Coverage Report: ✅
Base Coverage: 86.89%
Current Coverage: 86.9%

hkhalil-akamai

Thanks for responding to feedback!

bnussman-akamai · 2024-11-21T13:41:09Z

packages/manager/src/features/Linodes/LinodeCreate/Tabs/OperatingSystems.tsx

@@ -68,6 +79,34 @@ export const OperatingSystems = () => {
          value={field.value}
          variant="public"
        />
+        {image && showImageDeprecatedWarning && (
+          <Notice
+            dataTestId="os-distro-deprecated-image-notice"


Do we need this dataTestId if we don't have a unit test for this?

abailly-akamai

@harsh-akamai & @bnussman-akamai

I don't fully understand why we're doing an extra image query - why not displaying this within ImageSelect so:

every consumer gets the warning
we use the images query we already have running and use an effect in the component to conditionally display the warning

Please let me know if there is a good reason not to do this and I'll remove my request (wanted to prevent this to be merged if can be improved)

it's worth noticing the lag with the notice display, especially on a slower connection

bnussman-akamai · 2024-11-21T15:42:36Z

Doing this within ImageSelect would be nice because we wouldn't have to worry about the useImageQuery thing.

The only "downside" I can think of moving it in there would be: ImageSelect would be less "pure", meaning it would return more than just a Select component, but that might be okay.

If we want to keep this as-is, I could push a change on the React Query level to alleviate the extra fetch

abailly-akamai · 2024-11-21T15:46:05Z

I'd like to specify the ticket requirement, really - are we to add this notice on all flows? cause if so it's a no brainer

bnussman-akamai · 2024-11-21T15:59:41Z

@abailly-akamai Yeah, you make a good point. This would be really nice to have in other flows.

harsh-akamai · 2024-11-22T08:09:59Z

I'd like to specify the ticket requirement, really - are we to add this notice on all flows? cause if so it's a no brainer

@abailly-akamai The ticket specifically mentions to add the notice in the Linodes/Create screen.

harsh-akamai · 2024-12-09T07:18:19Z

packages/manager/src/features/StackScripts/StackScriptForm/StackScriptForm.tsx

+      <ImageSelect
+        textFieldProps={{
+          required: true,
+          tooltipText:
+            'Select which images are compatible with this StackScript. "Any/All" allows you to use private images.',
+        }}
+        anyAllOption
+        data-qa-stackscript-target-select
+        disabled={disabled}
+        errorText={hasErrorFor('images')}
+        label="Target Images"
+        multiple
+        onChange={onSelectChange}
+        placeholder="Select image(s)"
+        value={selectedImages}
+        variant="public"
+      />


Shifted ImageSelect out of the grid so that the banner could cover full width

abailly-akamai

Thanks for making this change!

Dynamic banner and logic looks great across ImageSelect instances ✅
Handling of multiple deprecated images ✅

linode-gh-bot · 2024-12-11T13:01:06Z

Cloud Manager UI test results

🎉 469 passing tests on test run #15 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
`0 Failing`	`469 Passing`	`2 Skipped`	`96m 40s`

cypress · 2024-12-11T15:16:30Z

Cloud Manager E2E Run #6953

Run Properties: Passed #6953 • 4afffcb742: feat: [M3-8676] - Provide Customer Notice for OS Distro Nearing EOL/EOS (#11253)

Project	`Cloud Manager E2E`
Branch Review	`develop`
Run status	`Passed #6953`
Run duration	`30m 01s`
Commit	`4afffcb742: feat: [M3-8676] - Provide Customer Notice for OS Distro Nearing EOL/EOS (#11253)`
Committer	`Harsh Shankar Rao`
View all properties for this run ↗︎

Test results
Failures	`0`
Flaky	`4`
Pending	`2`
Skipped	`0`
Passing	`469`
View all changes introduced in this branch ↗︎

feat: [M3-8676] - Notice for OS Distro Nearing EOL/EOS

7eafd19

harsh-akamai self-assigned this Nov 13, 2024

harsh-akamai added 2 commits November 13, 2024 16:34

Added changeset: Notice for OS Distro Nearing EOL/EOS

bf93de4

operator change

b889b2a

harsh-akamai marked this pull request as ready for review November 13, 2024 11:06

harsh-akamai requested a review from a team as a code owner November 13, 2024 11:06

harsh-akamai requested review from hkhalil-akamai and abailly-akamai and removed request for a team November 13, 2024 11:06

bnussman-akamai reviewed Nov 13, 2024

View reviewed changes

formatted text and udpated state management

178b7a7

replaced new states with existing useImageQuery()

de184ce

harsh-akamai added the Ready for Review label Nov 20, 2024

hkhalil-akamai approved these changes Nov 20, 2024

View reviewed changes

hkhalil-akamai added the Add'tl Approval Needed Waiting on another approval! label Nov 20, 2024

Merge branch 'develop' into M3-8676-notice-for-os-distro-eol

e1ff29e

bnussman-akamai approved these changes Nov 21, 2024

View reviewed changes

bnussman-akamai added Approved Multiple approvals and ready to merge! and removed Add'tl Approval Needed Waiting on another approval! labels Nov 21, 2024

abailly-akamai requested changes Nov 21, 2024

View reviewed changes

harsh-akamai added Do Not Merge and removed Ready for Review labels Nov 25, 2024

harsh-akamai removed Do Not Merge Approved Multiple approvals and ready to merge! labels Nov 25, 2024

harsh-akamai added 2 commits December 9, 2024 12:27

added decprecated notice for all ImageSelect references

53769cb

Merge branch 'develop' into M3-8676-notice-for-os-distro-eol

e47140f

harsh-akamai commented Dec 9, 2024

View reviewed changes

harsh-akamai requested review from abailly-akamai and bnussman-akamai December 9, 2024 07:18

harsh-akamai added the Ready for Review label Dec 9, 2024

abailly-akamai approved these changes Dec 9, 2024

View reviewed changes

bnussman-akamai approved these changes Dec 10, 2024

View reviewed changes

harsh-akamai added 2 commits December 10, 2024 21:51

Merge branch 'develop' into M3-8676-notice-for-os-distro-eol

516a090

Merge branch 'develop' into M3-8676-notice-for-os-distro-eol

55b9d49

jaalah-akamai added the Approved Multiple approvals and ready to merge! label Dec 11, 2024

jaalah-akamai merged commit 4afffcb into linode:develop Dec 11, 2024
23 checks passed

harsh-akamai deleted the M3-8676-notice-for-os-distro-eol branch December 11, 2024 17:09

This was referenced Jan 8, 2025

Release v1.134.0 - release → staging #11494

Closed

Release v1.134.0 - release → staging #11497

Merged

Release v1.134.0 - release → staging #11503

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: [M3-8676] - Provide Customer Notice for OS Distro Nearing EOL/EOS #11253

feat: [M3-8676] - Provide Customer Notice for OS Distro Nearing EOL/EOS #11253

harsh-akamai commented Nov 13, 2024 •

edited

Loading

bnussman-akamai Nov 13, 2024 •

edited

Loading

harsh-akamai Nov 18, 2024 •

edited

Loading

bnussman-akamai Nov 18, 2024

bnussman-akamai Nov 19, 2024

harsh-akamai Nov 20, 2024

bnussman-akamai Nov 13, 2024

bnussman-akamai Nov 13, 2024

hkhalil-akamai Nov 13, 2024

hkhalil-akamai commented Nov 13, 2024

hkhalil-akamai commented Nov 13, 2024

harsh-akamai commented Nov 19, 2024

github-actions bot commented Nov 19, 2024 •

edited

Loading

hkhalil-akamai left a comment

bnussman-akamai Nov 21, 2024

abailly-akamai left a comment •

edited

Loading

bnussman-akamai commented Nov 21, 2024 •

edited

Loading

abailly-akamai commented Nov 21, 2024

bnussman-akamai commented Nov 21, 2024

harsh-akamai commented Nov 22, 2024

harsh-akamai Dec 9, 2024

abailly-akamai left a comment

linode-gh-bot commented Dec 11, 2024

cypress bot commented Dec 11, 2024

feat: [M3-8676] - Provide Customer Notice for OS Distro Nearing EOL/EOS #11253

feat: [M3-8676] - Provide Customer Notice for OS Distro Nearing EOL/EOS #11253

Conversation

harsh-akamai commented Nov 13, 2024 • edited Loading

Description 📝

Changes 🔄

Target release date 🗓️

Preview 📷

How to test 🧪

Verification steps

As an Author, I have considered 🤔

As an Author, before moving this PR from Draft to Open, I confirmed ✅

bnussman-akamai Nov 13, 2024 • edited Loading

Choose a reason for hiding this comment

harsh-akamai Nov 18, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hkhalil-akamai commented Nov 13, 2024

Adding a qualifier

Past EOL dates

hkhalil-akamai commented Nov 13, 2024

harsh-akamai commented Nov 19, 2024

github-actions bot commented Nov 19, 2024 • edited Loading

hkhalil-akamai left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

abailly-akamai left a comment • edited Loading

Choose a reason for hiding this comment

bnussman-akamai commented Nov 21, 2024 • edited Loading

abailly-akamai commented Nov 21, 2024

bnussman-akamai commented Nov 21, 2024

harsh-akamai commented Nov 22, 2024

Choose a reason for hiding this comment

abailly-akamai left a comment

Choose a reason for hiding this comment

linode-gh-bot commented Dec 11, 2024

Cloud Manager UI test results

🎉 469 passing tests on test run #15 ↗︎

cypress bot commented Dec 11, 2024

harsh-akamai commented Nov 13, 2024 •

edited

Loading

bnussman-akamai Nov 13, 2024 •

edited

Loading

harsh-akamai Nov 18, 2024 •

edited

Loading

github-actions bot commented Nov 19, 2024 •

edited

Loading

abailly-akamai left a comment •

edited

Loading

bnussman-akamai commented Nov 21, 2024 •

edited

Loading