Componentize config setting fields

gitpod-io · Nov 11, 2023 · 163949c · 163949c
1 parent 03143d4
commit 163949c
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 36 deletions.
diff --git a/components/dashboard/src/repositories/detail/ConfigurationName.tsx b/components/dashboard/src/repositories/detail/ConfigurationName.tsx
@@ -4,14 +4,15 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
-import { TextInputField } from "../../components/forms/TextInputField";
-import { FC, useCallback, useState } from "react";
-import { useUpdateProject } from "../../data/projects/project-queries";
-import { useToast } from "../../components/toasts/Toasts";
-import { useOnBlurError } from "../../hooks/use-onblur-error";
 import type { Configuration } from "@gitpod/public-api/lib/gitpod/v1/configuration_pb";
 import { Button } from "@podkit/buttons/Button";
 import { LoadingButton } from "@podkit/buttons/LoadingButton";
+import { FC, useCallback, useState } from "react";
+import { TextInputField } from "../../components/forms/TextInputField";
+import { useToast } from "../../components/toasts/Toasts";
+import { useUpdateProject } from "../../data/projects/project-queries";
+import { useOnBlurError } from "../../hooks/use-onblur-error";
+import { ConfigurationSettingsField } from "./ConfigurationSettingsField";
 
 const MAX_LENGTH = 100;
 
@@ -51,34 +52,36 @@ export const ConfigurationNameForm: FC<Props> = ({ configuration }) => {
     );
 
     return (
-        <form onSubmit={updateName} className="border border-gray-300 dark:border-gray-700 rounded-xl p-4">
-            <TextInputField
-                label="Configuration name"
-                hint={`The name can be up to ${MAX_LENGTH} characters long.`}
-                value={projectName}
-                error={nameError.message}
-                onChange={setProjectName}
-                onBlur={nameError.onBlur}
-            />
-            <div className="flex flex-row items-center justify-start gap-2 mt-4 w-full">
-                <LoadingButton
-                    className=""
-                    type="submit"
-                    disabled={configuration.name === projectName}
-                    loading={updateProject.isLoading}
-                >
-                    Save
-                </LoadingButton>
-                <Button
-                    variant="secondary"
-                    disabled={configuration.name === projectName}
-                    onClick={() => {
-                        setProjectName(configuration.name);
-                    }}
-                >
-                    Cancel
-                </Button>
-            </div>
-        </form>
+        <ConfigurationSettingsField>
+            <form onSubmit={updateName}>
+                <TextInputField
+                    label="Configuration name"
+                    hint={`The name can be up to ${MAX_LENGTH} characters long.`}
+                    value={projectName}
+                    error={nameError.message}
+                    onChange={setProjectName}
+                    onBlur={nameError.onBlur}
+                />
+                <div className="flex flex-row items-center justify-start gap-2 mt-4 w-full">
+                    <LoadingButton
+                        className=""
+                        type="submit"
+                        disabled={configuration.name === projectName}
+                        loading={updateProject.isLoading}
+                    >
+                        Save
+                    </LoadingButton>
+                    <Button
+                        variant="secondary"
+                        disabled={configuration.name === projectName}
+                        onClick={() => {
+                            setProjectName(configuration.name);
+                        }}
+                    >
+                        Cancel
+                    </Button>
+                </div>
+            </form>
+        </ConfigurationSettingsField>
     );
 };
diff --git a/components/dashboard/src/repositories/detail/ConfigurationSettingsField.tsx b/components/dashboard/src/repositories/detail/ConfigurationSettingsField.tsx
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2023 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import { cn } from "@podkit/lib/cn";
+
+interface Props {
+    children: React.ReactNode;
+    className?: string;
+}
+
+export const ConfigurationSettingsField = ({ children, className }: Props) => {
+    return (
+        <div className={cn("border border-gray-300 dark:border-gray-700 rounded-xl p-4", className)}>{children}</div>
+    );
+};
diff --git a/components/dashboard/src/repositories/detail/RemoveConfiguration.tsx b/components/dashboard/src/repositories/detail/RemoveConfiguration.tsx
@@ -10,6 +10,7 @@ import { RemoveConfigurationModal } from "./RemoveConfigurationModal";
 import { useHistory } from "react-router";
 import { useCallback, useState } from "react";
 import type { Configuration } from "@gitpod/public-api/lib/gitpod/v1/configuration_pb";
+import { ConfigurationSettingsField } from "./ConfigurationSettingsField";
 
 interface Props {
     configuration: Configuration;
@@ -25,7 +26,7 @@ export const RemoveConfiguration = ({ configuration }: Props) => {
 
     return (
         <>
-            <div className="mt-12 border border-gray-300 dark:border-gray-700 rounded-xl p-4">
+            <ConfigurationSettingsField>
                 <Heading2>Remove this Configuration</Heading2>
                 <Subheading className="pb-4 max-w-md dark:text-gray-400">
                     This will delete the project and all project-level environment variables you've set for this
@@ -34,7 +35,7 @@ export const RemoveConfiguration = ({ configuration }: Props) => {
                 <Button type={"danger.secondary"} onClick={() => setShowRemoveModal(true)}>
                     Remove Configuration
                 </Button>
-            </div>
+            </ConfigurationSettingsField>
             {configuration && showRemoveModal && (
                 <RemoveConfigurationModal
                     configuration={configuration}