Better alert message on subscription deletion/extraction

Author: quentinovega

daikoku/javascript/src/components/backoffice/apikeys/TeamApiKeysForApi.tsx

@@ -210,27 +210,56 @@ export const ApiKeysListForApi = (props: ApiKeysListForApiProps) => {
     );
   };
 
-  const makeUniqueApiKey = (subscription: ISubscription) => {
-    confirm({
-      message: translate('team_apikey_for_api.ask_for_make_unique'),
-    }).then((ok) => {
-      if (ok)
-        Services.makeUniqueApiKey(props.team._id, subscription._id).then(
-          () => {
-            queryClient.invalidateQueries({
-              queryKey: ['data', 'subscriptions'],
-            });
-            toast.success(
-              translate(
-                'team_apikey_for_api.ask_for_make_unique.success_message'
-              )
-            );
+  const makeUniqueApiKey = (subscription: ISubscription, details: IApiSubscriptionDetails) => {
+
+    openFormModal(
+      {
+        title: translate("apikeys.delete.confirm.modal.title"),
+        description: <div className="alert alert-danger" role="alert">
+          <h4 className="alert-heading">{translate('Warning')}</h4>
+          <p>{translate('team_apikey_for_api.ask_for_make_unique')}</p>
+          <ul>
+            <li dangerouslySetInnerHTML={{ __html: translate({ key: 'team_apikey_for_api.ask_for_make_unique.2', replacements: [
+              `<strong>${details.parentSubscription?.api.name}/${details.parentSubscription?.plan.customName}</strong>`
+            ]})}}></li>
+            <li dangerouslySetInnerHTML={{
+              __html: translate({
+                key: 'team_apikey_for_api.ask_for_make_unique.3', replacements: [
+                  `<strong>${details.apiSubscription.api.name}/${details.apiSubscription.plan.customName}</strong>`
+                ]
+})}}></li>
+          </ul>
+        </div>,
+        schema: {
+          validation: {
+            type: type.string,
+            label: translate({ key: "apikeys.delete.confirm.label", replacements: [`${details.apiSubscription.api.name}/${subscription.customName ?? details.apiSubscription.plan.customName}`] }),
+            constraints: [
+              constraints.required(translate('constraints.required.value')),
+              constraints.matches(new RegExp(`${escapeRegExp(details.apiSubscription.api.name)}/${escapeRegExp(subscription.customName) ?? escapeRegExp(details.apiSubscription.plan.customName)}`), translate('constraints.match.subscription'))
+            ],
+            defaultValue: ""
           }
-        );
-    });
+        },
+        actionLabel: translate('Confirm'),
+        onSubmit: () => Services.makeUniqueApiKey(props.team._id, subscription._id)
+          .then(
+            () => {
+              queryClient.invalidateQueries({
+                queryKey: ['data', 'subscriptions'],
+              });
+              toast.success(
+                translate(
+                  'team_apikey_for_api.ask_for_make_unique.success_message'
+                )
+              );
+            }
+          )
+      }
+    )
   };
 
-  const deleteApiKey = (subscription: ISubscriptionWithChildren) => {
+  const deleteApiKey = (subscription: ISubscriptionWithChildren, details: IApiSubscriptionDetails) => {
     const afterDeletionFunction = () => {
       queryClient.invalidateQueries({
         queryKey: ["data", "subscriptions"],
@@ -277,9 +306,32 @@ export const ApiKeysListForApi = (props: ApiKeysListForApiProps) => {
             description: <div className="alert alert-danger" role="alert">
               <h4 className="alert-heading">{translate('Warning')}</h4>
               <p>{translate("delete.subscription.confirm.modal.description.1")}</p>
-              <ul>
-                <li>{translate("delete.subscription.confirm.modal.description.2")}</li>
-              </ul>
+              {!details.parentSubscription && choice === 'delete' && <>
+                <p>{translate("delete.subscription.confirm.modal.description.parent.deleteAll")}</p>
+                <p>{translate("delete.subscription.confirm.modal.description.parent.deleteAll.list")}</p>
+                <ul>
+                  {details.accessibleResources.map(resource => (<li>{resource.apiSubscription.api.name}/{resource.apiSubscription.plan.customName}</li>))}
+                </ul>
+              </>}
+
+              {!details.parentSubscription && choice === 'extraction' && <>
+                <p>{translate("delete.subscription.confirm.modal.description.parent.splitChildren")}</p>
+                <p>{translate("delete.subscription.confirm.modal.description.parent.splitChildren.list")}</p>
+                <ul>
+                  {details.accessibleResources.map(resource => (<li>{resource.apiSubscription.api.name}/{resource.apiSubscription.plan.customName}</li>))}
+                </ul>
+              </>}
+
+              {!details.parentSubscription && choice === 'promotion' &&
+                <p dangerouslySetInnerHTML={{
+                  __html: translate({
+                    key: "delete.subscription.confirm.modal.description.parent.promoteChild",
+                    replacements: [
+                      `<strong>${details.accessibleResources.find(r => r.apiSubscription._id === childId)?.apiSubscription.api.name}/${details.accessibleResources.find(r => r.apiSubscription._id === childId)?.apiSubscription.plan.customName}</strong>`,
+                      `<strong>${details.apiSubscription.api.name}/${details.apiSubscription.plan.customName}</strong>`
+                    ]
+                  })
+                }}></p>}
             </div>,
             schema: {
               validation: {
@@ -308,7 +360,19 @@ export const ApiKeysListForApi = (props: ApiKeysListForApiProps) => {
             <h4 className="alert-heading">{translate('Warning')}</h4>
             <p>{translate("delete.subscription.confirm.modal.description.1")}</p>
             <ul>
-              <li>{translate("delete.subscription.confirm.modal.description.2")}</li>
+              {!details.parentSubscription && <p>{translate("delete.subscription.confirm.modal.description.single")}</p>}
+              {!!details.parentSubscription &&
+                <li dangerouslySetInnerHTML={{
+                  __html:
+                    translate({
+                      key: "delete.subscription.confirm.modal.description.child",
+                      replacements: [
+                        `<strong>${details.parentSubscription.api.name
+                        } / ${details.parentSubscription.plan.customName}</strong>`,
+                        `<strong>${details.apiSubscription.api.name}/${details.apiSubscription.plan.customName}</strong>`,
+                      ]
+                    })
+                }}></li>}
             </ul>
           </div>,
           schema: {
@@ -475,8 +539,8 @@ export const ApiKeysListForApi = (props: ApiKeysListForApiProps) => {
                     updateCustomName(subscription, name)
                   }
                   toggle={() => toggleApiKey(subscription)}
-                  makeUniqueApiKey={() => makeUniqueApiKey(subscription)}
-                  deleteApiKey={() => deleteApiKey(subscription)}
+                  makeUniqueApiKey={(details: IApiSubscriptionDetails) => makeUniqueApiKey(subscription, details)}
+                  deleteApiKey={(detail: IApiSubscriptionDetails) => deleteApiKey(subscription, detail)}
                   toggleRotation={(
                     plan,
                     enabled,
@@ -516,8 +580,8 @@ type ApiKeyCardProps = {
   statsLink: string;
   apiLink: string;
   toggle: () => void;
-  makeUniqueApiKey: () => void;
-  deleteApiKey: () => void;
+  makeUniqueApiKey: (details: IApiSubscriptionDetails) => void;
+  deleteApiKey: (details: IApiSubscriptionDetails) => void;
   toggleRotation: (
     plan: IUsagePlan,
     enabled: boolean,
@@ -632,7 +696,7 @@ export const ApiKeyCard = ({
     }
     `;
 
-    console.debug({team: currentTeam?._id, subscription})
+  console.debug({ team: currentTeam?._id, subscription })
   const detailQuery = useQuery({
     queryKey: ['parent', subscription._id, currentTeam?._id ?? 'no-team'],
     queryFn: () => customGraphQLClient.request<{ apiSubscriptionDetails: IApiSubscriptionDetails }>(API_SUBSCRIPTION_DETAIL_QUERY, {
@@ -914,13 +978,13 @@ export const ApiKeyCard = ({
             </span>}
             {subscription.parent && <span
               className="dropdown-item cursor-pointer danger"
-              onClick={makeUniqueApiKey}
+              onClick={() => makeUniqueApiKey(detailQuery.data)}
             >
               {translate("subscription.extract.button.label")}
             </span>}
             <span
               className="dropdown-item cursor-pointer danger"
-              onClick={deleteApiKey}
+              onClick={() => deleteApiKey(detailQuery.data)}
             >
               {translate("subscription.delete.button.label")}
             </span>

daikoku/javascript/src/locales/en/translation.json

@@ -955,7 +955,9 @@
     "disabled.due.to.aggregation.security": "disabled due to enabling of aggregation security",
     "I understood": "I understood",
     "team_apikey_for_api.make_unique": "Make unique",
-    "team_apikey_for_api.ask_for_make_unique": "Are you sure to make this API key unique and separate from his parent plan?",
+    "team_apikey_for_api.ask_for_make_unique": "Are you sure you want to separate this API key from the parent key and create a new one? This action is irreversible. It will result in:",
+    "team_apikey_for_api.ask_for_make_unique.2": "Updating the parent subscription associated with the API %s.",
+    "team_apikey_for_api.ask_for_make_unique.3": "Creating a new subscription for the API %s.",
     "team_apikey_for_api.ask_for_make_unique.success_message": "The API key has been successfully separated from his parent",
     "team_api_info.isDefault": "Use as latest version",
     "request_api_access": "You need to be authorized to view this API.",
@@ -1436,8 +1438,14 @@
     "delete.user.confirm.modal.description.2": "All subscriptions and API keys associated with this user.",
     "delete.user.confirm.modal.description.3": "All APIs managed by this user.",
     "delete.user.confirm.modal.description.4": "All subscriptions to the APIs managed by this user.",
-    "delete.subscription.confirm.modal.description.1": "Are you sure you want to delete this subscription? This action is irreversible and will result in the deletion of:",
-    "delete.subscription.confirm.modal.description.2": "The API key associated with this subscription.",
+    "delete.subscription.confirm.modal.description.1": "Are you sure you want to delete this subscription? This action is irreversible.",
+    "delete.subscription.confirm.modal.description.single": "This action will permanently delete the associated API key.",
+    "delete.subscription.confirm.modal.description.child": "The parent API key associated with the API %s will be updated and will no longer provide access to the API %s.",
+    "delete.subscription.confirm.modal.description.parent.deleteAll": "All associated subscriptions and API keys will also be permanently deleted.",
+    "delete.subscription.confirm.modal.description.parent.deleteAll.list": "Affected subscriptions:",
+    "delete.subscription.confirm.modal.description.parent.promoteChild": "The subscription to %s has been designated as the new parent. Associated resources will remain unchanged except for access to %s.",
+    "delete.subscription.confirm.modal.description.parent.splitChildren": "Child subscriptions will become independent, and new individual API keys will be generated.",
+    "delete.subscription.confirm.modal.description.parent.splitChildren.list": "Newly generated subscriptions for the following resources:",
     "delete.plan.confirm.modal.description.1": "Are you sure you want to delete this Plan? This action is irreversible and will result in the deletion of:",
     "delete.plan.confirm.modal.description.2": "All API keys associated with this plan.",
     "delete.environment.confirm.modal.description.1": "Are you sure you want to delete this environment? This action is irreversible and will result in the deletion of:",

daikoku/javascript/src/locales/fr/translation.json

@@ -955,7 +955,9 @@
   "disabled.due.to.aggregation.security": "désactivé en raison de l'activation de l'aggégation des clés",
   "I understood": "J'ai compris",
   "team_apikey_for_api.make_unique": "Rendre unique",
-  "team_apikey_for_api.ask_for_make_unique": "Êtes-vous sûr de vouloir séparer cette clé d'API de la clé parente et d'en créer une nouvelle ?",
+  "team_apikey_for_api.ask_for_make_unique": "Êtes-vous sûr de vouloir séparer cette clé d'API de la clé parente et d'en créer une nouvelle ? cette action est irréversible. Elle aura pour effet :",
+  "team_apikey_for_api.ask_for_make_unique.2": "La mise à jour de la souscription parent associée à l'API %s.",
+  "team_apikey_for_api.ask_for_make_unique.3": "La création d'une nouvelle souscription pour l'API %s.",
   "team_apikey_for_api.ask_for_make_unique.success_message": "La clé d'API a correctement été séparée de la clé parent.",
   "team_api_info.isDefault": "Utiliser comme dernière version",
   "request_api_access": "Vous devez être autorisé pour visualiser cette API.",
@@ -1435,8 +1437,20 @@
   "delete.user.confirm.modal.description.2": "Toutes les souscriptions et clés API associées à cet utilisateur.",
   "delete.user.confirm.modal.description.3": "Toutes les API gérées par cet utilisateur.",
   "delete.user.confirm.modal.description.4": "Toutes les souscriptions aux API gérées par cet utilisateur.",
-  "delete.subscription.confirm.modal.description.1": "Êtes-vous sûr de vouloir supprimer cette souscription ? Cette action est irréversible et entraînera la suppression de :",
-  "delete.subscription.confirm.modal.description.2": "La clé API associée à cette souscription.",
+  "delete.subscription.confirm.modal.description.1": "Êtes-vous sûr de vouloir supprimer cette souscription ? Cette action est irréversible.",
+
+  "delete.subscription.confirm.modal.description.single": "Cette action entraînera la suppression définitve de la clé d'API associée.",
+
+  "delete.subscription.confirm.modal.description.child": "La clé d'API parent associé à l'API %s sera mise à jour et ne permettra plus l'accès à l'APi %s.",
+
+  "delete.subscription.confirm.modal.description.parent.deleteAll": "Toutes les souscriptions et clés API associées seront également supprimées de manière irréversible.",
+  "delete.subscription.confirm.modal.description.parent.deleteAll.list": "Souscriptions concernées :",
+
+  "delete.subscription.confirm.modal.description.parent.promoteChild": "La souscription à %s a été désignée comme nouveau parent. Les ressources associées resteront inchangées sauf l'access à %s.",
+
+  "delete.subscription.confirm.modal.description.parent.splitChildren": "Les souscriptions enfants deviendront autonomes et de nouvelles clés d'API individuelles seront générées.",
+  "delete.subscription.confirm.modal.description.parent.splitChildren.list": "Nouvelles souscriptions générées pour les ressources :",
+
   "delete.plan.confirm.modal.description.1": "Êtes-vous sûr de vouloir supprimer ce plan ? Cette action est irréversible et entraînera la suppression de :",
   "delete.plan.confirm.modal.description.2": "Toutes les clés d'API associées à ce plan.",
   "delete.environment.confirm.modal.description.1": "Êtes-vous sûr de vouloir supprimer cet environnement ? Cette action est irréversible et entraînera la suppression de :",