diff --git a/frontend/web/package.json b/frontend/web/package.json index cc74ba4..65aa6f9 100644 --- a/frontend/web/package.json +++ b/frontend/web/package.json @@ -28,6 +28,7 @@ "react-router-dom": "^6.24.1", "react-use": "^17.5.1", "tailwindcss": "^3.4.3", + "uuid": "^10.0.0", "zustand": "^4.5.4" }, "devDependencies": { @@ -36,6 +37,7 @@ "@types/lodash-es": "^4.17.12", "@types/react": "^18.2.79", "@types/react-dom": "^18.2.25", + "@types/uuid": "^10.0.0", "@typescript-eslint/eslint-plugin": "^7.16.1", "@typescript-eslint/parser": "^7.16.0", "@vitejs/plugin-react-swc": "^3.6.0", diff --git a/frontend/web/pnpm-lock.yaml b/frontend/web/pnpm-lock.yaml index 9c81607..e29dc8c 100644 --- a/frontend/web/pnpm-lock.yaml +++ b/frontend/web/pnpm-lock.yaml @@ -68,6 +68,9 @@ importers: tailwindcss: specifier: ^3.4.3 version: 3.4.4 + uuid: + specifier: ^10.0.0 + version: 10.0.0 zustand: specifier: ^4.5.4 version: 4.5.4(@types/react@18.3.3)(immer@10.1.1)(react@18.3.1) @@ -87,6 +90,9 @@ importers: '@types/react-dom': specifier: ^18.2.25 version: 18.3.0 + '@types/uuid': + specifier: ^10.0.0 + version: 10.0.0 '@typescript-eslint/eslint-plugin': specifier: ^7.16.1 version: 7.16.1(@typescript-eslint/parser@7.16.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0)(typescript@5.5.4) @@ -893,6 +899,9 @@ packages: '@types/react@18.3.3': resolution: {integrity: sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==} + '@types/uuid@10.0.0': + resolution: {integrity: sha512-7gqG38EyHgyP1S+7+xomFtL+ZNHcKv6DwNaCZmJmo1vgMugyF3TCnXVg4t1uk89mLNwnLtnY3TpOpCOyp1/xHQ==} + '@typescript-eslint/eslint-plugin@7.16.1': resolution: {integrity: sha512-SxdPak/5bO0EnGktV05+Hq8oatjAYVY3Zh2bye9pGZy6+jwyR3LG3YKkV4YatlsgqXP28BTeVm9pqwJM96vf2A==} engines: {node: ^18.18.0 || >=20.0.0} @@ -2381,6 +2390,10 @@ packages: util-deprecate@1.0.2: resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} + uuid@10.0.0: + resolution: {integrity: sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==} + hasBin: true + vite@5.3.4: resolution: {integrity: sha512-Cw+7zL3ZG9/NZBB8C+8QbQZmR54GwqIz+WMI4b3JgdYJvX+ny9AjJXqkGQlDXSXRP9rP0B4tbciRMOVEKulVOA==} engines: {node: ^18.0.0 || >=20.0.0} @@ -3184,6 +3197,8 @@ snapshots: '@types/prop-types': 15.7.12 csstype: 3.1.2 + '@types/uuid@10.0.0': {} + '@typescript-eslint/eslint-plugin@7.16.1(@typescript-eslint/parser@7.16.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0)(typescript@5.5.4)': dependencies: '@eslint-community/regexpp': 4.10.1 @@ -4916,6 +4931,8 @@ snapshots: util-deprecate@1.0.2: {} + uuid@10.0.0: {} + vite@5.3.4(@types/node@20.14.2): dependencies: esbuild: 0.21.5 diff --git a/frontend/web/src/components/CreateIdentityProviderDrawer.tsx b/frontend/web/src/components/CreateIdentityProviderDrawer.tsx index a53304f..4adf570 100644 --- a/frontend/web/src/components/CreateIdentityProviderDrawer.tsx +++ b/frontend/web/src/components/CreateIdentityProviderDrawer.tsx @@ -3,6 +3,7 @@ import { isUndefined } from "lodash-es"; import { useState } from "react"; import { toast } from "react-hot-toast"; import { useTranslation } from "react-i18next"; +import { v4 as uuidv4 } from "uuid"; import { workspaceServiceClient } from "@/grpcweb"; import { absolutifyLink } from "@/helpers/utils"; import useLoading from "@/hooks/useLoading"; @@ -26,6 +27,7 @@ const CreateIdentityProviderDrawer: React.FC = (props: Props) => { const [state, setState] = useState({ identityProviderCreate: IdentityProvider.fromPartial( identityProvider || { + id: uuidv4(), type: IdentityProvider_Type.OAUTH2, config: { oauth2: IdentityProviderConfig_OAuth2Config.fromPartial({ @@ -46,14 +48,6 @@ const CreateIdentityProviderDrawer: React.FC = (props: Props) => { }); }; - const handleNameInputChange = (e: React.ChangeEvent) => { - setPartialState({ - identityProviderCreate: Object.assign(state.identityProviderCreate, { - name: e.target.value, - }), - }); - }; - const handleTitleInputChange = (e: React.ChangeEvent) => { setPartialState({ identityProviderCreate: Object.assign(state.identityProviderCreate, { @@ -102,7 +96,7 @@ const CreateIdentityProviderDrawer: React.FC = (props: Props) => { }; const onSave = async () => { - if (!state.identityProviderCreate.name || !state.identityProviderCreate.title) { + if (!state.identityProviderCreate.id || !state.identityProviderCreate.title) { toast.error("Please fill in required fields."); return; } @@ -112,7 +106,7 @@ const CreateIdentityProviderDrawer: React.FC = (props: Props) => { await workspaceServiceClient.updateWorkspaceSetting({ setting: { identityProviders: workspaceStore.setting.identityProviders.map((idp) => - idp.name === state.identityProviderCreate.name ? state.identityProviderCreate : idp, + idp.id === state.identityProviderCreate.id ? state.identityProviderCreate : idp, ), }, updateMask: ["identity_providers"], @@ -143,18 +137,6 @@ const CreateIdentityProviderDrawer: React.FC = (props: Props) => {
-
- - Name * - - -
Title * @@ -169,8 +151,13 @@ const CreateIdentityProviderDrawer: React.FC = (props: Props) => { />
+ {isCreating && ( -

Redirect URL: {absolutifyLink("/auth/callback")}

+

+ Redirect URL +
+ {absolutifyLink("/auth/callback")} +

)}
diff --git a/frontend/web/src/components/setting/SSOSection.tsx b/frontend/web/src/components/setting/SSOSection.tsx index 9e3b249..cafcabc 100644 --- a/frontend/web/src/components/setting/SSOSection.tsx +++ b/frontend/web/src/components/setting/SSOSection.tsx @@ -38,7 +38,7 @@ const SSOSection = () => { try { await workspaceServiceClient.updateWorkspaceSetting({ setting: { - identityProviders: identityProviderList.filter((idp) => idp.name !== identityProvider.name), + identityProviders: identityProviderList.filter((idp) => idp.id !== identityProvider.id), }, updateMask: ["identity_providers"], }); @@ -92,10 +92,8 @@ const SSOSection = () => { {identityProviderList.map((identityProvider) => ( - - - {identityProvider.name} - + + {identityProvider.id} {identityProvider.title}