Flag aggregated APIkeys in ApiKeys list

MAIF · Sep 28, 2023 · 32accf1 · 32accf1
1 parent 0f24d1d
commit 32accf1
Show file tree

Hide file tree

Showing 11 changed files with 97 additions and 19 deletions.
diff --git a/daikoku/javascript/src/components/adminbackoffice/otoroshi/initialization/steps.tsx b/daikoku/javascript/src/components/adminbackoffice/otoroshi/initialization/steps.tsx
@@ -68,7 +68,7 @@ export const SelectOtoStep = (props: any) => {
       />
       {!!previousState && previousState.tenant === props.tenant._id && (
         <div className="d-flex flex-column">
-          <BeautifulTitle placement="bottom" title={translate('Load a work in progress')}>
+          <BeautifulTitle place="bottom" title={translate('Load a work in progress')}>
             <button className="btn btn-access" onClick={props.loadPreviousState}>
               <i className="fa fa-download" />
             </button>

diff --git a/daikoku/javascript/src/components/adminbackoffice/tenants/MailingInternalization.tsx b/daikoku/javascript/src/components/adminbackoffice/tenants/MailingInternalization.tsx
@@ -111,7 +111,7 @@ const EditMailtemplate = ({
         actions: (insert: any) => {
           return (
             <BeautifulTitle
-              placement="bottom"
+              place="bottom"
               title={translate('image url from asset')}
             >
               <AssetChooserByModal

diff --git a/daikoku/javascript/src/components/backoffice/apikeys/TeamApiKeysForApi.tsx b/daikoku/javascript/src/components/backoffice/apikeys/TeamApiKeysForApi.tsx
@@ -339,7 +339,7 @@ const ApiKeyCard = ({
                 (!editMode ? (
                   <>
                     <BeautifulTitle
-                      title={customName}
+                      title={customName || ''}
                       style={{
                         wordBreak: 'break-all',
                         marginBlockEnd: '0',
@@ -655,7 +655,7 @@ export const Help = ({
   message
 }: HelpProps) => {
   return (
-    <BeautifulTitle placement="bottom" title={message}>
+    <BeautifulTitle place="bottom" title={message}>
       <i className="ms-4 far fa-question-circle" />
     </BeautifulTitle>
   );

diff --git a/daikoku/javascript/src/components/backoffice/apis/TeamApiDocumentation.tsx b/daikoku/javascript/src/components/backoffice/apis/TeamApiDocumentation.tsx
@@ -174,7 +174,7 @@ export const TeamApiDocumentation = (props: TeamApiDocumentationProps) => {
                 <i className={`fas fa-feather`} />
               </button>
               <BeautifulTitle
-                placement="bottom"
+                place="bottom"
                 title={translate('image url from asset')}
               >
                 <AssetChooserByModal

diff --git a/daikoku/javascript/src/components/backoffice/apis/TeamApiSubscriptions.tsx b/daikoku/javascript/src/components/backoffice/apis/TeamApiSubscriptions.tsx
@@ -28,7 +28,8 @@ type TeamApiSubscriptionsProps = {
 }
 type SubscriptionsFilter = {
   metadata: Array<{ key: string, value: string }>,
-  tags: Array<string>
+  tags: Array<string>,
+  clientIds: Array<string>
 }
 type LimitedPlan = {
   _id: string
@@ -62,6 +63,19 @@ type ApiSubscriptionGql = {
   customMaxPerMonth?: number
   tags: Array<string>
   metadata?: JSON
+  parent: {
+    _id: string
+    adminCustomName: string
+    api: {
+      _id: string
+      name: string
+    }
+    plan: {
+      _id: string
+      customName: string
+      type: string
+    }
+  }
 }
 export const TeamApiSubscriptions = ({ api }: TeamApiSubscriptionsProps) => {
   const currentTeam = useSelector<IState, ITeamSimple>((s) => s.context.currentTeam);
@@ -103,6 +117,29 @@ export const TeamApiSubscriptions = ({ api }: TeamApiSubscriptionsProps) => {
         return displayed.toLocaleLowerCase().includes(value.toLocaleLowerCase())
       },
       sortingFn: 'basic',
+      cell: (info) => {
+        const sub = info.row.original;
+        if (sub.parent) {
+          const title = `<div>
+            <strong>${translate('aggregated.apikey.badge.title')}</strong>
+            <ul>
+              <li>${translate('Api')}: ${sub.parent.api.name}</li>
+              <li>${translate('Plan')}: ${sub.parent.plan.customName}</li>
+              <li>${translate('aggregated.apikey.badge.apikey.name')}: ${sub.parent.adminCustomName}</li>
+            </ul>
+          </div>`
+          return (
+            <div className="d-flex flex-row justify-content-between">
+              <span>{info.getValue()}</span> 
+              <BeautifulTitle title={title} html>
+
+                <div className="badge iconized">A</div>
+              </BeautifulTitle>
+            </div>
+          );
+        }
+        return <div>{info.getValue()}</div>;
+      }
     }),
     columnHelper.accessor('plan', {
       header: translate('Plan'),
@@ -273,6 +310,11 @@ export const TeamApiSubscriptions = ({ api }: TeamApiSubscriptionsProps) => {
                   type: type.string,
                   label: translate('Filter tags'),
                   array: true,
+                },
+                clientIds: {
+                  type: type.string,
+                  array: true,
+                  label: translate('Filter Client Ids')
                 }
               },
               title: translate("Filter data"),
@@ -299,7 +341,7 @@ export const TeamApiSubscriptions = ({ api }: TeamApiSubscriptionsProps) => {
                     version: api.currentVersion
                   }
                 }).then(({ data: { apiApiSubscriptions } }) => {
-                  if (!filters || (!filters.tags.length && !Object.keys(filters.metadata).length)) {
+                  if (!filters || (!filters.tags.length && !Object.keys(filters.metadata).length && !filters.clientIds.length)) {
                     return apiApiSubscriptions
                   } else {
                     const filterByMetadata = (subscription: ApiSubscriptionGql) => {
@@ -315,9 +357,14 @@ export const TeamApiSubscriptions = ({ api }: TeamApiSubscriptionsProps) => {
                       return filters.tags.every(tag => subscription.tags.includes(tag))
                     }
 
+                    const filterByClientIds = (subscription: ApiSubscriptionGql) => {
+                      return filters.clientIds.includes(subscription.apiKey.clientId)
+                    }
+
                     return apiApiSubscriptions
                       .filter(filterByMetadata)
                       .filter(filterByTags)
+                      .filter(filterByClientIds)
                   }
                 })
               }}

diff --git a/daikoku/javascript/src/components/frontend/fastMode/FastItemView.tsx b/daikoku/javascript/src/components/frontend/fastMode/FastItemView.tsx
@@ -70,7 +70,7 @@ export const FastItemView = (props: FastItemViewProps) => {
           <div className="card-header" style={{ position: 'relative' }}>
             <div className="d-flex align-items-center justify-content-between">
               <BeautifulTitle
-                title={props.planInfo.customName}
+                title={props.planInfo.customName || ''}
                 style={{
                   wordBreak: 'break-all',
                   marginBlockEnd: '0',

diff --git a/daikoku/javascript/src/components/utils/BeautifulTitle.tsx b/daikoku/javascript/src/components/utils/BeautifulTitle.tsx
@@ -1,21 +1,33 @@
-import React from 'react';
-import {Tooltip as ReactToolTip} from 'react-tooltip';
+import React, { Children, PropsWithChildren } from 'react';
+import { PlacesType, Tooltip as ReactToolTip, VariantType } from 'react-tooltip';
 import { nanoid } from 'nanoid';
 
+type BeautifulTitleProps = {
+  title: string,
+  place?: PlacesType,
+  variant?: VariantType,
+  className?: string,
+  style?: object
+  html?: boolean
+}
+
 export const BeautifulTitle = ({
   title,
-  children,
+  html,
   place,
   variant,
   ...props
-}: any) => {
+}: PropsWithChildren<BeautifulTitleProps>) => {
   const id: string = nanoid(4);
   return (
     <>
-      <ReactToolTip className='bf-tooltip' anchorId={`tooltip-${id}`} place={place || 'bottom'} variant={variant || 'dark'}/>
-      <span id={`tooltip-${id}`} {...props} data-tooltip-content={title}>
-        {children}
-      </span>
+      <ReactToolTip className='bf-tooltip' anchorId={`tooltip-${id}`} place={place || 'bottom'} variant={variant || 'dark'} />
+      {!html && <span id={`tooltip-${id}`} {...props} data-tooltip-content={title} >
+        {props.children}
+      </span>}
+      {html && <span id={`tooltip-${id}`} {...props} data-tooltip-html={title} >
+        {props.children}
+      </span>}
     </>
   );
 };
diff --git a/daikoku/javascript/src/contexts/modals/AssetsChooserModal.tsx b/daikoku/javascript/src/contexts/modals/AssetsChooserModal.tsx
@@ -195,7 +195,7 @@ export const AssetChooserByModal = (props: AssetChooserProps) => {
       </button>
     );
   } else {
-    return (<BeautifulTitle title={assetsRequest.error}>
+    return (<BeautifulTitle title={assetsRequest.error as string}>
       <button type="button" className="btn btn-outline-primary ms-1 cursor-help" disabled>
         <i className={classNames('fas', {
           'fa-user-circle me-1': !!props.onlyPreview,

diff --git a/daikoku/javascript/src/locales/en/translation.json b/daikoku/javascript/src/locales/en/translation.json
@@ -1249,6 +1249,7 @@
     "Filter data": "Filter data",
     "Filter metadata": "Filter metadata",
     "Filter tags": "Filter tags",
+    "Filter Client Ids": "Filter Client-Ids",
     "Don't save": "Don't save",
     "set.from.assets": "Set %s from asset",
     "set.logo": "logo",
@@ -1362,5 +1363,7 @@
     "pricing.delete.env.btn.label": "Delete environment",
     "documentation.add.button.label": "Create documentation",
     "team_apikey_aggregatePlans_title": "Aggregated API keys",
-    "constraints.plan.custom-name.one-of.environment": "The plan name must match one of the available environments"
+    "constraints.plan.custom-name.one-of.environment": "The plan name must match one of the available environments",
+    "aggregated.apikey.badge.title": "Aggregated API key",
+    "aggregated.apikey.badge.apikey.name": "API key custom name"
 }
diff --git a/daikoku/javascript/src/locales/fr/translation.json b/daikoku/javascript/src/locales/fr/translation.json
@@ -1251,6 +1251,7 @@
   "Filter data": "Filtrer les données",
   "Filter metadata": "Filtrer les métadonnées",
   "Filter tags": "Filtrer les tags",
+  "Filter Client Ids": "Filtre les Client-Ids",
   "Don't save": "Ne pas enregistrer",
   "set.from.assets": "définir %s depuis un asset",
   "set.logo": "le logo",
@@ -1366,5 +1367,7 @@
   "Alert": "Alerte",
   "documentation.add.button.label": "Initialiser la documentation",
   "team_apikey_aggregatePlans_title": "Clés d'API agregées",
-  "constraints.plan.custom-name.one-of.environment": "Le nom du plan doit correspondre à l'un des environnements disponibles"
+  "constraints.plan.custom-name.one-of.environment": "Le nom du plan doit correspondre à l'un des environnements disponibles",
+  "aggregated.apikey.badge.title": "Clé d'API aggrégée",
+  "aggregated.apikey.badge.apikey.name": "Nom personnalisée de la clé"
 }
diff --git a/daikoku/javascript/src/services/index.ts b/daikoku/javascript/src/services/index.ts
@@ -1547,6 +1547,19 @@ export const graphql = {
         customMaxPerDay
         customMaxPerMonth
         adminCustomName
+        parent {
+          _id
+          adminCustomName
+          api {
+            _id
+            name
+          }
+          plan {
+            _id
+            type
+            customName
+          }
+        }
       }
     }
     `),