change: [M3-9735] - Add encryption icon to Image edit drawer (#11993)

* Add 'Encrypted' notice

* Added changeset: Display encryption status with lock icon in Image Edit Drawer

* Add condition to check for distributed-sites before showing encrypted label

Author: bill-akamai

packages/manager/.changeset/pr-11993-added-1744134925847.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+Display encryption status with lock icon in Image Edit Drawer ([#11993](https://github.com/linode/manager/pull/11993))

packages/manager/src/features/Images/ImagesLanding/EditImageDrawer.tsx

@@ -7,6 +7,8 @@ import { Controller, useForm } from 'react-hook-form';
 import { NotFound } from 'src/components/NotFound';
 import { TagsInput } from 'src/components/TagsInput/TagsInput';
 import { useUpdateImageMutation } from 'src/queries/images';
+import Lock from 'src/assets/icons/lock.svg';
+import { Stack, Typography } from '@linode/ui';
 
 import { useImageAndLinodeGrantCheck } from '../utils';
 
@@ -102,6 +104,17 @@ export const EditImageDrawer = (props: Props) => {
         />
       )}
 
+      {image?.capabilities?.includes('distributed-sites') && (
+        <Stack direction="row" spacing={1} alignItems="center">
+          <Lock />
+          <Typography
+            sx={(theme) => ({ color: theme.textColors.textAccessTable })}
+          >
+            Encrypted
+          </Typography>
+        </Stack>
+      )}
+
       <Controller
         render={({ field, fieldState }) => (
           <TextField