Add Create Pool button on the pools page

airflow/ui/src/pages/Pools/AddPoolButton.tsx

@@ -0,0 +1,75 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Heading, useDisclosure } from "@chakra-ui/react";
+import { FiPlusCircle } from "react-icons/fi";
+
+import { Button, Dialog, Toaster } from "src/components/ui";
+import { useAddPool } from "src/queries/useAddPool";
+
+import PoolForm, { type PoolBody } from "./PoolForm";
+
+const AddPoolButton = () => {
+  const { onClose, onOpen, open } = useDisclosure();
+  const { addPool, error, isPending, setError } = useAddPool({
+    onSuccessConfirm: onClose,
+  });
+
+  const initialPoolValue: PoolBody = {
+    description: "",
+    include_deferred: false,
+    name: "",
+    slots: 0,
+  };
+
+  const handleClose = () => {
+    setError(undefined);
+    onClose();
+  };
+
+  return (
+    <>
+      <Toaster />
+      <Button colorPalette="blue" onClick={onOpen}>
+        <FiPlusCircle /> Add Pool
+      </Button>
+
+      <Dialog.Root onOpenChange={handleClose} open={open} size="xl">
+        <Dialog.Content backdrop>
+          <Dialog.Header>
+            <Heading size="xl">Add Pool</Heading>
+          </Dialog.Header>
+
+          <Dialog.CloseTrigger />
+
+          <Dialog.Body>
+            <PoolForm
+              error={error}
+              initialPool={initialPoolValue}
+              isPending={isPending}
+              manageMutate={addPool}
+              setError={setError}
+            />
+          </Dialog.Body>
+        </Dialog.Content>
+      </Dialog.Root>
+    </>
+  );
+};
+
+export default AddPoolButton;

airflow/ui/src/pages/Pools/PoolBar.tsx

@@ -44,7 +44,7 @@ const PoolBar = ({ pool }: PoolBarProps) => (
     <Flex alignItems="center" bg="bg.muted" justifyContent="space-between" p={4}>
       <VStack align="start">
         <HStack>
-          <Text fontSize="lg" fontWeight="bold">
+          <Text fontSize="lg" fontWeight="bold" whiteSpace="normal" wordBreak="break-word">
             {pool.name} ({pool.slots} slots)
           </Text>
           {pool.include_deferred ? (

airflow/ui/src/pages/Pools/PoolForm.tsx

@@ -0,0 +1,140 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Box, Field, HStack, Input, Spacer, Textarea } from "@chakra-ui/react";
+import { Controller, useForm } from "react-hook-form";
+import { FiSave } from "react-icons/fi";
+
+import { ErrorAlert } from "src/components/ErrorAlert";
+import { Button } from "src/components/ui";
+import { Checkbox } from "src/components/ui/Checkbox";
+
+export type PoolBody = {
+  description: string | undefined;
+  include_deferred: boolean;
+  name: string;
+  slots: number;
+};
+
+type PoolFormProps = {
+  readonly error: unknown;
+  readonly initialPool: PoolBody;
+  readonly isPending: boolean;
+  readonly manageMutate: (poolRequestBody: PoolBody) => void;
+  readonly setError: (error: unknown) => void;
+};
+
+const PoolForm = ({ error, initialPool, isPending, manageMutate, setError }: PoolFormProps) => {
+  const {
+    control,
+    formState: { isDirty, isValid },
+    handleSubmit,
+    reset,
+  } = useForm<PoolBody>({
+    defaultValues: initialPool,
+    mode: "onChange",
+  });
+
+  const onSubmit = (data: PoolBody) => {
+    manageMutate(data);
+  };
+
+  const handleReset = () => {
+    setError(undefined);
+    reset();
+  };
+
+  return (
+    <>
+      <Controller
+        control={control}
+        name="name"
+        render={({ field, fieldState }) => (
+          <Field.Root invalid={Boolean(fieldState.error)} required>
+            <Field.Label fontSize="md">
+              Name <Field.RequiredIndicator />
+            </Field.Label>
+            <Input {...field} disabled={Boolean(initialPool.name)} required size="sm" />
+            {fieldState.error ? <Field.ErrorText>{fieldState.error.message}</Field.ErrorText> : undefined}
+          </Field.Root>
+        )}
+        rules={{
+          required: "Name is required",
+          validate: (_value) => _value.length <= 256 || "Name can contain a maximum of 256 characters",
+        }}
+      />
+
+      <Controller
+        control={control}
+        name="slots"
+        render={({ field }) => (
+          <Field.Root mt={4}>
+            <Field.Label fontSize="md">Slots</Field.Label>
+            <Input {...field} min={initialPool.slots} size="sm" type="number" />
+          </Field.Root>
+        )}
+      />
+
+      <Controller
+        control={control}
+        name="description"
+        render={({ field }) => (
+          <Field.Root mb={4} mt={4}>
+            <Field.Label fontSize="md">Description</Field.Label>
+            <Textarea {...field} size="sm" />
+          </Field.Root>
+        )}
+      />
+
+      <Controller
+        control={control}
+        name="include_deferred"
+        render={({ field }) => (
+          <Field.Root mb={4} mt={4}>
+            <Field.Label fontSize="md">Include Deferred</Field.Label>
+            <Checkbox checked={field.value} colorPalette="blue" onChange={field.onChange} size="sm">
+              Check to include deferred tasks when calculating open pool slots
+            </Checkbox>
+          </Field.Root>
+        )}
+      />
+
+      <ErrorAlert error={error} />
+
+      <Box as="footer" display="flex" justifyContent="flex-end" mt={8}>
+        <HStack w="full">
+          {isDirty ? (
+            <Button onClick={handleReset} variant="outline">
+              Reset
+            </Button>
+          ) : undefined}
+          <Spacer />
+          <Button
+            colorPalette="blue"
+            disabled={!isValid || isPending}
+            onClick={() => void handleSubmit(onSubmit)()}
+          >
+            <FiSave /> Save
+          </Button>
+        </HStack>
+      </Box>
+    </>
+  );
+};
+
+export default PoolForm;

airflow/ui/src/pages/Pools/Pools.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box, Skeleton } from "@chakra-ui/react";
+import { Box, HStack, Skeleton, Spacer } from "@chakra-ui/react";
 import { useState } from "react";
 import { useSearchParams } from "react-router-dom";
 
@@ -25,6 +25,7 @@ import { ErrorAlert } from "src/components/ErrorAlert";
 import { SearchBar } from "src/components/SearchBar";
 import { type SearchParamsKeysType, SearchParamsKeys } from "src/constants/searchParams";
 
+import AddPoolButton from "./AddPoolButton";
 import PoolBar from "./PoolBar";
 
 export const Pools = () => {
@@ -54,6 +55,10 @@ export const Pools = () => {
         onChange={handleSearchChange}
         placeHolder="Search Pools"
       />
+      <HStack gap={4} mt={4}>
+        <Spacer />
+        <AddPoolButton />
+      </HStack>
       <Box mt={4}>
         {isLoading ? (
           <Skeleton height="100px" />

airflow/ui/src/queries/useAddPool.ts

@@ -0,0 +1,67 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
+
+import { usePoolServiceGetPoolsKey, usePoolServicePostPool } from "openapi/queries";
+import { toaster } from "src/components/ui";
+import type { PoolBody } from "src/pages/Pools/PoolForm";
+
+export const useAddPool = ({ onSuccessConfirm }: { onSuccessConfirm: () => void }) => {
+  const queryClient = useQueryClient();
+  const [error, setError] = useState<unknown>(undefined);
+
+  const onSuccess = async () => {
+    await queryClient.invalidateQueries({
+      queryKey: [usePoolServiceGetPoolsKey],
+    });
+
+    toaster.create({
+      description: "Pool has been added successfully",
+      title: "Pool Add Request Submitted",
+      type: "success",
+    });
+
+    onSuccessConfirm();
+  };
+
+  const onError = (_error: unknown) => {
+    setError(_error);
+  };
+
+  const { isPending, mutate } = usePoolServicePostPool({
+    onError,
+    onSuccess,
+  });
+
+  const addPool = (poolRequestBody: PoolBody) => {
+    const parsedDescription = poolRequestBody.description === "" ? undefined : poolRequestBody.description;
+
+    mutate({
+      requestBody: {
+        description: parsedDescription,
+        include_deferred: poolRequestBody.include_deferred,
+        name: poolRequestBody.name,
+        slots: poolRequestBody.slots,
+      },
+    });
+  };
+
+  return { addPool, error, isPending, setError };
+};