Skip to content

Commit

Permalink
improve api-subscription content display
Browse files Browse the repository at this point in the history
  • Loading branch information
@baudelotphilippe
baudelotphilippe committed Sep 17, 2024
1 parent 7ffe3b0 commit 4177014
Showing 1 changed file with 8 additions and 13 deletions.
21 changes: 8 additions & 13 deletions daikoku/javascript/src/components/backoffice/apikeys/TeamApiKeysForApi.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -593,18 +593,13 @@ const ApiKeyCard = ({

return (
<div className='api-subscription'>
<div className="api-subscription__container">
<div className='api-subscription__icon'>
{subscription.children.length === 0 && <i className={"fa-solid icon fa-key"} />}
{subscription.children.length > 0 && <svg
width="32"
viewBox="-18.91 0 122.88 122.88"
version="1.1"
style={{ fill: "var(--level2_text-color, #4c4c4d)", marginBottom: '0.375rem'}}
>
<path d="M60.78,43.44c-1.49,0.81-3.35,0.26-4.15-1.22c-0.81-1.49-0.26-3.35,1.23-4.15c7.04-3.82,10.32-8.76,10.98-13.59 c0.35-2.58-0.05-5.17-1.02-7.57c-0.99-2.43-2.56-4.64-4.55-6.42c-3.87-3.46-9.3-5.28-14.97-3.87c-2.3,0.57-4.29,1.72-6.03,3.34 c-1.85,1.72-3.45,3.97-4.85,6.63c-0.79,1.5-2.64,2.07-4.13,1.29c-1.5-0.79-2.07-2.64-1.29-4.13c1.72-3.26,3.73-6.06,6.11-8.28 c2.49-2.31,5.38-3.97,8.74-4.8c7.8-1.93,15.23,0.53,20.51,5.25c2.68,2.4,4.81,5.39,6.15,8.69c1.35,3.33,1.9,6.99,1.39,10.7 C73.99,31.93,69.75,38.57,60.78,43.44L60.78,43.44z M37.32,67.61c-11.6-15.58-11.88-30.34,2.2-44.06l-10.14-5.6 C21.26,14.79,6.36,38.08,12.12,44.3l7.9,11.72l-1.63,3.4c-0.45,1.01-0.01,1.72,1.09,2.21l1.07,0.29L0,102.59l4.16,8.87l8.32-2.45 l2.14-4.16l-2.05-3.84l4.52-0.97L18.14,98l-2.36-3.6l1.55-3.01l4.51-0.57l1.47-2.85l-2.52-3.29l1.61-3.12l4.6-0.75l6.26-11.95 l1.06,0.58C36.16,70.56,37.11,69.84,37.32,67.61L37.32,67.61z M59.15,77.38l-3.06,11.42l-4.25,1.68l-0.89,3.33l3.1,2.63l-0.81,3.03 l-4.2,1.48l-0.86,3.2l3.01,2.95l-0.58,2.17l-4.13,1.87l2.76,3.25l-1.19,4.43l-7.45,4.07l-5.82-7.63l11.1-41.43l-2.69-0.72 c-0.55-0.15-0.89-0.72-0.74-1.28l1.13-4.21c-8.14-6.17-12.17-16.85-9.37-27.32c3.6-13.45,17.18-21.57,30.64-18.55 c0.06,0.72,0.05,1.45-0.05,2.18c-0.25,1.82-1.04,3.69-2.5,5.5c-0.2,0.24-0.41,0.49-0.63,0.73c-4.3-0.28-8.33,2.5-9.49,6.82 c-0.5,1.86-0.39,3.74,0.2,5.43c0.14,0.6,0.37,1.18,0.67,1.75c0.71,1.3,1.75,2.29,2.97,2.92c0.8,0.53,1.7,0.93,2.67,1.2 c4.83,1.29,9.78-1.49,11.22-6.24c1.46-1.29,2.73-2.65,3.82-4.05c2.12-2.73,3.57-5.63,4.43-8.58c5.84,6.3,8.41,15.37,6.02,24.29 c-2.8,10.47-11.65,17.71-21.77,18.98l-1.13,4.21c-0.15,0.55-0.72,0.89-1.28,0.74L59.15,77.38L59.15,77.38z" />
</svg>}
<div className='api-subscription__value__type'>
<div className="api-subscription__container flex-column flex-xl-row">
<div className='api-subscription__icon flex-row flex-xl-column'>
{subscription.children.length === 0 && !subscription.parent && <i className={"fa-solid icon fa-key"} />}
{subscription.children.length === 0 && subscription.parent && <div className='d-flex'><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360.58 409.94" style={{ fill: "var(--level2_text-color, #4c4c4d)", marginBottom: '0.375rem', width : '20px', transform: "rotateZ(-20deg), margin-left: '-1px' , margin-top: '-8px'"}}><g><g><path d="M266.75,122.38a73.49,73.49,0,0,1-76.91,109.85l-14.24,8.51a17.46,17.46,0,0,1-23.86-6L148,228.5l-11.33,6.77-16.37,9.6L102.48,239l-5.76,13.19-8.35,5.16-15.3-5.72L63,279.25l-13.29,7.93L0,265.91l4.29-22.08L117,176.53l-3.71-6.21a17.44,17.44,0,0,1,6-23.86l14.24-8.5A73.59,73.59,0,0,1,187,88.45a89.07,89.07,0,0,0,13.63,43.24,90.16,90.16,0,0,0,6,8.38,26.4,26.4,0,1,0,28.5-23.79q-1.41-1.82-2.66-3.73a52.14,52.14,0,0,1-8.12-23,73.17,73.17,0,0,1,42.41,32.84Zm-4.68-12.55a73.5,73.5,0,0,1-63,126.8l-10.93,6.52v3.18a17.44,17.44,0,0,0,17.43,17.37h7.24L213,395l16.78,15,43.71-31.87,0-15.48-18.64-22.77L267.6,329.6l-.17-9.82L259,308.09l14.2-12.32.12-19,0-13.2h7.24A17.46,17.46,0,0,0,298,246.15l0-16.59a73.5,73.5,0,0,0-35.85-119.73Z"/><path d="M276.58,0c46.39,0,83.56,37.61,84,84,.11,12.73-4,29.23-8.82,37.65a73.1,73.1,0,0,0-19.85-24.92A28.3,28.3,0,0,0,334.77,84a58.2,58.2,0,1,0-81.9,53.16,27.7,27.7,0,0,1-12.62,22.6A84,84,0,0,1,276.58,0Z"/></g></g></svg><i className={"fa-solid icon fa-key"} style={{transform:"rotateZ(-120deg)"}}/></div> }
{subscription.children.length > 0 && <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 479.79 409.94" style={{ fill: "var(--level2_text-color, #4c4c4d)", marginBottom: '0.375rem', width : '50px', transform: "rotateZ(-20deg)"}}><g><g><path d="M266.75,122.38a73.49,73.49,0,0,1-76.91,109.85l-14.24,8.51a17.46,17.46,0,0,1-23.86-6L148,228.5l-11.33,6.77-16.37,9.6L102.48,239l-5.76,13.19-8.35,5.16-15.3-5.72L63,279.25l-13.29,7.93L0,265.91l4.29-22.08L117,176.53l-3.71-6.21a17.44,17.44,0,0,1,6-23.86l14.24-8.5A73.59,73.59,0,0,1,187,88.45a89.07,89.07,0,0,0,13.63,43.24,90.16,90.16,0,0,0,6,8.38,26.4,26.4,0,1,0,28.5-23.79q-1.41-1.82-2.66-3.73a52.14,52.14,0,0,1-8.12-23,73.17,73.17,0,0,1,42.41,32.84Zm-4.68-12.55a73.5,73.5,0,0,1-63,126.8l-10.93,6.52v3.18a17.44,17.44,0,0,0,17.43,17.37h7.24L213,395l16.78,15,43.71-31.87,0-15.48-18.64-22.77L267.6,329.6l-.17-9.82L259,308.09l14.2-12.32.12-19,0-13.2h7.24A17.46,17.46,0,0,0,298,246.15l0-16.59a73.5,73.5,0,0,0-35.85-119.73Zm-19.56-16A72.93,72.93,0,0,1,257,104.08a73.49,73.49,0,0,1,53.41,117.2L311.53,234l2.86,1.38a17.44,17.44,0,0,0,23.23-8.1l3.15-6.52L459,277.79l20.79-8.57L470.18,216l-13.94-6.73-28.62,6.83L424,200.18l-8.9-4.14-14.18,2.45L396,180.34,379,172l-11.89-5.73,3.15-6.52a17.46,17.46,0,0,0-8.11-23.24l-14.93-7.21A73.51,73.51,0,0,0,242.51,93.84Z"/><path d="M276.58,0c46.39,0,83.56,37.61,84,84,.11,12.73-4,29.23-8.82,37.65a73.1,73.1,0,0,0-19.85-24.92A28.3,28.3,0,0,0,334.77,84a58.2,58.2,0,1,0-81.9,53.16,27.7,27.7,0,0,1-12.62,22.6A84,84,0,0,1,276.58,0Z"/></g></g></svg>
}
<div className='api-subscription__value__type ms-2 ms-xl-0'>
{subscription.enabled ? translate("subscription.enable.label") : translate("subscription.disable.label")}
<div className={classNames('dot', {
enabled: subscription.enabled,
Expand All @@ -616,7 +611,7 @@ const ApiKeyCard = ({
<div className='api-subscription__infos'>
<div className='api-subscription__infos__name'>{_customName}</div>
<div className='api-subscription__infos__value'>{`${subscription.apiKey.clientId}:${subscription.apiKey.clientSecret}`}</div>
<div className='d-flex gap-2'>
<div className='d-flex gap-2 flex-column flex-md-row'>
<button className='btn btn-sm btn-outline-primary' onClick={() => {
navigator.clipboard
.writeText(`${subscription.apiKey.clientId}:${subscription.apiKey.clientSecret}`)
Expand Down

0 comments on commit 4177014

Please sign in to comment.