From 841a5845dc3d77bf5475d95892acd62a0251d722 Mon Sep 17 00:00:00 2001
From: Helene Amouzou <helene.amouzou@clever-cloud.com>
Date: Tue, 15 Oct 2024 16:14:51 +0200
Subject: [PATCH] feat(cc-ssh-key-list): move doc link into `cc-block` footer
 slot

---
 .../cc-ssh-key-list/cc-ssh-key-list.js        | 32 ++++++++++++-------
 src/translations/translations.en.js           |  3 +-
 src/translations/translations.fr.js           |  3 +-
 3 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/src/components/cc-ssh-key-list/cc-ssh-key-list.js b/src/components/cc-ssh-key-list/cc-ssh-key-list.js
index b2ebb1f60..fe74efde0 100644
--- a/src/components/cc-ssh-key-list/cc-ssh-key-list.js
+++ b/src/components/cc-ssh-key-list/cc-ssh-key-list.js
@@ -5,6 +5,7 @@ import { repeat } from 'lit/directives/repeat.js';
 import {
   iconRemixAddCircleFill as iconAdd,
   iconRemixDeleteBin_5Fill as iconBin,
+  iconRemixInformationFill as iconInfo,
   iconRemixKey_2Fill as iconKey,
 } from '../../assets/cc-remix.icons.js';
 import { LostFocusController } from '../../controllers/lost-focus-controller.js';
@@ -15,6 +16,7 @@ import { formSubmit } from '../../lib/form/form-submit-directive.js';
 import { Validation } from '../../lib/form/validation.js';
 import { sortBy } from '../../lib/utils.js';
 import { skeletonStyles } from '../../styles/skeleton.js';
+import { ccLink, linkStyles } from '../../templates/cc-link/cc-link.js';
 import { i18n } from '../../translations/translation.js';
 import '../cc-badge/cc-badge.js';
 import '../cc-block-section/cc-block-section.js';
@@ -25,6 +27,8 @@ import '../cc-img/cc-img.js';
 import '../cc-input-text/cc-input-text.js';
 import '../cc-notice/cc-notice.js';
 
+const SSH_KEY_DOCUMENTATION = 'https://developers.clever-cloud.com/doc/account/ssh-keys-management/';
+
 /**
  * @type {SshKeyState[]}
  */
@@ -151,10 +155,10 @@ export class CcSshKeyList extends LitElement {
   render() {
     return html`
       <cc-block>
-        <div slot="title">${i18n('cc-ssh-key-list.title')}</div>
+        <div slot="header-title">${i18n('cc-ssh-key-list.title')}</div>
 
         <!-- creation form -->
-        <cc-block-section>
+        <cc-block-section slot="content">
           <div slot="title">${i18n('cc-ssh-key-list.add.title')}</div>
           <div slot="info">${i18n('cc-ssh-key-list.add.info')}</div>
 
@@ -162,7 +166,7 @@ export class CcSshKeyList extends LitElement {
         </cc-block-section>
 
         <!-- personal keys -->
-        <cc-block-section>
+        <cc-block-section slot="content">
           <div slot="title">
             <span>${i18n('cc-ssh-key-list.personal.title')}</span>
             ${this.keyData.state === 'loaded' && this.keyData.personalKeys.length > 2
@@ -190,7 +194,7 @@ export class CcSshKeyList extends LitElement {
         </cc-block-section>
 
         <!-- GitHub keys -->
-        <cc-block-section>
+        <cc-block-section slot="content">
           <div slot="title">
             <span>${i18n('cc-ssh-key-list.github.title')}</span>
             ${this.keyData.state === 'loaded' && this.keyData.isGithubLinked && this.keyData.githubKeys.length > 2
@@ -220,10 +224,12 @@ export class CcSshKeyList extends LitElement {
             : ''}
         </cc-block-section>
 
-        <!-- documentation link -->
-        <cc-block-section>
-          <div class="align-end">${i18n('cc-ssh-key-list.doc.info')}</div>
-        </cc-block-section>
+        <div slot="footer-right">
+          ${ccLink(
+            SSH_KEY_DOCUMENTATION,
+            html`<cc-icon .icon="${iconInfo}"></cc-icon> ${i18n('cc-ssh-key-list.documentation.text')}`,
+          )}
+        </div>
       </cc-block>
     `;
   }
@@ -347,6 +353,7 @@ export class CcSshKeyList extends LitElement {
   static get styles() {
     return [
       skeletonStyles,
+      linkStyles,
       // language=CSS
       css`
         /* region global */
@@ -475,10 +482,13 @@ export class CcSshKeyList extends LitElement {
           margin-top: 1em;
         }
 
-        .align-end {
-          text-align: end;
-        }
         /* endregion */
+
+        [slot='footer-right'] .cc-link {
+          align-items: center;
+          display: flex;
+          gap: 0.5em;
+        }
       `,
     ];
   }
diff --git a/src/translations/translations.en.js b/src/translations/translations.en.js
index 96ff9cb4f..70922c6a2 100644
--- a/src/translations/translations.en.js
+++ b/src/translations/translations.en.js
@@ -1101,8 +1101,7 @@ export const translations = {
   'cc-ssh-key-list.add.name': `Name`,
   'cc-ssh-key-list.add.public-key': `Public key`,
   'cc-ssh-key-list.add.title': `Add a new key`,
-  'cc-ssh-key-list.doc.info': () =>
-    sanitize`If you need any help, head up to our <a href="https://www.clever-cloud.com/doc/admin-console/ssh-keys/">documentation</a>.`,
+  'cc-ssh-key-list.documentation.text': `SSH keys - Documentation`,
   'cc-ssh-key-list.error.add': /** @param {{name: string}} _ */ ({ name }) =>
     `An error occurred while adding your new personal key "${name}".`,
   'cc-ssh-key-list.error.delete': /** @param {{name: string}} _ */ ({ name }) =>
diff --git a/src/translations/translations.fr.js b/src/translations/translations.fr.js
index 138574c81..a5432861f 100644
--- a/src/translations/translations.fr.js
+++ b/src/translations/translations.fr.js
@@ -1124,8 +1124,7 @@ export const translations = {
   'cc-ssh-key-list.add.name': `Nom`,
   'cc-ssh-key-list.add.public-key': `Clé publique`,
   'cc-ssh-key-list.add.title': `Ajouter une nouvelle clé`,
-  'cc-ssh-key-list.doc.info': () =>
-    sanitize`Pour plus d'aide, vous pouvez consulter notre <a href="https://www.clever-cloud.com/doc/admin-console/ssh-keys/">documentation (en anglais)</a>.`,
+  'cc-ssh-key-list.documentation.text': `Clés SSH - Documentation`,
   'cc-ssh-key-list.error.add': /** @param {{name: string}} _ */ ({ name }) =>
     `Une erreur est survenue pendant l'ajout de votre nouvelle clé personnelle "${name}".`,
   'cc-ssh-key-list.error.delete': /** @param {{name: string}} _ */ ({ name }) =>