Plug back general settings page
Signed-off-by: Émile Ré <nemile.re@gmail.com>
This commit is contained in:
Émile Ré
@@ -1,39 +0,0 @@
|
||||
import { graphql } from "relay-runtime";
|
||||
// import { useTranslate } from "@probo/i18n";
|
||||
// import { useMutationWithToasts } from "../useMutationWithToasts";
|
||||
// import type { OrganizationGraphDeleteMutation } from "./__generated__/OrganizationGraphDeleteMutation.graphql";
|
||||
|
||||
export const organizationViewQuery = graphql`
|
||||
query OrganizationGraph_ViewQuery($organizationId: ID!) {
|
||||
node(id: $organizationId) {
|
||||
... on Organization {
|
||||
id
|
||||
name
|
||||
...SettingsPageFragment
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
// const deleteOrganizationMutation = graphql`
|
||||
// mutation OrganizationGraphDeleteMutation(
|
||||
// $input: DeleteOrganizationInput!
|
||||
// $connections: [ID!]!
|
||||
// ) {
|
||||
// deleteOrganization(input: $input) {
|
||||
// deletedOrganizationId @deleteEdge(connections: $connections)
|
||||
// }
|
||||
// }
|
||||
// `;
|
||||
|
||||
// export function useDeleteOrganizationMutation() {
|
||||
// const { __ } = useTranslate();
|
||||
|
||||
// return useMutationWithToasts<OrganizationGraphDeleteMutation>(
|
||||
// deleteOrganizationMutation,
|
||||
// {
|
||||
// successMessage: __("Organization deleted successfully."),
|
||||
// errorMessage: __("Failed to delete organization"),
|
||||
// }
|
||||
// );
|
||||
// }
|
||||
@@ -1,228 +0,0 @@
|
||||
/**
|
||||
* @generated SignedSource<<871b1bf04087566d269a7d5b92353966>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
|
||||
import { ConcreteRequest } from 'relay-runtime';
|
||||
import { FragmentRefs } from "relay-runtime";
|
||||
export type OrganizationGraph_ViewQuery$variables = {
|
||||
organizationId: string;
|
||||
};
|
||||
export type OrganizationGraph_ViewQuery$data = {
|
||||
readonly node: {
|
||||
readonly id?: string;
|
||||
readonly name?: string;
|
||||
readonly " $fragmentSpreads": FragmentRefs<"SettingsPageFragment">;
|
||||
};
|
||||
};
|
||||
export type OrganizationGraph_ViewQuery = {
|
||||
response: OrganizationGraph_ViewQuery$data;
|
||||
variables: OrganizationGraph_ViewQuery$variables;
|
||||
};
|
||||
|
||||
const node: ConcreteRequest = (function(){
|
||||
var v0 = [
|
||||
{
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "organizationId"
|
||||
}
|
||||
],
|
||||
v1 = [
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "id",
|
||||
"variableName": "organizationId"
|
||||
}
|
||||
],
|
||||
v2 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "id",
|
||||
"storageKey": null
|
||||
},
|
||||
v3 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "name",
|
||||
"storageKey": null
|
||||
};
|
||||
return {
|
||||
"fragment": {
|
||||
"argumentDefinitions": (v0/*: any*/),
|
||||
"kind": "Fragment",
|
||||
"metadata": null,
|
||||
"name": "OrganizationGraph_ViewQuery",
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": (v1/*: any*/),
|
||||
"concreteType": null,
|
||||
"kind": "LinkedField",
|
||||
"name": "node",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"kind": "InlineFragment",
|
||||
"selections": [
|
||||
(v2/*: any*/),
|
||||
(v3/*: any*/),
|
||||
{
|
||||
"args": null,
|
||||
"kind": "FragmentSpread",
|
||||
"name": "SettingsPageFragment"
|
||||
}
|
||||
],
|
||||
"type": "Organization",
|
||||
"abstractKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"type": "Query",
|
||||
"abstractKey": null
|
||||
},
|
||||
"kind": "Request",
|
||||
"operation": {
|
||||
"argumentDefinitions": (v0/*: any*/),
|
||||
"kind": "Operation",
|
||||
"name": "OrganizationGraph_ViewQuery",
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": (v1/*: any*/),
|
||||
"concreteType": null,
|
||||
"kind": "LinkedField",
|
||||
"name": "node",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "__typename",
|
||||
"storageKey": null
|
||||
},
|
||||
(v2/*: any*/),
|
||||
{
|
||||
"kind": "InlineFragment",
|
||||
"selections": [
|
||||
(v3/*: any*/),
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "CustomDomain",
|
||||
"kind": "LinkedField",
|
||||
"name": "customDomain",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v2/*: 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": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "type",
|
||||
"storageKey": null
|
||||
},
|
||||
(v3/*: 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
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "createdAt",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "updatedAt",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "sslExpiresAt",
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"type": "Organization",
|
||||
"abstractKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
]
|
||||
},
|
||||
"params": {
|
||||
"cacheID": "a3048b63d657ae43793f9cfca1d0f53d",
|
||||
"id": null,
|
||||
"metadata": {},
|
||||
"name": "OrganizationGraph_ViewQuery",
|
||||
"operationKind": "query",
|
||||
"text": "query OrganizationGraph_ViewQuery(\n $organizationId: ID!\n) {\n node(id: $organizationId) {\n __typename\n ... on Organization {\n id\n name\n ...SettingsPageFragment\n }\n id\n }\n}\n\nfragment DomainSettingsTabFragment on Organization {\n id\n customDomain {\n id\n domain\n sslStatus\n dnsRecords {\n type\n name\n value\n ttl\n purpose\n }\n createdAt\n updatedAt\n sslExpiresAt\n }\n}\n\nfragment SettingsPageFragment on Organization {\n id\n name\n ...DomainSettingsTabFragment\n}\n"
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
(node as any).hash = "196e8c1fc9c2e0b3c76c8b338ed5c7f7";
|
||||
|
||||
export default node;
|
||||
@@ -0,0 +1,106 @@
|
||||
import { useTranslate } from "@probo/i18n";
|
||||
import { Button, Card, IconTrashCan } from "@probo/ui";
|
||||
import { use } from "react";
|
||||
import { PermissionsContext } from "/providers/PermissionsContext";
|
||||
import { useNavigate } from "react-router";
|
||||
import { useMutationWithToasts } from "/hooks/useMutationWithToasts";
|
||||
import { graphql } from "relay-runtime";
|
||||
import { usePreloadedQuery, type PreloadedQuery } from "react-relay";
|
||||
import type { GeneralSettingsPageQuery } from "./__generated__/GeneralSettingsPageQuery.graphql";
|
||||
import { generalSettingsPageQuery } from "./GeneralSettingsPageQuery";
|
||||
import type { GeneralSettingsPage_deleteMutation } from "./__generated__/GeneralSettingsPage_deleteMutation.graphql";
|
||||
import { DeleteOrganizationDialog } from "/components/organizations/DeleteOrganizationDialog";
|
||||
import { OrganizationForm } from "./_components/OrganizationForm";
|
||||
|
||||
const deleteOrganizationMutation = graphql`
|
||||
mutation GeneralSettingsPage_deleteMutation(
|
||||
$input: DeleteOrganizationInput!
|
||||
$connections: [ID!]!
|
||||
) {
|
||||
deleteOrganization(input: $input) {
|
||||
deletedOrganizationId @deleteEdge(connections: $connections)
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export function GeneralSettingsPage(props: {
|
||||
queryRef: PreloadedQuery<GeneralSettingsPageQuery>;
|
||||
}) {
|
||||
const { queryRef } = props;
|
||||
const { __ } = useTranslate();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const { isAuthorized } = use(PermissionsContext);
|
||||
const canDelete = isAuthorized("Organization", "deleteOrganization");
|
||||
|
||||
const { organization } = usePreloadedQuery<GeneralSettingsPageQuery>(
|
||||
generalSettingsPageQuery,
|
||||
queryRef,
|
||||
);
|
||||
if (organization.__typename === "%other") {
|
||||
throw new Error("Relay node is not an organization");
|
||||
}
|
||||
|
||||
const [deleteOrganization, isDeletingOrganization] =
|
||||
useMutationWithToasts<GeneralSettingsPage_deleteMutation>(
|
||||
deleteOrganizationMutation,
|
||||
{
|
||||
successMessage: __("Organization deleted successfully."),
|
||||
errorMessage: __("Failed to delete organization"),
|
||||
},
|
||||
);
|
||||
|
||||
const handleDeleteOrganization = () => {
|
||||
return deleteOrganization({
|
||||
variables: {
|
||||
input: {
|
||||
organizationId: organization.id,
|
||||
},
|
||||
connections: [],
|
||||
},
|
||||
onSuccess: () => {
|
||||
navigate("/", { replace: true });
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<OrganizationForm fKey={organization} />
|
||||
|
||||
{canDelete && (
|
||||
<div className="space-y-4 mt-12">
|
||||
<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">
|
||||
{__("Delete Organization")}
|
||||
</h3>
|
||||
<p className="text-sm text-txt-tertiary">
|
||||
{__("Permanently delete this organization and all its data.")}{" "}
|
||||
<span className="text-red-600 font-medium">
|
||||
{__("This action cannot be undone.")}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<DeleteOrganizationDialog
|
||||
organizationName={organization.name}
|
||||
onConfirm={handleDeleteOrganization}
|
||||
isDeleting={isDeletingOrganization}
|
||||
>
|
||||
<Button
|
||||
variant="danger"
|
||||
icon={IconTrashCan}
|
||||
disabled={isDeletingOrganization}
|
||||
>
|
||||
{__("Delete Organization")}
|
||||
</Button>
|
||||
</DeleteOrganizationDialog>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
import { graphql } from "relay-runtime";
|
||||
import { useOrganizationId } from "/hooks/useOrganizationId";
|
||||
import { useQueryLoader } from "react-relay";
|
||||
import { useEffect } from "react";
|
||||
import { GeneralSettingsPage } from "./GeneralSettingsPage";
|
||||
import type { GeneralSettingsPageQuery } from "./__generated__/GeneralSettingsPageQuery.graphql";
|
||||
import { IAMRelayProvider } from "/providers/IAMRelayProvider";
|
||||
|
||||
export const generalSettingsPageQuery = graphql`
|
||||
query GeneralSettingsPageQuery($organizationId: ID!) {
|
||||
organization: node(id: $organizationId) @required(action: THROW) {
|
||||
__typename
|
||||
... on Organization {
|
||||
id
|
||||
name @required(action: THROW)
|
||||
...OrganizationFormFragment
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
function GeneralSettingsPageQuery() {
|
||||
const organizationId = useOrganizationId();
|
||||
const [queryRef, loadQuery] = useQueryLoader<GeneralSettingsPageQuery>(
|
||||
generalSettingsPageQuery,
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
loadQuery({
|
||||
organizationId,
|
||||
});
|
||||
}, [loadQuery, organizationId]);
|
||||
|
||||
if (!queryRef) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return <GeneralSettingsPage queryRef={queryRef} />;
|
||||
}
|
||||
|
||||
export default function () {
|
||||
return (
|
||||
<IAMRelayProvider>
|
||||
<GeneralSettingsPageQuery />
|
||||
</IAMRelayProvider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
import {
|
||||
IconLock,
|
||||
IconPeopleAdd,
|
||||
IconSettingsGear2,
|
||||
IconStore,
|
||||
PageHeader,
|
||||
TabLink,
|
||||
Tabs,
|
||||
} from "@probo/ui";
|
||||
import { Outlet } from "react-router";
|
||||
import { useOrganizationId } from "/hooks/useOrganizationId";
|
||||
import { useTranslate } from "@probo/i18n";
|
||||
|
||||
export default function SettingsLayout() {
|
||||
const organizationId = useOrganizationId();
|
||||
const { __ } = useTranslate();
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<PageHeader title={__("Settings")} />
|
||||
|
||||
<Tabs>
|
||||
<TabLink to={`/organizations/${organizationId}/settings/general`}>
|
||||
<IconSettingsGear2 size={20} />
|
||||
{__("General")}
|
||||
</TabLink>
|
||||
<TabLink to={`/organizations/${organizationId}/settings/members`}>
|
||||
<IconPeopleAdd size={20} />
|
||||
{__("Members")}
|
||||
</TabLink>
|
||||
<TabLink to={`/organizations/${organizationId}/settings/domain`}>
|
||||
<IconStore size={20} />
|
||||
{__("Domain")}
|
||||
</TabLink>
|
||||
<TabLink to={`/organizations/${organizationId}/settings/saml-sso`}>
|
||||
<IconLock size={20} />
|
||||
{__("SAML SSO")}
|
||||
</TabLink>
|
||||
</Tabs>
|
||||
|
||||
<Outlet />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
198
apps/console/src/pages/iam/organizations/settings/__generated__/GeneralSettingsPageQuery.graphql.ts
generated
Normal file
198
apps/console/src/pages/iam/organizations/settings/__generated__/GeneralSettingsPageQuery.graphql.ts
generated
Normal file
@@ -0,0 +1,198 @@
|
||||
/**
|
||||
* @generated SignedSource<<7b9dd98afd5bdc994e7d2e422dec2cf2>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
|
||||
import { ConcreteRequest } from 'relay-runtime';
|
||||
import { FragmentRefs } from "relay-runtime";
|
||||
export type GeneralSettingsPageQuery$variables = {
|
||||
organizationId: string;
|
||||
};
|
||||
export type GeneralSettingsPageQuery$data = {
|
||||
readonly organization: {
|
||||
readonly __typename: "Organization";
|
||||
readonly id: string;
|
||||
readonly name: string;
|
||||
readonly " $fragmentSpreads": FragmentRefs<"OrganizationFormFragment">;
|
||||
} | {
|
||||
// This will never be '%other', but we need some
|
||||
// value in case none of the concrete values match.
|
||||
readonly __typename: "%other";
|
||||
};
|
||||
};
|
||||
export type GeneralSettingsPageQuery = {
|
||||
response: GeneralSettingsPageQuery$data;
|
||||
variables: GeneralSettingsPageQuery$variables;
|
||||
};
|
||||
|
||||
const node: ConcreteRequest = (function(){
|
||||
var v0 = [
|
||||
{
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "organizationId"
|
||||
}
|
||||
],
|
||||
v1 = [
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "id",
|
||||
"variableName": "organizationId"
|
||||
}
|
||||
],
|
||||
v2 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "__typename",
|
||||
"storageKey": null
|
||||
},
|
||||
v3 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "id",
|
||||
"storageKey": null
|
||||
},
|
||||
v4 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "name",
|
||||
"storageKey": null
|
||||
};
|
||||
return {
|
||||
"fragment": {
|
||||
"argumentDefinitions": (v0/*: any*/),
|
||||
"kind": "Fragment",
|
||||
"metadata": null,
|
||||
"name": "GeneralSettingsPageQuery",
|
||||
"selections": [
|
||||
{
|
||||
"kind": "RequiredField",
|
||||
"field": {
|
||||
"alias": "organization",
|
||||
"args": (v1/*: any*/),
|
||||
"concreteType": null,
|
||||
"kind": "LinkedField",
|
||||
"name": "node",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v2/*: any*/),
|
||||
{
|
||||
"kind": "InlineFragment",
|
||||
"selections": [
|
||||
(v3/*: any*/),
|
||||
{
|
||||
"kind": "RequiredField",
|
||||
"field": (v4/*: any*/),
|
||||
"action": "THROW"
|
||||
},
|
||||
{
|
||||
"args": null,
|
||||
"kind": "FragmentSpread",
|
||||
"name": "OrganizationFormFragment"
|
||||
}
|
||||
],
|
||||
"type": "Organization",
|
||||
"abstractKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
},
|
||||
"action": "THROW"
|
||||
}
|
||||
],
|
||||
"type": "Query",
|
||||
"abstractKey": null
|
||||
},
|
||||
"kind": "Request",
|
||||
"operation": {
|
||||
"argumentDefinitions": (v0/*: any*/),
|
||||
"kind": "Operation",
|
||||
"name": "GeneralSettingsPageQuery",
|
||||
"selections": [
|
||||
{
|
||||
"alias": "organization",
|
||||
"args": (v1/*: any*/),
|
||||
"concreteType": null,
|
||||
"kind": "LinkedField",
|
||||
"name": "node",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v2/*: any*/),
|
||||
(v3/*: any*/),
|
||||
{
|
||||
"kind": "InlineFragment",
|
||||
"selections": [
|
||||
(v4/*: any*/),
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "logoUrl",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "horizontalLogoUrl",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "description",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "websiteUrl",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "email",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "headquarterAddress",
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"type": "Organization",
|
||||
"abstractKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
]
|
||||
},
|
||||
"params": {
|
||||
"cacheID": "11f654f40301ba539b6d78ead3029308",
|
||||
"id": null,
|
||||
"metadata": {},
|
||||
"name": "GeneralSettingsPageQuery",
|
||||
"operationKind": "query",
|
||||
"text": "query GeneralSettingsPageQuery(\n $organizationId: ID!\n) {\n organization: node(id: $organizationId) {\n __typename\n ... on Organization {\n id\n name\n ...OrganizationFormFragment\n }\n id\n }\n}\n\nfragment OrganizationFormFragment on Organization {\n id\n name\n logoUrl\n horizontalLogoUrl\n description\n websiteUrl\n email\n headquarterAddress\n}\n"
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
(node as any).hash = "a83e24379e0772bbaf19bad92d60c6d4";
|
||||
|
||||
export default node;
|
||||
@@ -0,0 +1,132 @@
|
||||
/**
|
||||
* @generated SignedSource<<71619b1be320df410e3ebe2157b11ed4>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
|
||||
import { ConcreteRequest } from 'relay-runtime';
|
||||
export type DeleteOrganizationInput = {
|
||||
organizationId: string;
|
||||
};
|
||||
export type GeneralSettingsPage_deleteMutation$variables = {
|
||||
connections: ReadonlyArray<string>;
|
||||
input: DeleteOrganizationInput;
|
||||
};
|
||||
export type GeneralSettingsPage_deleteMutation$data = {
|
||||
readonly deleteOrganization: {
|
||||
readonly deletedOrganizationId: string;
|
||||
} | null | undefined;
|
||||
};
|
||||
export type GeneralSettingsPage_deleteMutation = {
|
||||
response: GeneralSettingsPage_deleteMutation$data;
|
||||
variables: GeneralSettingsPage_deleteMutation$variables;
|
||||
};
|
||||
|
||||
const node: ConcreteRequest = (function(){
|
||||
var v0 = {
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "connections"
|
||||
},
|
||||
v1 = {
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "input"
|
||||
},
|
||||
v2 = [
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "input",
|
||||
"variableName": "input"
|
||||
}
|
||||
],
|
||||
v3 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "deletedOrganizationId",
|
||||
"storageKey": null
|
||||
};
|
||||
return {
|
||||
"fragment": {
|
||||
"argumentDefinitions": [
|
||||
(v0/*: any*/),
|
||||
(v1/*: any*/)
|
||||
],
|
||||
"kind": "Fragment",
|
||||
"metadata": null,
|
||||
"name": "GeneralSettingsPage_deleteMutation",
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": (v2/*: any*/),
|
||||
"concreteType": "DeleteOrganizationPayload",
|
||||
"kind": "LinkedField",
|
||||
"name": "deleteOrganization",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v3/*: any*/)
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"type": "Mutation",
|
||||
"abstractKey": null
|
||||
},
|
||||
"kind": "Request",
|
||||
"operation": {
|
||||
"argumentDefinitions": [
|
||||
(v1/*: any*/),
|
||||
(v0/*: any*/)
|
||||
],
|
||||
"kind": "Operation",
|
||||
"name": "GeneralSettingsPage_deleteMutation",
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": (v2/*: any*/),
|
||||
"concreteType": "DeleteOrganizationPayload",
|
||||
"kind": "LinkedField",
|
||||
"name": "deleteOrganization",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v3/*: any*/),
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"filters": null,
|
||||
"handle": "deleteEdge",
|
||||
"key": "",
|
||||
"kind": "ScalarHandle",
|
||||
"name": "deletedOrganizationId",
|
||||
"handleArgs": [
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "connections",
|
||||
"variableName": "connections"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
]
|
||||
},
|
||||
"params": {
|
||||
"cacheID": "53d34f4a9fe61e454f0ca80e8f34d88a",
|
||||
"id": null,
|
||||
"metadata": {},
|
||||
"name": "GeneralSettingsPage_deleteMutation",
|
||||
"operationKind": "mutation",
|
||||
"text": "mutation GeneralSettingsPage_deleteMutation(\n $input: DeleteOrganizationInput!\n) {\n deleteOrganization(input: $input) {\n deletedOrganizationId\n }\n}\n"
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
(node as any).hash = "c473475817881aaa4adee8f183faf580";
|
||||
|
||||
export default node;
|
||||
@@ -0,0 +1,373 @@
|
||||
import {
|
||||
Avatar,
|
||||
Button,
|
||||
Card,
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
Field,
|
||||
FileButton,
|
||||
IconTrashCan,
|
||||
Label,
|
||||
Spinner,
|
||||
Textarea,
|
||||
useDialogRef,
|
||||
} from "@probo/ui";
|
||||
import { use, useState, type ChangeEventHandler } from "react";
|
||||
import { PermissionsContext } from "/providers/PermissionsContext";
|
||||
import { useFormWithSchema } from "/hooks/useFormWithSchema";
|
||||
import { useMutationWithToasts } from "/hooks/useMutationWithToasts";
|
||||
import { graphql } from "relay-runtime";
|
||||
import z from "zod";
|
||||
import { useTranslate } from "@probo/i18n";
|
||||
import { useFragment } from "react-relay";
|
||||
import type { OrganizationFormFragment$key } from "./__generated__/OrganizationFormFragment.graphql";
|
||||
|
||||
const fragment = graphql`
|
||||
fragment OrganizationFormFragment on Organization {
|
||||
id
|
||||
name @required(action: THROW)
|
||||
logoUrl
|
||||
horizontalLogoUrl
|
||||
description
|
||||
websiteUrl
|
||||
email
|
||||
headquarterAddress
|
||||
}
|
||||
`;
|
||||
|
||||
const updateOrganizationMutation = graphql`
|
||||
mutation OrganizationForm_updateMutation($input: UpdateOrganizationInput!) {
|
||||
updateOrganization(input: $input) {
|
||||
organization {
|
||||
id
|
||||
name
|
||||
logoUrl
|
||||
horizontalLogoUrl
|
||||
description
|
||||
websiteUrl
|
||||
email
|
||||
headquarterAddress
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const deleteHorizontalLogoMutation = graphql`
|
||||
mutation OrganizationForm_deleteHorizontalLogoMutation(
|
||||
$input: DeleteOrganizationHorizontalLogoInput!
|
||||
) {
|
||||
deleteOrganizationHorizontalLogo(input: $input) {
|
||||
organization {
|
||||
id
|
||||
horizontalLogoUrl
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const organizationSchema = z.object({
|
||||
name: z.string().min(1, "Organization name is required"),
|
||||
description: z.string().optional(),
|
||||
websiteUrl: z.string().optional(),
|
||||
email: z.string().optional(),
|
||||
headquarterAddress: z.string().optional(),
|
||||
});
|
||||
|
||||
type OrganizationFormData = z.infer<typeof organizationSchema>;
|
||||
|
||||
export function OrganizationForm(props: {
|
||||
fKey: OrganizationFormFragment$key;
|
||||
}) {
|
||||
const { fKey } = props;
|
||||
const { __ } = useTranslate();
|
||||
const deleteDialogRef = useDialogRef();
|
||||
|
||||
const { isAuthorized } = use(PermissionsContext);
|
||||
const canUpdate = isAuthorized("Organization", "updateOrganization");
|
||||
|
||||
const [logoPreview, setLogoPreview] = useState<string | null>(null);
|
||||
const [horizontalLogoPreview, setHorizontalLogoPreview] = useState<
|
||||
string | null
|
||||
>(null);
|
||||
|
||||
const organization = useFragment<OrganizationFormFragment$key>(
|
||||
fragment,
|
||||
fKey,
|
||||
);
|
||||
|
||||
const [updateOrganization, isUpdatingOrganization] = useMutationWithToasts(
|
||||
updateOrganizationMutation,
|
||||
{
|
||||
successMessage: __("Organization updated successfully"),
|
||||
errorMessage: __("Failed to update organization"),
|
||||
},
|
||||
);
|
||||
const [deleteHorizontalLogo, isDeletingHorizontalLogo] =
|
||||
useMutationWithToasts(deleteHorizontalLogoMutation, {
|
||||
successMessage: __("Horizontal logo deleted successfully"),
|
||||
errorMessage: __("Failed to delete horizontal logo"),
|
||||
});
|
||||
|
||||
const { formState, handleSubmit, register } = useFormWithSchema(
|
||||
organizationSchema,
|
||||
{
|
||||
defaultValues: {
|
||||
name: organization.name,
|
||||
description: organization.description || "",
|
||||
websiteUrl: organization.websiteUrl || "",
|
||||
email: organization.email || "",
|
||||
headquarterAddress: organization.headquarterAddress || "",
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
const handleLogoChange: ChangeEventHandler<HTMLInputElement> = (e) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
setLogoPreview(reader.result as string);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
|
||||
updateOrganization({
|
||||
variables: {
|
||||
input: {
|
||||
organizationId: organization.id,
|
||||
logoFile: null,
|
||||
},
|
||||
},
|
||||
uploadables: {
|
||||
"input.logoFile": file,
|
||||
},
|
||||
onCompleted: () => {
|
||||
setLogoPreview(null);
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const handleHorizontalLogoChange: ChangeEventHandler<HTMLInputElement> = (
|
||||
e,
|
||||
) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
setHorizontalLogoPreview(reader.result as string);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
|
||||
updateOrganization({
|
||||
variables: {
|
||||
input: {
|
||||
organizationId: organization.id,
|
||||
horizontalLogoFile: null,
|
||||
},
|
||||
},
|
||||
uploadables: {
|
||||
"input.horizontalLogoFile": file,
|
||||
},
|
||||
onCompleted: () => {
|
||||
setHorizontalLogoPreview(null);
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const handleDeleteHorizontalLogo = () => {
|
||||
deleteHorizontalLogo({
|
||||
variables: {
|
||||
input: {
|
||||
organizationId: organization.id,
|
||||
},
|
||||
},
|
||||
onCompleted: () => {
|
||||
deleteDialogRef.current?.close();
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const onSubmit = handleSubmit((data: OrganizationFormData) => {
|
||||
updateOrganization({
|
||||
variables: {
|
||||
input: {
|
||||
organizationId: organization.id,
|
||||
name: data.name,
|
||||
description: data.description || null,
|
||||
websiteUrl: data.websiteUrl || null,
|
||||
email: data.email || null,
|
||||
headquarterAddress: data.headquarterAddress || null,
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
return (
|
||||
<form onSubmit={onSubmit} className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-base font-medium">{__("Organization details")}</h2>
|
||||
{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={logoPreview || organization.logoUrl}
|
||||
name={organization.name}
|
||||
size="xl"
|
||||
/>
|
||||
{canUpdate && (
|
||||
<FileButton
|
||||
disabled={formState.isSubmitting || isUpdatingOrganization}
|
||||
onChange={handleLogoChange}
|
||||
variant="secondary"
|
||||
className="ml-auto"
|
||||
accept="image/png,image/jpeg,image/jpg,image/svg+xml"
|
||||
>
|
||||
{isUpdatingOrganization
|
||||
? __("Uploading...")
|
||||
: __("Change logo")}
|
||||
</FileButton>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Label>{__("Horizontal logo")}</Label>
|
||||
<p className="text-sm text-txt-tertiary mb-2">
|
||||
{__(
|
||||
"Upload a horizontal version of your logo for use in documents",
|
||||
)}
|
||||
</p>
|
||||
<div className="flex items-center gap-4">
|
||||
{(horizontalLogoPreview || organization.horizontalLogoUrl) && (
|
||||
<div className="border border-border-solid rounded-md p-4 bg-surface-secondary">
|
||||
<img
|
||||
src={
|
||||
horizontalLogoPreview ||
|
||||
organization.horizontalLogoUrl ||
|
||||
undefined
|
||||
}
|
||||
alt={__("Horizontal logo")}
|
||||
className="h-12 max-w-xs object-contain"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{canUpdate && (
|
||||
<FileButton
|
||||
disabled={formState.isSubmitting || isUpdatingOrganization}
|
||||
onChange={handleHorizontalLogoChange}
|
||||
variant="secondary"
|
||||
accept="image/png,image/jpeg,image/jpg,image/svg+xml"
|
||||
>
|
||||
{isUpdatingOrganization
|
||||
? __("Uploading...")
|
||||
: horizontalLogoPreview || organization.horizontalLogoUrl
|
||||
? __("Change horizontal logo")
|
||||
: __("Upload horizontal logo")}
|
||||
</FileButton>
|
||||
)}
|
||||
{canUpdate && organization.horizontalLogoUrl && (
|
||||
<Dialog
|
||||
ref={deleteDialogRef}
|
||||
trigger={
|
||||
<Button
|
||||
type="button"
|
||||
variant="quaternary"
|
||||
icon={IconTrashCan}
|
||||
aria-label={__("Delete horizontal logo")}
|
||||
className="text-red-600 hover:text-red-700"
|
||||
/>
|
||||
}
|
||||
title={__("Delete Horizontal Logo")}
|
||||
className="max-w-md"
|
||||
>
|
||||
<DialogContent padded>
|
||||
<p className="text-txt-secondary">
|
||||
{__("Are you sure you want to delete the horizontal logo?")}
|
||||
</p>
|
||||
<p className="text-txt-secondary mt-2">
|
||||
{__("This action cannot be undone.")}
|
||||
</p>
|
||||
</DialogContent>
|
||||
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="danger"
|
||||
onClick={handleDeleteHorizontalLogo}
|
||||
disabled={isDeletingHorizontalLogo}
|
||||
icon={isDeletingHorizontalLogo ? Spinner : IconTrashCan}
|
||||
>
|
||||
{isDeletingHorizontalLogo
|
||||
? __("Deleting...")
|
||||
: __("Delete")}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</Dialog>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<Field
|
||||
{...register("name")}
|
||||
readOnly={formState.isSubmitting || !canUpdate}
|
||||
name="name"
|
||||
type="text"
|
||||
label={__("Organization name")}
|
||||
placeholder={__("Organization name")}
|
||||
/>
|
||||
<div>
|
||||
<Label>{__("Description")}</Label>
|
||||
<Textarea
|
||||
{...register("description")}
|
||||
readOnly={formState.isSubmitting || !canUpdate}
|
||||
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 || !canUpdate}
|
||||
name="websiteUrl"
|
||||
type="url"
|
||||
label={__("Website URL")}
|
||||
placeholder={__("https://example.com")}
|
||||
/>
|
||||
<Field
|
||||
{...register("email")}
|
||||
readOnly={formState.isSubmitting || !canUpdate}
|
||||
name="email"
|
||||
type="email"
|
||||
label={__("Email")}
|
||||
placeholder={__("contact@example.com")}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label>{__("Headquarter Address")}</Label>
|
||||
<Textarea
|
||||
{...register("headquarterAddress")}
|
||||
readOnly={formState.isSubmitting || !canUpdate}
|
||||
name="headquarterAddress"
|
||||
placeholder={__("123 Main St, City, Country")}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{formState.isDirty && canUpdate && (
|
||||
<div className="flex justify-end pt-6">
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={formState.isSubmitting || isUpdatingOrganization}
|
||||
>
|
||||
{formState.isSubmitting || isUpdatingOrganization
|
||||
? __("Updating...")
|
||||
: __("Update Organization")}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
/**
|
||||
* @generated SignedSource<<8deb33fbc8305caa3d3de954cf555c79>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
|
||||
import { ReaderFragment } from 'relay-runtime';
|
||||
import { FragmentRefs } from "relay-runtime";
|
||||
export type OrganizationFormFragment$data = {
|
||||
readonly description: string | null | undefined;
|
||||
readonly email: string | null | undefined;
|
||||
readonly headquarterAddress: string | null | undefined;
|
||||
readonly horizontalLogoUrl: string | null | undefined;
|
||||
readonly id: string;
|
||||
readonly logoUrl: string | null | undefined;
|
||||
readonly name: string;
|
||||
readonly websiteUrl: string | null | undefined;
|
||||
readonly " $fragmentType": "OrganizationFormFragment";
|
||||
};
|
||||
export type OrganizationFormFragment$key = {
|
||||
readonly " $data"?: OrganizationFormFragment$data;
|
||||
readonly " $fragmentSpreads": FragmentRefs<"OrganizationFormFragment">;
|
||||
};
|
||||
|
||||
const node: ReaderFragment = {
|
||||
"argumentDefinitions": [],
|
||||
"kind": "Fragment",
|
||||
"metadata": null,
|
||||
"name": "OrganizationFormFragment",
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "id",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"kind": "RequiredField",
|
||||
"field": {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "name",
|
||||
"storageKey": null
|
||||
},
|
||||
"action": "THROW"
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "logoUrl",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "horizontalLogoUrl",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "description",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "websiteUrl",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "email",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "headquarterAddress",
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"type": "Organization",
|
||||
"abstractKey": null
|
||||
};
|
||||
|
||||
(node as any).hash = "0894093a550e5ba033a33b255b1bf2c7";
|
||||
|
||||
export default node;
|
||||
@@ -0,0 +1,113 @@
|
||||
/**
|
||||
* @generated SignedSource<<ea00a00b77edf3939a310de2b0f7b8e0>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
|
||||
import { ConcreteRequest } from 'relay-runtime';
|
||||
export type DeleteOrganizationHorizontalLogoInput = {
|
||||
organizationId: string;
|
||||
};
|
||||
export type OrganizationForm_deleteHorizontalLogoMutation$variables = {
|
||||
input: DeleteOrganizationHorizontalLogoInput;
|
||||
};
|
||||
export type OrganizationForm_deleteHorizontalLogoMutation$data = {
|
||||
readonly deleteOrganizationHorizontalLogo: {
|
||||
readonly organization: {
|
||||
readonly horizontalLogoUrl: string | null | undefined;
|
||||
readonly id: string;
|
||||
};
|
||||
} | null | undefined;
|
||||
};
|
||||
export type OrganizationForm_deleteHorizontalLogoMutation = {
|
||||
response: OrganizationForm_deleteHorizontalLogoMutation$data;
|
||||
variables: OrganizationForm_deleteHorizontalLogoMutation$variables;
|
||||
};
|
||||
|
||||
const node: ConcreteRequest = (function(){
|
||||
var v0 = [
|
||||
{
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "input"
|
||||
}
|
||||
],
|
||||
v1 = [
|
||||
{
|
||||
"alias": null,
|
||||
"args": [
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "input",
|
||||
"variableName": "input"
|
||||
}
|
||||
],
|
||||
"concreteType": "DeleteOrganizationHorizontalLogoPayload",
|
||||
"kind": "LinkedField",
|
||||
"name": "deleteOrganizationHorizontalLogo",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "Organization",
|
||||
"kind": "LinkedField",
|
||||
"name": "organization",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "id",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "horizontalLogoUrl",
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
];
|
||||
return {
|
||||
"fragment": {
|
||||
"argumentDefinitions": (v0/*: any*/),
|
||||
"kind": "Fragment",
|
||||
"metadata": null,
|
||||
"name": "OrganizationForm_deleteHorizontalLogoMutation",
|
||||
"selections": (v1/*: any*/),
|
||||
"type": "Mutation",
|
||||
"abstractKey": null
|
||||
},
|
||||
"kind": "Request",
|
||||
"operation": {
|
||||
"argumentDefinitions": (v0/*: any*/),
|
||||
"kind": "Operation",
|
||||
"name": "OrganizationForm_deleteHorizontalLogoMutation",
|
||||
"selections": (v1/*: any*/)
|
||||
},
|
||||
"params": {
|
||||
"cacheID": "2ec98faaaf8317f642f5db54c7bbed80",
|
||||
"id": null,
|
||||
"metadata": {},
|
||||
"name": "OrganizationForm_deleteHorizontalLogoMutation",
|
||||
"operationKind": "mutation",
|
||||
"text": "mutation OrganizationForm_deleteHorizontalLogoMutation(\n $input: DeleteOrganizationHorizontalLogoInput!\n) {\n deleteOrganizationHorizontalLogo(input: $input) {\n organization {\n id\n horizontalLogoUrl\n }\n }\n}\n"
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
(node as any).hash = "9ea67e345e506fef9d85ee31bc360d51";
|
||||
|
||||
export default node;
|
||||
@@ -0,0 +1,168 @@
|
||||
/**
|
||||
* @generated SignedSource<<9602c1a0ad55d4889431c8e5f54f4461>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
|
||||
import { ConcreteRequest } from 'relay-runtime';
|
||||
export type UpdateOrganizationInput = {
|
||||
description?: string | null | undefined;
|
||||
email?: string | null | undefined;
|
||||
headquarterAddress?: string | null | undefined;
|
||||
horizontalLogoFile?: any | null | undefined;
|
||||
logoFile?: any | null | undefined;
|
||||
name?: string | null | undefined;
|
||||
organizationId: string;
|
||||
websiteUrl?: string | null | undefined;
|
||||
};
|
||||
export type OrganizationForm_updateMutation$variables = {
|
||||
input: UpdateOrganizationInput;
|
||||
};
|
||||
export type OrganizationForm_updateMutation$data = {
|
||||
readonly updateOrganization: {
|
||||
readonly organization: {
|
||||
readonly description: string | null | undefined;
|
||||
readonly email: string | null | undefined;
|
||||
readonly headquarterAddress: string | null | undefined;
|
||||
readonly horizontalLogoUrl: string | null | undefined;
|
||||
readonly id: string;
|
||||
readonly logoUrl: string | null | undefined;
|
||||
readonly name: string;
|
||||
readonly websiteUrl: string | null | undefined;
|
||||
} | null | undefined;
|
||||
} | null | undefined;
|
||||
};
|
||||
export type OrganizationForm_updateMutation = {
|
||||
response: OrganizationForm_updateMutation$data;
|
||||
variables: OrganizationForm_updateMutation$variables;
|
||||
};
|
||||
|
||||
const node: ConcreteRequest = (function(){
|
||||
var v0 = [
|
||||
{
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "input"
|
||||
}
|
||||
],
|
||||
v1 = [
|
||||
{
|
||||
"alias": null,
|
||||
"args": [
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "input",
|
||||
"variableName": "input"
|
||||
}
|
||||
],
|
||||
"concreteType": "UpdateOrganizationPayload",
|
||||
"kind": "LinkedField",
|
||||
"name": "updateOrganization",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "Organization",
|
||||
"kind": "LinkedField",
|
||||
"name": "organization",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "id",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "name",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "logoUrl",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "horizontalLogoUrl",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "description",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "websiteUrl",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "email",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "headquarterAddress",
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
];
|
||||
return {
|
||||
"fragment": {
|
||||
"argumentDefinitions": (v0/*: any*/),
|
||||
"kind": "Fragment",
|
||||
"metadata": null,
|
||||
"name": "OrganizationForm_updateMutation",
|
||||
"selections": (v1/*: any*/),
|
||||
"type": "Mutation",
|
||||
"abstractKey": null
|
||||
},
|
||||
"kind": "Request",
|
||||
"operation": {
|
||||
"argumentDefinitions": (v0/*: any*/),
|
||||
"kind": "Operation",
|
||||
"name": "OrganizationForm_updateMutation",
|
||||
"selections": (v1/*: any*/)
|
||||
},
|
||||
"params": {
|
||||
"cacheID": "f2a249d13ff38645cb858b494c05c59d",
|
||||
"id": null,
|
||||
"metadata": {},
|
||||
"name": "OrganizationForm_updateMutation",
|
||||
"operationKind": "mutation",
|
||||
"text": "mutation OrganizationForm_updateMutation(\n $input: UpdateOrganizationInput!\n) {\n updateOrganization(input: $input) {\n organization {\n id\n name\n logoUrl\n horizontalLogoUrl\n description\n websiteUrl\n email\n headquarterAddress\n }\n }\n}\n"
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
(node as any).hash = "c4dd7a42f611fa210594017a5a63d159";
|
||||
|
||||
export default node;
|
||||
@@ -1,75 +0,0 @@
|
||||
import { Outlet } from "react-router";
|
||||
import { useTranslate } from "@probo/i18n";
|
||||
import type { PreloadedQuery } from "react-relay";
|
||||
import type { OrganizationGraph_ViewQuery } from "/hooks/graph/__generated__/OrganizationGraph_ViewQuery.graphql";
|
||||
import { usePreloadedQuery } from "react-relay";
|
||||
import { organizationViewQuery } from "/hooks/graph/OrganizationGraph";
|
||||
import {
|
||||
IconSettingsGear2,
|
||||
IconPeopleAdd,
|
||||
IconStore,
|
||||
IconLock,
|
||||
PageHeader,
|
||||
TabLink,
|
||||
Tabs,
|
||||
} from "@probo/ui";
|
||||
import { useOrganizationId } from "/hooks/useOrganizationId";
|
||||
import { graphql } from "relay-runtime";
|
||||
import type { SettingsPageFragment$key } from "./__generated__/SettingsPageFragment.graphql";
|
||||
import { useFragment } from "react-relay";
|
||||
|
||||
const organizationFragment = graphql`
|
||||
fragment SettingsPageFragment on Organization {
|
||||
id
|
||||
name
|
||||
# ...GeneralSettingsTabFragment
|
||||
# ...MembersSettingsTabMembershipsFragment
|
||||
# ...MembersSettingsTabInvitationsFragment
|
||||
...DomainSettingsTabFragment
|
||||
# ...SAMLSettingsTabFragment
|
||||
}
|
||||
`;
|
||||
|
||||
type Props = {
|
||||
queryRef: PreloadedQuery<OrganizationGraph_ViewQuery>;
|
||||
};
|
||||
|
||||
export default function SettingsPage({ queryRef }: Props) {
|
||||
const { __ } = useTranslate();
|
||||
const organizationId = useOrganizationId();
|
||||
const organizationKey = usePreloadedQuery(
|
||||
organizationViewQuery,
|
||||
queryRef
|
||||
).node;
|
||||
const organization = useFragment<SettingsPageFragment$key>(
|
||||
organizationFragment,
|
||||
organizationKey
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<PageHeader title={__("Settings")} />
|
||||
|
||||
<Tabs>
|
||||
<TabLink to={`/organizations/${organizationId}/settings/general`}>
|
||||
<IconSettingsGear2 size={20} />
|
||||
{__("General")}
|
||||
</TabLink>
|
||||
<TabLink to={`/organizations/${organizationId}/settings/members`}>
|
||||
<IconPeopleAdd size={20} />
|
||||
{__("Members")}
|
||||
</TabLink>
|
||||
<TabLink to={`/organizations/${organizationId}/settings/domain`}>
|
||||
<IconStore size={20} />
|
||||
{__("Domain")}
|
||||
</TabLink>
|
||||
<TabLink to={`/organizations/${organizationId}/settings/saml-sso`}>
|
||||
<IconLock size={20} />
|
||||
{__("SAML SSO")}
|
||||
</TabLink>
|
||||
</Tabs>
|
||||
|
||||
<Outlet context={{ organization }} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,56 +0,0 @@
|
||||
/**
|
||||
* @generated SignedSource<<1b79ba90084eae4139b4fd4a31e5061b>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
|
||||
import { ReaderFragment } from 'relay-runtime';
|
||||
import { FragmentRefs } from "relay-runtime";
|
||||
export type SettingsPageFragment$data = {
|
||||
readonly id: string;
|
||||
readonly name: string;
|
||||
readonly " $fragmentSpreads": FragmentRefs<"DomainSettingsTabFragment">;
|
||||
readonly " $fragmentType": "SettingsPageFragment";
|
||||
};
|
||||
export type SettingsPageFragment$key = {
|
||||
readonly " $data"?: SettingsPageFragment$data;
|
||||
readonly " $fragmentSpreads": FragmentRefs<"SettingsPageFragment">;
|
||||
};
|
||||
|
||||
const node: ReaderFragment = {
|
||||
"argumentDefinitions": [],
|
||||
"kind": "Fragment",
|
||||
"metadata": null,
|
||||
"name": "SettingsPageFragment",
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "id",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "name",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"args": null,
|
||||
"kind": "FragmentSpread",
|
||||
"name": "DomainSettingsTabFragment"
|
||||
}
|
||||
],
|
||||
"type": "Organization",
|
||||
"abstractKey": null
|
||||
};
|
||||
|
||||
(node as any).hash = "c00c2edf8bd9f8255c6bd6943bd4d445";
|
||||
|
||||
export default node;
|
||||
@@ -12,7 +12,6 @@ import { riskRoutes } from "./routes/riskRoutes.ts";
|
||||
import { measureRoutes } from "./routes/measureRoutes.ts";
|
||||
import { documentsRoutes } from "./routes/documentsRoutes.ts";
|
||||
import { vendorRoutes } from "./routes/vendorRoutes.ts";
|
||||
import { organizationViewQuery } from "./hooks/graph/OrganizationGraph.ts";
|
||||
import { peopleRoutes } from "./routes/peopleRoutes.ts";
|
||||
import { frameworkRoutes } from "./routes/frameworkRoutes.ts";
|
||||
import { PageError } from "./components/PageError.tsx";
|
||||
@@ -209,27 +208,23 @@ const routes = [
|
||||
{
|
||||
path: "settings",
|
||||
Fallback: PageSkeleton,
|
||||
loader: loaderFromQueryLoader(({ organizationId }) =>
|
||||
loadQuery(coreEnvironment, organizationViewQuery, {
|
||||
organizationId: organizationId!,
|
||||
}),
|
||||
),
|
||||
Component: withQueryRef(
|
||||
lazy(() => import("./pages/organizations/SettingsPage")),
|
||||
Component: lazy(
|
||||
() => import("./pages/iam/organizations/settings/SettingsLayout.tsx"),
|
||||
),
|
||||
children: [
|
||||
{
|
||||
path: "",
|
||||
index: true,
|
||||
loader: () => {
|
||||
throw redirect("general");
|
||||
},
|
||||
},
|
||||
// {
|
||||
// path: "general",
|
||||
// Component: lazy(
|
||||
// () => import("./pages/organizations/settings/GeneralSettingsTab")
|
||||
// ),
|
||||
// },
|
||||
{
|
||||
path: "general",
|
||||
Component: lazy(
|
||||
() =>
|
||||
import("./pages/iam/organizations/settings/GeneralSettingsPageQuery.tsx"),
|
||||
),
|
||||
},
|
||||
// {
|
||||
// path: "members",
|
||||
// Component: lazy(
|
||||
|
||||
Reference in New Issue
Block a user