Cleanup UI

Signed-off-by: Bryan Frimin <bryan@getprobo.com>
2025-10-02 00:11:29 +02:00
parent b7fdfb965f
commit 064aa87ea5
11 changed files with 1094 additions and 1094 deletions
--- a/apps/console/src/pages/organizations/SettingsPage.tsx
+++ b/apps/console/src/pages/organizations/SettingsPage.tsx
@@ -62,6 +62,22 @@ const organizationFragment = graphql`
    websiteUrl
    email
    headquarterAddress
+    customDomain {
+      id
+      domain
+      sslStatus
+      dnsRecords {
+        type
+        name
+        value
+        ttl
+        purpose
+      }
+      createdAt
+      updatedAt
+      verifiedAt
+      sslExpiresAt
+    }
    users(first: 100) {
      edges {
        node {
@@ -117,8 +133,9 @@ export default function SettingsPage({ queryRef }: Props) {
  const [deleteOrganization, isDeleting] = useDeleteOrganizationMutation();
  const users = organization.users.edges.map((edge) => edge.node);

-  const { formState, handleSubmit, register, reset } =
-    useFormWithSchema(organizationSchema, {
+  const { formState, handleSubmit, register, reset } = useFormWithSchema(
+    organizationSchema,
+    {
      defaultValues: {
        name: organization.name || "",
        description: organization.description || "",
@@ -126,7 +143,8 @@ export default function SettingsPage({ queryRef }: Props) {
        email: organization.email || "",
        headquarterAddress: organization.headquarterAddress || "",
      },
-    });
+    }
+  );

  useEffect(() => {
    reset({
@@ -160,7 +178,9 @@ export default function SettingsPage({ queryRef }: Props) {
      onCompleted() {
        toast({
          title: __("Organization updated"),
-          description: __("Your organization details have been updated successfully."),
+          description: __(
+            "Your organization details have been updated successfully."
+          ),
          variant: "success",
        });
      },
@@ -220,80 +240,81 @@ export default function SettingsPage({ queryRef }: Props) {
            {formState.isSubmitting && <Spinner />}
          </div>
          <Card padded className="space-y-4">
-          <div>
-            <Label>{__("Organization logo")}</Label>
-            <div className="flex w-max items-center gap-4">
-              <Avatar
-                src={organization.logoUrl}
-                name={organization.name}
-                size="xl"
+            <div>
+              <Label>{__("Organization logo")}</Label>
+              <div className="flex w-max items-center gap-4">
+                <Avatar
+                  src={organization.logoUrl}
+                  name={organization.name}
+                  size="xl"
+                />
+                <FileButton
+                  disabled={formState.isSubmitting}
+                  onChange={updateOrganizationLogo}
+                  variant="secondary"
+                  className="ml-auto"
+                >
+                  {__("Change logo")}
+                </FileButton>
+              </div>
+            </div>
+            <Field
+              {...register("name")}
+              readOnly={formState.isSubmitting}
+              name="name"
+              type="text"
+              label={__("Organization name")}
+              placeholder={__("Organization name")}
+            />
+            <div>
+              <Label>{__("Description")}</Label>
+              <Textarea
+                {...register("description")}
+                readOnly={formState.isSubmitting}
+                name="description"
+                placeholder={__("Brief description of your organization")}
+                rows={3}
              />
-              <FileButton
-                disabled={formState.isSubmitting}
-                onChange={updateOrganizationLogo}
-                variant="secondary"
-                className="ml-auto"
-              >
-                {__("Change logo")}
-              </FileButton>
            </div>
-          </div>
-          <Field
-            {...register("name")}
-            readOnly={formState.isSubmitting}
-            name="name"
-            type="text"
-            label={__("Organization name")}
-            placeholder={__("Organization name")}
-          />
-          <div>
-            <Label>{__("Description")}</Label>
-            <Textarea
-              {...register("description")}
-              readOnly={formState.isSubmitting}
-              name="description"
-              placeholder={__("Brief description of your organization")}
-              rows={3}
-            />
-          </div>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <Field
-              {...register("websiteUrl")}
-              readOnly={formState.isSubmitting}
-              name="websiteUrl"
-              type="url"
-              label={__("Website URL")}
-              placeholder={__("https://example.com")}
-            />
-            <Field
-              {...register("email")}
-              readOnly={formState.isSubmitting}
-              name="email"
-              type="email"
-              label={__("Email")}
-              placeholder={__("contact@example.com")}
-            />
-          </div>
-          <div>
-            <Label>{__("Headquarter Address")}</Label>
-            <Textarea
-              {...register("headquarterAddress")}
-              readOnly={formState.isSubmitting}
-              name="headquarterAddress"
-              placeholder={__("123 Main St, City, Country")}
-            />
-          </div>
-
-
-          {formState.isDirty && (
-            <div className="flex justify-end pt-6">
-              <Button type="submit" disabled={formState.isSubmitting}>
-                {formState.isSubmitting ? __("Updating...") : __("Update Organization")}
-              </Button>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <Field
+                {...register("websiteUrl")}
+                readOnly={formState.isSubmitting}
+                name="websiteUrl"
+                type="url"
+                label={__("Website URL")}
+                placeholder={__("https://example.com")}
+              />
+              <Field
+                {...register("email")}
+                readOnly={formState.isSubmitting}
+                name="email"
+                type="email"
+                label={__("Email")}
+                placeholder={__("contact@example.com")}
+              />
            </div>
-          )}
-        </Card>
-      </div>
+            <div>
+              <Label>{__("Headquarter Address")}</Label>
+              <Textarea
+                {...register("headquarterAddress")}
+                readOnly={formState.isSubmitting}
+                name="headquarterAddress"
+                placeholder={__("123 Main St, City, Country")}
+              />
+            </div>
+
+            {formState.isDirty && (
+              <div className="flex justify-end pt-6">
+                <Button type="submit" disabled={formState.isSubmitting}>
+                  {formState.isSubmitting
+                    ? __("Updating...")
+                    : __("Update Organization")}
+                </Button>
+              </div>
+            )}
+          </Card>
+        </div>
      </form>

      {/* Integrations */}
@@ -322,14 +343,18 @@ export default function SettingsPage({ queryRef }: Props) {
        </Card>
      </div>

-      {/* Custom Domains */}
      <div className="space-y-4">
-        <h2 className="text-base font-medium">{__("Custom Domains")}</h2>
-        <CustomDomainManager />
+        <h2 className="text-base font-medium">{__("Custom Domain")}</h2>
+        <CustomDomainManager
+          organizationId={organization.id}
+          customDomain={organization.customDomain}
+        />
      </div>

      <div className="space-y-4">
-        <h2 className="text-base font-medium text-red-600">{__("Danger Zone")}</h2>
+        <h2 className="text-base font-medium text-red-600">
+          {__("Danger Zone")}
+        </h2>
        <Card padded className="border-red-200 flex items-center gap-3">
          <div className="mr-auto">
            <h3 className="text-base font-semibold text-red-700">
@@ -347,11 +372,7 @@ export default function SettingsPage({ queryRef }: Props) {
            onConfirm={handleDeleteOrganization}
            isDeleting={isDeleting}
          >
-            <Button
-              variant="danger"
-              icon={IconTrashCan}
-              disabled={isDeleting}
-            >
+            <Button variant="danger" icon={IconTrashCan} disabled={isDeleting}>
              {isDeleting ? __("Deleting...") : __("Delete Organization")}
            </Button>
          </DeleteOrganizationDialog>
--- a/apps/console/src/pages/organizations/generated/SettingsPageFragment.graphql.ts
+++ b/apps/console/src/pages/organizations/generated/SettingsPageFragment.graphql.ts
@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<c071187d5ef9cecb128621c57f97393b>>
+ * @generated SignedSource<<75e8a41e9d070472ff42d71e17c47fa6>>
 * @lightSyntaxTransform
 * @nogrep
 */
@@ -9,6 +9,7 @@
 // @ts-nocheck

 import { ReaderFragment } from 'relay-runtime';
+export type SSLStatus = "ACTIVE" | "EXPIRED" | "FAILED" | "PENDING" | "PROVISIONING" | "RENEWING";
 import { FragmentRefs } from "relay-runtime";
 export type SettingsPageFragment$data = {
  readonly connectors: {
@@ -21,6 +22,22 @@ export type SettingsPageFragment$data = {
      };
    }>;
  };
+  readonly customDomain: {
+    readonly createdAt: any;
+    readonly dnsRecords: ReadonlyArray<{
+      readonly name: string;
+      readonly purpose: string;
+      readonly ttl: number;
+      readonly type: string;
+      readonly value: string;
+    }>;
+    readonly domain: string;
+    readonly id: string;
+    readonly sslExpiresAt: any | null | undefined;
+    readonly sslStatus: SSLStatus;
+    readonly updatedAt: any;
+    readonly verifiedAt: any | null | undefined;
+  } | null | undefined;
  readonly description: string | null | undefined;
  readonly email: string | null | undefined;
  readonly headquarterAddress: string | null | undefined;
@@ -67,20 +84,27 @@ v2 = {
  "name": "email",
  "storageKey": null
 },
-v3 = [
-  {
-    "kind": "Literal",
-    "name": "first",
-    "value": 100
-  }
-],
+v3 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "type",
+  "storageKey": null
+},
 v4 = {
  "alias": null,
  "args": null,
  "kind": "ScalarField",
  "name": "createdAt",
  "storageKey": null
-};
+},
+v5 = [
+  {
+    "kind": "Literal",
+    "name": "first",
+    "value": 100
+  }
+];
 return {
  "argumentDefinitions": [],
  "kind": "Fragment",
@@ -120,7 +144,89 @@ return {
    },
    {
      "alias": null,
-      "args": (v3/*: any*/),
+      "args": null,
+      "concreteType": "CustomDomain",
+      "kind": "LinkedField",
+      "name": "customDomain",
+      "plural": false,
+      "selections": [
+        (v0/*: any*/),
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "domain",
+          "storageKey": null
+        },
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "sslStatus",
+          "storageKey": null
+        },
+        {
+          "alias": null,
+          "args": null,
+          "concreteType": "DNSRecordInstruction",
+          "kind": "LinkedField",
+          "name": "dnsRecords",
+          "plural": true,
+          "selections": [
+            (v3/*: any*/),
+            (v1/*: any*/),
+            {
+              "alias": null,
+              "args": null,
+              "kind": "ScalarField",
+              "name": "value",
+              "storageKey": null
+            },
+            {
+              "alias": null,
+              "args": null,
+              "kind": "ScalarField",
+              "name": "ttl",
+              "storageKey": null
+            },
+            {
+              "alias": null,
+              "args": null,
+              "kind": "ScalarField",
+              "name": "purpose",
+              "storageKey": null
+            }
+          ],
+          "storageKey": null
+        },
+        (v4/*: any*/),
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "updatedAt",
+          "storageKey": null
+        },
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "verifiedAt",
+          "storageKey": null
+        },
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "sslExpiresAt",
+          "storageKey": null
+        }
+      ],
+      "storageKey": null
+    },
+    {
+      "alias": null,
+      "args": (v5/*: any*/),
      "concreteType": "UserConnection",
      "kind": "LinkedField",
      "name": "users",
@@ -163,7 +269,7 @@ return {
    },
    {
      "alias": null,
-      "args": (v3/*: any*/),
+      "args": (v5/*: any*/),
      "concreteType": "ConnectorConnection",
      "kind": "LinkedField",
      "name": "connectors",
@@ -187,13 +293,7 @@ return {
              "selections": [
                (v0/*: any*/),
                (v1/*: any*/),
-                {
-                  "alias": null,
-                  "args": null,
-                  "kind": "ScalarField",
-                  "name": "type",
-                  "storageKey": null
-                },
+                (v3/*: any*/),
                (v4/*: any*/)
              ],
              "storageKey": null
@@ -210,6 +310,6 @@ return {
 };
 })();

-(node as any).hash = "bdd548b7b3fa4c1cfef32569dc63d45d";
+(node as any).hash = "9786965352e1978c1171509fcce34b56";

 export default node;