From b7a04c38b12c364cf26e0fc2530948d2ecf7d50f Mon Sep 17 00:00:00 2001 From: Joseph Garrone Date: Fri, 20 Sep 2024 01:44:47 +0200 Subject: [PATCH] Complete S3 project settings migration --- .../core/usecases/s3ConfigCreation/state.ts | 8 +- .../core/usecases/s3ConfigCreation/thunks.ts | 41 ++++- .../decoupledLogic/getS3Configs.ts | 4 +- .../core/usecases/s3ConfigManagement/index.ts | 1 + web/src/ui/i18n/resources/de.tsx | 6 +- web/src/ui/i18n/resources/en.tsx | 6 +- web/src/ui/i18n/resources/es.tsx | 6 +- web/src/ui/i18n/resources/fi.tsx | 6 +- web/src/ui/i18n/resources/fr.tsx | 6 +- web/src/ui/i18n/resources/it.tsx | 6 +- web/src/ui/i18n/resources/nl.tsx | 6 +- web/src/ui/i18n/resources/no.tsx | 6 +- web/src/ui/i18n/resources/zh-CN.tsx | 6 +- .../ProjectSettingsS3ConfigTab.tsx | 89 +++-------- .../S3ConfigCard.stories.tsx | 55 ------- .../S3ConfigCard.tsx | 150 ++++++++---------- .../AddCustomS3ConfigDialog.tsx | 50 +++--- .../TestS3ConnectionButton.stories.tsx | 18 +-- .../TestS3ConnectionButton.tsx | 22 +-- 19 files changed, 207 insertions(+), 285 deletions(-) delete mode 100644 web/src/ui/pages/projectSettings/ProjectSettingsS3ConfigTab/S3ConfigCard.stories.tsx diff --git a/web/src/core/usecases/s3ConfigCreation/state.ts b/web/src/core/usecases/s3ConfigCreation/state.ts index 5c930477c..d0a0c6700 100644 --- a/web/src/core/usecases/s3ConfigCreation/state.ts +++ b/web/src/core/usecases/s3ConfigCreation/state.ts @@ -55,25 +55,25 @@ export const { reducer, actions } = createUsecaseActions({ payload }: { payload: { - s3ConfigId: string | undefined; + s3ConfigIdToEdit: string | undefined; initialFormValues: State.Ready["formValues"]; }; } ) => { - const { s3ConfigId, initialFormValues } = payload; + const { s3ConfigIdToEdit, initialFormValues } = payload; return id({ "stateDescription": "ready", "formValues": initialFormValues, "action": - s3ConfigId === undefined + s3ConfigIdToEdit === undefined ? { "type": "create new config", "creationTime": Date.now() } : { "type": "update existing config", - s3ConfigId + "s3ConfigId": s3ConfigIdToEdit } }); }, diff --git a/web/src/core/usecases/s3ConfigCreation/thunks.ts b/web/src/core/usecases/s3ConfigCreation/thunks.ts index ec5594e7d..1245c7ab9 100644 --- a/web/src/core/usecases/s3ConfigCreation/thunks.ts +++ b/web/src/core/usecases/s3ConfigCreation/thunks.ts @@ -7,30 +7,33 @@ import * as deploymentRegionManagement from "core/usecases/deploymentRegionManag import { getWorkingDirectoryPath } from "core/usecases/s3ConfigManagement/decoupledLogic/getWorkingDirectoryPath"; import * as projectManagement from "core/usecases/projectManagement"; import * as userAuthentication from "core/usecases/userAuthentication"; +import * as s3ConfigConnectionTest from "core/usecases/s3ConfigConnectionTest"; export const thunks = { "initialize": - (params: { s3ConfigId: string | undefined }) => + (params: { s3ConfigIdToEdit: string | undefined }) => async (...args) => { - const { s3ConfigId } = params; + const { s3ConfigIdToEdit } = params; const [dispatch, getState] = args; const s3Configs = s3ConfigManagement.selectors.s3Configs(getState()); update_existing_config: { - if (s3ConfigId === undefined) { + if (s3ConfigIdToEdit === undefined) { break update_existing_config; } - const s3Config = s3Configs.find(s3Config => s3Config.id === s3ConfigId); + const s3Config = s3Configs.find( + s3Config => s3Config.id === s3ConfigIdToEdit + ); assert(s3Config !== undefined); assert(s3Config.origin === "project"); dispatch( actions.initialized({ - s3ConfigId, + s3ConfigIdToEdit, "initialFormValues": { "friendlyName": s3Config.friendlyName, "url": s3Config.paramsOfCreateS3Client.url, @@ -77,7 +80,7 @@ export const thunks = { if (s3ConfigCreationFormDefaults === undefined) { dispatch( actions.initialized({ - "s3ConfigId": undefined, + "s3ConfigIdToEdit": undefined, "initialFormValues": { "friendlyName": "", "url": "", @@ -121,7 +124,7 @@ export const thunks = { dispatch( actions.initialized({ - "s3ConfigId": undefined, + "s3ConfigIdToEdit": undefined, "initialFormValues": { "friendlyName": "", "url": s3ConfigCreationFormDefaults.url, @@ -204,5 +207,29 @@ export const thunks = { break preset_pathStyleAccess; } } + }, + "testConnection": + () => + async (...args) => { + const [dispatch, getState] = args; + + const projectS3Config = + privateSelectors.submittableFormValuesAsProjectS3Config(getState()); + + assert(projectS3Config !== null); + assert(projectS3Config !== undefined); + + await dispatch( + s3ConfigConnectionTest.protectedThunks.testS3Connection({ + "paramsOfCreateS3Client": { + "isStsEnabled": false, + "url": projectS3Config.url, + "pathStyleAccess": projectS3Config.pathStyleAccess, + "region": projectS3Config.region, + "credentials": projectS3Config.credentials + }, + "workingDirectoryPath": projectS3Config.workingDirectoryPath + }) + ); } } satisfies Thunks; diff --git a/web/src/core/usecases/s3ConfigManagement/decoupledLogic/getS3Configs.ts b/web/src/core/usecases/s3ConfigManagement/decoupledLogic/getS3Configs.ts index 7583364f5..4ee521ff4 100644 --- a/web/src/core/usecases/s3ConfigManagement/decoupledLogic/getS3Configs.ts +++ b/web/src/core/usecases/s3ConfigManagement/decoupledLogic/getS3Configs.ts @@ -133,9 +133,9 @@ export function getS3Configs(params: { const paramsOfCreateS3Client: ParamsOfCreateS3Client.NoSts = { url, pathStyleAccess, - isStsEnabled: false, + "isStsEnabled": false, region, - credentials: c.credentials + "credentials": c.credentials }; return { diff --git a/web/src/core/usecases/s3ConfigManagement/index.ts b/web/src/core/usecases/s3ConfigManagement/index.ts index 3f3843384..479cc3f02 100644 --- a/web/src/core/usecases/s3ConfigManagement/index.ts +++ b/web/src/core/usecases/s3ConfigManagement/index.ts @@ -1,3 +1,4 @@ export * from "./state"; export * from "./selectors"; export * from "./thunks"; +export type { S3Config } from "./decoupledLogic/getS3Configs"; diff --git a/web/src/ui/i18n/resources/de.tsx b/web/src/ui/i18n/resources/de.tsx index f68a249e7..0e2f6c8c6 100644 --- a/web/src/ui/i18n/resources/de.tsx +++ b/web/src/ui/i18n/resources/de.tsx @@ -203,9 +203,9 @@ export const translations: Translations<"de"> = { ), "account credentials": "Kontozugangsdaten", - "accountFriendlyName textField label": "Benutzerfreundlicher Kontoname", - "accountFriendlyName textField helper text": - "Dient nur zur Identifikation dieses Kontos. Beispiel: Mein persönliches Konto", + "friendlyName textField label": "Konfigurationsname", + "friendlyName textField helper text": + "Dies hilft Ihnen nur, diese Konfiguration zu identifizieren. Beispiel: Mein AWS-Bucket", "isAnonymous switch label": "Anonymer Zugang", "isAnonymous switch helper text": "Auf EIN stellen, wenn kein geheimer Zugangsschlüssel erforderlich ist", diff --git a/web/src/ui/i18n/resources/en.tsx b/web/src/ui/i18n/resources/en.tsx index 4b07fed3c..fcc6e7216 100644 --- a/web/src/ui/i18n/resources/en.tsx +++ b/web/src/ui/i18n/resources/en.tsx @@ -198,9 +198,9 @@ export const translations: Translations<"en"> = { ), "account credentials": "Account credentials", - "accountFriendlyName textField label": "Account friendly name", - "accountFriendlyName textField helper text": - "This is just to help you identify this account. Example: My personal account", + "friendlyName textField label": "Configuration Name", + "friendlyName textField helper text": + "This is just to help you identify this configuration. Example: My AWS bucket", "isAnonymous switch label": "Anonymous access", "isAnonymous switch helper text": "Set to ON if no secret access key is required", "accessKeyId textField label": "Access key ID", diff --git a/web/src/ui/i18n/resources/es.tsx b/web/src/ui/i18n/resources/es.tsx index b158704fa..2b424f9c0 100644 --- a/web/src/ui/i18n/resources/es.tsx +++ b/web/src/ui/i18n/resources/es.tsx @@ -202,9 +202,9 @@ export const translations: Translations<"en"> = { ), "account credentials": "Credenciales de cuenta", - "accountFriendlyName textField label": "Nombre de cuenta amigable", - "accountFriendlyName textField helper text": - "Esto es solo para ayudarte a identificar esta cuenta. Ejemplo: Mi cuenta personal", + "friendlyName textField label": "Nombre de configuración", + "friendlyName textField helper text": + "Esto es solo para ayudarle a identificar esta configuración. Ejemplo: Mi bucket de AWS", "isAnonymous switch label": "Acceso anónimo", "isAnonymous switch helper text": "Activa esta opción si no se requiere una clave de acceso secreto", diff --git a/web/src/ui/i18n/resources/fi.tsx b/web/src/ui/i18n/resources/fi.tsx index 48a52cd9e..05f4ceca8 100644 --- a/web/src/ui/i18n/resources/fi.tsx +++ b/web/src/ui/i18n/resources/fi.tsx @@ -202,9 +202,9 @@ export const translations: Translations<"fi"> = { ), "account credentials": "Tilin tunnistetiedot", - "accountFriendlyName textField label": "Tilin ystävällinen nimi", - "accountFriendlyName textField helper text": - "Tämä on vain avuksi tilin tunnistamisessa. Esimerkki: Oma henkilökohtainen tili", + "friendlyName textField label": "Konfiguraation nimi", + "friendlyName textField helper text": + "Tämä auttaa sinua tunnistamaan tämän konfiguraation. Esimerkki: Minun AWS-bucket", "isAnonymous switch label": "Anonyymi pääsy", "isAnonymous switch helper text": "Aseta PÄÄLLE, jos salainen pääsyavain ei ole tarpeen", diff --git a/web/src/ui/i18n/resources/fr.tsx b/web/src/ui/i18n/resources/fr.tsx index 972759234..817a6ab62 100644 --- a/web/src/ui/i18n/resources/fr.tsx +++ b/web/src/ui/i18n/resources/fr.tsx @@ -206,9 +206,9 @@ export const translations: Translations<"fr"> = { ), "account credentials": "Identifiants du compte", - "accountFriendlyName textField label": "Nom convivial du compte", - "accountFriendlyName textField helper text": - "Ceci est juste pour vous aider à identifier ce compte. Exemple : Mon compte personnel", + "friendlyName textField label": "Nom de la configuration", + "friendlyName textField helper text": + "Ceci est juste pour vous aider à identifier cette configuration. Exemple : Mon bucket AWS", "isAnonymous switch label": "Accès anonyme", "isAnonymous switch helper text": "Mettre sur ON si aucune clé d'accès secrète n'est requise", diff --git a/web/src/ui/i18n/resources/it.tsx b/web/src/ui/i18n/resources/it.tsx index e1bc7a8d0..eda55261b 100644 --- a/web/src/ui/i18n/resources/it.tsx +++ b/web/src/ui/i18n/resources/it.tsx @@ -201,9 +201,9 @@ export const translations: Translations<"it"> = { ), "account credentials": "Credenziali dell'account", - "accountFriendlyName textField label": "Nome amichevole dell'account", - "accountFriendlyName textField helper text": - "Questo serve solo per aiutarti a identificare questo account. Esempio: Il mio account personale", + "friendlyName textField label": "Nome della configurazione", + "friendlyName textField helper text": + "Questo serve solo ad aiutarti a identificare questa configurazione. Esempio: Il mio bucket AWS", "isAnonymous switch label": "Accesso anonimo", "isAnonymous switch helper text": diff --git a/web/src/ui/i18n/resources/nl.tsx b/web/src/ui/i18n/resources/nl.tsx index f70bcab11..73672f064 100644 --- a/web/src/ui/i18n/resources/nl.tsx +++ b/web/src/ui/i18n/resources/nl.tsx @@ -201,9 +201,9 @@ export const translations: Translations<"nl"> = { ), "account credentials": "Accountgegevens", - "accountFriendlyName textField label": "Vriendelijke naam van het account", - "accountFriendlyName textField helper text": - "Dit is slechts om u te helpen dit account te identificeren. Voorbeeld: Mijn persoonlijke account", + "friendlyName textField label": "Configuratienaam", + "friendlyName textField helper text": + "Dit helpt je alleen om deze configuratie te identificeren. Voorbeeld: Mijn AWS-bucket", "isAnonymous switch label": "Anonieme toegang", "isAnonymous switch helper text": diff --git a/web/src/ui/i18n/resources/no.tsx b/web/src/ui/i18n/resources/no.tsx index 12d5bfc5d..4dfddb1bc 100644 --- a/web/src/ui/i18n/resources/no.tsx +++ b/web/src/ui/i18n/resources/no.tsx @@ -202,9 +202,9 @@ export const translations: Translations<"no"> = { ), "account credentials": "Kontoinformasjon", - "accountFriendlyName textField label": "Brukervennlig kontonavn", - "accountFriendlyName textField helper text": - "Dette er bare for å hjelpe deg med å identifisere denne kontoen. Eksempel: Min personlige konto", + "friendlyName textField label": "Konfigurasjonsnavn", + "friendlyName textField helper text": + "Dette er bare for å hjelpe deg med å identifisere denne konfigurasjonen. Eksempel: Min AWS-bøtte", "isAnonymous switch label": "Anonym tilgang", "isAnonymous switch helper text": diff --git a/web/src/ui/i18n/resources/zh-CN.tsx b/web/src/ui/i18n/resources/zh-CN.tsx index f9a8e9604..c320e653b 100644 --- a/web/src/ui/i18n/resources/zh-CN.tsx +++ b/web/src/ui/i18n/resources/zh-CN.tsx @@ -184,9 +184,9 @@ export const translations: Translations<"zh-CN"> = { ), "account credentials": "账户凭证", - "accountFriendlyName textField label": "账户友好名称", - "accountFriendlyName textField helper text": - "这只是为了帮助你识别这个账户。例如：我的个人账户", + "friendlyName textField label": "配置名称", + "friendlyName textField helper text": + "这只是帮助您识别此配置。例如：我的 AWS 存储桶", "isAnonymous switch label": "匿名访问", "isAnonymous switch helper text": "如果不需要密钥，请将其设置为开启", "accessKeyId textField label": "访问密钥 ID", diff --git a/web/src/ui/pages/projectSettings/ProjectSettingsS3ConfigTab/ProjectSettingsS3ConfigTab.tsx b/web/src/ui/pages/projectSettings/ProjectSettingsS3ConfigTab/ProjectSettingsS3ConfigTab.tsx index 23c6542bb..12c7d3638 100644 --- a/web/src/ui/pages/projectSettings/ProjectSettingsS3ConfigTab/ProjectSettingsS3ConfigTab.tsx +++ b/web/src/ui/pages/projectSettings/ProjectSettingsS3ConfigTab/ProjectSettingsS3ConfigTab.tsx @@ -55,90 +55,51 @@ export const ProjectSettingsS3ConfigTab = memo((props: Props) => {
{s3Configs.map(s3Config => ( { - const { customConfigIndex } = s3Config; - - if (customConfigIndex === undefined) { + if (s3Config.origin !== "project") { return undefined; } return () => - evtConfirmCustomS3ConfigDeletionDialogOpen.post({ - "resolveDoProceed": doProceed => { - if (!doProceed) { - return; - } - - s3ConfigManagement.deleteCustomS3Config({ - customConfigIndex - }); - } - }); - })()} - onIsUsedForExplorerValueChange={(() => { - if ( - s3Config.accountFriendlyName === undefined && - s3Config.isUsedForExplorer - ) { - return undefined; - } - - return isUsed => - s3ConfigManagement.setConfigUsage({ - "customConfigIndex": s3Config.customConfigIndex, - "usedFor": "explorer", - isUsed - }); - })()} - onIsUsedForXOnyxiaValueChange={(() => { - if ( - s3Config.accountFriendlyName === undefined && - s3Config.isUsedForXOnyxia - ) { - return undefined; - } - - return isUsed => - s3ConfigManagement.setConfigUsage({ - "customConfigIndex": s3Config.customConfigIndex, - "usedFor": "xOnyxia", - isUsed + s3ConfigManagement.deleteS3Config({ + "projectS3ConfigId": s3Config.id }); })()} + onIsExplorerConfigChange={value => + s3ConfigManagement.changeIsDefault({ + "s3ConfigId": s3Config.id, + "usecase": "explorer", + value + }) + } + onIsOnyxiaDefaultChange={value => + s3ConfigManagement.changeIsDefault({ + "s3ConfigId": s3Config.id, + "usecase": "defaultXOnyxia", + value + }) + } onEdit={(() => { - const { customConfigIndex } = s3Config; - - if (customConfigIndex === undefined) { + if (s3Config.origin !== "project") { return undefined; } return () => evtAddCustomS3ConfigDialogOpen.post({ - customConfigIndex + "s3ConfigIdToEdit": s3Config.id }); })()} - doHideUsageSwitches={ - s3Config.accountFriendlyName === undefined && - s3Configs.length === 1 - } - connectionTestStatus={s3Config.connectionTestStatus} onTestConnection={(() => { - const { customConfigIndex } = s3Config; - - if (customConfigIndex === undefined) { + if (s3Config.origin !== "project") { return undefined; } return () => - s3ConfigManagement.testConnection({ - customConfigIndex + s3ConfigManagement.testS3Connection({ + "projectS3ConfigId": s3Config.id }); })()} /> @@ -163,7 +124,7 @@ export const ProjectSettingsS3ConfigTab = memo((props: Props) => { } evtAddCustomS3ConfigDialogOpen.post({ - "customConfigIndex": undefined + "s3ConfigIdToEdit": undefined }); }} > diff --git a/web/src/ui/pages/projectSettings/ProjectSettingsS3ConfigTab/S3ConfigCard.stories.tsx b/web/src/ui/pages/projectSettings/ProjectSettingsS3ConfigTab/S3ConfigCard.stories.tsx deleted file mode 100644 index 3213462b7..000000000 --- a/web/src/ui/pages/projectSettings/ProjectSettingsS3ConfigTab/S3ConfigCard.stories.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import type { Meta, StoryObj } from "@storybook/react"; -import { S3ConfigCard } from "./S3ConfigCard"; - -const meta = { - title: "Pages/ProjectSettings/S3ConfigTab/S3ConfigCard", - component: S3ConfigCard -} satisfies Meta; - -export default meta; - -type Story = StoryObj; - -export const Default: Story = { - args: { - dataSource: "MinIO", - region: "us-east-1", - accountFriendlyName: "Test Account", - isUsedForExplorer: true, - isUsedForXOnyxia: false, - onDelete: () => console.log("Delete clicked"), - onIsUsedForExplorerValueChange: isUsed => - console.log("Explorer usage changed:", isUsed), - onIsUsedForXOnyxiaValueChange: isUsed => - console.log("XOnyxia usage changed:", isUsed), - onEdit: () => console.log("Edit clicked"), - doHideUsageSwitches: false, - connectionTestStatus: { - stateDescription: "not tested yet", - isTestOngoing: false - }, - onTestConnection: () => console.log("Test connection clicked") - } -}; - -export const HiddenSwitches: Story = { - args: { - ...Default.args, - doHideUsageSwitches: true - } -}; - -export const NoEditDelete: Story = { - args: { - ...Default.args, - onDelete: undefined, - onEdit: undefined - } -}; - -export const ConnectionTested: Story = { - args: { - ...Default.args, - connectionTestStatus: { stateDescription: "success", isTestOngoing: false } - } -}; diff --git a/web/src/ui/pages/projectSettings/ProjectSettingsS3ConfigTab/S3ConfigCard.tsx b/web/src/ui/pages/projectSettings/ProjectSettingsS3ConfigTab/S3ConfigCard.tsx index a522ccbfe..16105ab5b 100644 --- a/web/src/ui/pages/projectSettings/ProjectSettingsS3ConfigTab/S3ConfigCard.tsx +++ b/web/src/ui/pages/projectSettings/ProjectSettingsS3ConfigTab/S3ConfigCard.tsx @@ -4,42 +4,31 @@ import type { MuiIconComponentName } from "onyxia-ui/MuiIconComponentName"; import { id } from "tsafe/id"; import { Button } from "onyxia-ui/Button"; import { tss } from "tss"; -import type { S3Config } from "core/usecases/s3ConfigManagement"; import { TestS3ConnectionButton } from "./TestS3ConnectionButton"; import { Icon } from "onyxia-ui/Icon"; import Tooltip from "@mui/material/Tooltip"; import { declareComponentKeys, useTranslation } from "ui/i18n"; +import type { S3Config } from "core/usecases/s3ConfigManagement"; +import { assert } from "tsafe/assert"; type Props = { className?: string; - dataSource: string; - region: string; - accountFriendlyName: string | undefined; - isUsedForExplorer: boolean; - isUsedForXOnyxia: boolean; + s3Config: S3Config; onDelete: (() => void) | undefined; - onIsUsedForExplorerValueChange: ((isUsed: boolean) => void) | undefined; - onIsUsedForXOnyxiaValueChange: ((isUsed: boolean) => void) | undefined; + onIsExplorerConfigChange: (value: boolean) => void; + onIsOnyxiaDefaultChange: (value: boolean) => void; onEdit: (() => void) | undefined; - doHideUsageSwitches: boolean; - connectionTestStatus: S3Config["connectionTestStatus"] | undefined; onTestConnection: (() => void) | undefined; }; export function S3ConfigCard(props: Props) { const { className, - dataSource, - region, - accountFriendlyName, - isUsedForExplorer, - isUsedForXOnyxia, + s3Config, onDelete, - onIsUsedForExplorerValueChange, - onIsUsedForXOnyxiaValueChange, - doHideUsageSwitches, + onIsExplorerConfigChange, + onIsOnyxiaDefaultChange, onEdit, - connectionTestStatus, onTestConnection } = props; @@ -58,79 +47,78 @@ export function S3ConfigCard(props: Props) { "fontSize": "0.9rem" })} > - {dataSource} + {s3Config.dataSource} - {region === "" ? null : <> - {region}} + {s3Config.region === "" ? null : <> - {s3Config.region}}
- {accountFriendlyName === undefined ? ( - <> - {t("credentials")}: -     - {t("sts credentials")} - - ) : ( - <> - {t("account")}: -     - {accountFriendlyName} - - )} + {(() => { + switch (s3Config.origin) { + case "deploymentRegion": + return ( + <> + {t("credentials")}: +     + {t("sts credentials")} + + ); + case "project": + return ( + <> + {t("account")}: +     + {s3Config.friendlyName} + + ); + } + })()} +
+
+ {t("use in services")} + + ("Help")} + /> + +   + onIsOnyxiaDefaultChange(event.target.checked)} + inputProps={{ "aria-label": "controlled" }} + /> +
+
+ {t("use for onyxia explorers")} + + ("Help")} + /> + +   + onIsExplorerConfigChange(event.target.checked)} + inputProps={{ "aria-label": "controlled" }} + />
- {!doHideUsageSwitches && ( - <> -
- {t("use in services")} - - ("Help")} - /> - -   - - onIsUsedForXOnyxiaValueChange?.(event.target.checked) - } - inputProps={{ "aria-label": "controlled" }} - /> -
-
- {t("use for onyxia explorers")} - - ("Help")} - /> - -   - - onIsUsedForExplorerValueChange?.(event.target.checked) - } - inputProps={{ "aria-label": "controlled" }} - /> -
- - )}
- {connectionTestStatus !== undefined && ( - - )} + {s3Config.origin === "project" && + (assert(onTestConnection !== undefined), + ( + + ))}
; }; @@ -37,8 +37,8 @@ export const AddCustomS3ConfigDialog = memo((props: Props) => { useEvt( ctx => - evtOpen.attach(ctx, ({ customConfigIndex }) => - s3ConfigCreation.initialize({ customConfigIndex }) + evtOpen.attach(ctx, ({ s3ConfigIdToEdit }) => + s3ConfigCreation.initialize({ s3ConfigIdToEdit }) ), [evtOpen] ); @@ -152,6 +152,26 @@ const Body = memo(() => { return ( <> + + s3ConfigCreation.changeValue({ + "key": "friendlyName", + value + }) + } + /> { > {t("account credentials")} - - s3ConfigCreation.changeValue({ - "key": "accountFriendlyName", - value - }) - } - /> ; export const Default: Story = { args: { connectionTestStatus: { - isTestOngoing: false, - stateDescription: "not tested yet" + status: "not tested" }, onTestConnection: action("onTestConnection") } @@ -24,30 +23,27 @@ export const Default: Story = { export const Testing: Story = { args: { connectionTestStatus: { - isTestOngoing: true, - stateDescription: "not tested yet" + status: "test ongoing" }, - onTestConnection: undefined + onTestConnection: action("onTestConnection") } }; export const Success: Story = { args: { connectionTestStatus: { - isTestOngoing: false, - stateDescription: "success" + status: "test succeeded" }, - onTestConnection: () => {} + onTestConnection: action("onTestConnection") } }; export const Failed: Story = { args: { connectionTestStatus: { - isTestOngoing: false, - stateDescription: "failed", + status: "test failed", errorMessage: "Connection failed due to invalid credentials" }, - onTestConnection: () => {} + onTestConnection: action("onTestConnection") } }; diff --git a/web/src/ui/pages/projectSettings/ProjectSettingsS3ConfigTab/TestS3ConnectionButton.tsx b/web/src/ui/pages/projectSettings/ProjectSettingsS3ConfigTab/TestS3ConnectionButton.tsx index a1c86c49e..02866f739 100644 --- a/web/src/ui/pages/projectSettings/ProjectSettingsS3ConfigTab/TestS3ConnectionButton.tsx +++ b/web/src/ui/pages/projectSettings/ProjectSettingsS3ConfigTab/TestS3ConnectionButton.tsx @@ -1,5 +1,5 @@ import { Button } from "onyxia-ui/Button"; -import type { ConnectionTestStatus } from "core/usecases/s3ConfigManagement"; +import type { S3Config } from "core/usecases/s3ConfigManagement"; import { tss } from "tss"; import { declareComponentKeys, useTranslation } from "ui/i18n"; import { CircularProgress } from "onyxia-ui/CircularProgress"; @@ -11,7 +11,7 @@ import { assert, type Equals } from "tsafe/assert"; export type Props = { className?: string; - connectionTestStatus: ConnectionTestStatus; + connectionTestStatus: S3Config.FromProject["connectionTestStatus"]; onTestConnection: (() => void) | undefined; }; @@ -26,23 +26,27 @@ export function TestS3ConnectionButton(props: Props) {
{(() => { - if (connectionTestStatus.isTestOngoing) { + if (connectionTestStatus.status === "test ongoing") { return ; } - switch (connectionTestStatus.stateDescription) { - case "not tested yet": + switch (connectionTestStatus.status) { + case "not tested": return null; - case "success": + case "test succeeded": return ( ("DoneOutline")} /> ); - case "failed": + case "test failed": return ( <>