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

packages/manager/.changeset/pr-11253-added-1731495888267.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+Notice for OS Distro Nearing EOL/EOS ([#11253](https://github.com/linode/manager/pull/11253))

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

@@ -1,12 +1,16 @@
-import { Paper, Stack } from '@linode/ui';
+import { Notice, Paper, Stack } from '@linode/ui';
 import { useQueryClient } from '@tanstack/react-query';
+import { DateTime } from 'luxon';
 import React from 'react';
 import { useController, useFormContext, useWatch } from 'react-hook-form';
 
 import { ImageSelect } from 'src/components/ImageSelect/ImageSelect';
+import { isImageDeprecated } from 'src/components/ImageSelect/utilities';
 import { Typography } from 'src/components/Typography';
 import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';
+import { useImageQuery } from 'src/queries/images';
 import { useRegionQuery } from 'src/queries/regions/regions';
+import { formatDate } from 'src/utilities/formatDate';
 
 import { Region } from '../Region';
 import { getGeneratedLinodeLabel } from '../utilities';
@@ -34,6 +38,13 @@ export const OperatingSystems = () => {
   });
 
   const { data: region } = useRegionQuery(regionId ?? -1);
+  const { data: image } = useImageQuery(
+    field.value ?? '',
+    Boolean(field.value)
+  );
+
+  const showImageDeprecatedWarning =
+    image !== undefined && isImageDeprecated(image);
 
   const isCreateLinodeRestricted = useRestrictedGlobalGrantCheck({
     globalGrantType: 'add_linodes',
@@ -68,6 +79,34 @@ export const OperatingSystems = () => {
           value={field.value}
           variant="public"
         />
+        {image && showImageDeprecatedWarning && (
+          <Notice
+            dataTestId="os-distro-deprecated-image-notice"
+            spacingBottom={0}
+            spacingTop={16}
+            variant="warning"
+          >
+            {image.eol && DateTime.fromISO(image.eol) > DateTime.now() ? (
+              <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>
+            ) : (
+              <Typography fontFamily={(theme) => theme.font.bold}>
+                {image.label} reached its end-of-life on{' '}
+                {formatDate(image.eol ?? '', { format: 'MM/dd/yyyy' })}. 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>
+        )}
       </Paper>
     </Stack>
   );