feat: [WD-24084] Fix error messaging for creation a SB with no valid … (#1411)

…pools available.

## Done

- Fix error messaging for creation a SB with no valid pools available.

## QA

1. Run the LXD-UI:
- On the demo server via the link posted by @webteam-app below. This is
only available for PRs created by collaborators of the repo. Ask @Kxiru
or @edlerd for access.
- With a local copy of this branch, [build and run as described in the
docs](https://github.com/canonical/lxd-ui/blob/main/CONTRIBUTING.md#setting-up-for-development).
2. Perform the following QA steps:
- [List the steps to QA the new feature(s) or prove that a bug has been
resolved]

## Screenshots

<img width="1437" height="1040" alt="image"
src="https://github.com/user-attachments/assets/647ffc96-26cb-441b-899f-8d44ecc5d114"
/>

Author: Kxiru

src/pages/storage/forms/StorageBucketForm.tsx

@@ -46,17 +46,6 @@ const StorageBucketForm: FC<Props> = ({ formik, bucket }) => {
     <Form onSubmit={formik.handleSubmit} className={"bucket-create-form"}>
       {/* hidden submit to enable enter key in inputs */}
       <Input type="submit" hidden value="Hidden input" />
-      <Input
-        {...getFormProps("name")}
-        type="text"
-        label="Name"
-        required
-        autoFocus
-        disabled={!!bucketEditRestriction || isEditing}
-        help={isEditing && "Storage bucket name can't be changed"}
-        title={bucketEditRestriction}
-      />
-
       <StoragePoolSelector
         value={formik.values.pool}
         setValue={(value) => void formik.setFieldValue("pool", value)}
@@ -69,9 +58,26 @@ const StorageBucketForm: FC<Props> = ({ formik, bucket }) => {
           disabled: !!bucketEditRestriction || isEditing,
           help: isEditing
             ? "Storage bucket pool can't be changed"
-            : "Pool must have a Ceph Object driver",
+            : formik.errors.pool
+              ? null
+              : "Pool must have a Ceph Object driver",
+          error: formik.errors.pool,
+          onBlur: formik.handleBlur,
+          takeFocus: true,
+          required: true,
         }}
       />
+
+      <Input
+        {...getFormProps("name")}
+        type="text"
+        label="Name"
+        required
+        disabled={!!bucketEditRestriction || isEditing}
+        help={isEditing && "Storage bucket name can't be changed"}
+        title={bucketEditRestriction}
+      />
+
       <DiskSizeSelector
         label="Size"
         value={formik.values.size}

src/pages/storage/panels/CreateStorageBucketPanel.tsx

@@ -40,6 +40,7 @@ const CreateStorageBucketPanel: FC = () => {
         ...testDuplicateStorageBucketName(panelParams.project, controllerState),
       )
       .required("Bucket name is required"),
+    pool: Yup.string().required("Pool must have a Ceph Object driver"),
   });
 
   const handleSuccess = (bucketName: string, pool: string) => {