feat(web): associate a repository

ref: MANAGER-14064 Signed-off-by: Antony MARION <antony.marion.ext@ovhcloud.com>
ovh · Jun 26, 2024 · 85e9ed3 · 85e9ed3
1 parent 70109c7
commit 85e9ed3
Show file tree

Hide file tree

Showing 7 changed files with 138 additions and 31 deletions.
diff --git a/...ient/app/hosting/multisite/git-association/hosting-multisite-git-association.component.js b/...ient/app/hosting/multisite/git-association/hosting-multisite-git-association.component.js
@@ -4,8 +4,12 @@ import template from './hosting-multisite-git-association.html';
 export default {
   bindings: {
     sshKey: '<',
+    path: '<',
+    status: '<',
+    alertId: '<',
     serviceName: '<',
     goBack: '<',
+    webHookUrl: '<',
   },
   controller,
   template,

diff --git a/...ient/app/hosting/multisite/git-association/hosting-multisite-git-association.constants.js b/...ient/app/hosting/multisite/git-association/hosting-multisite-git-association.constants.js
@@ -5,7 +5,6 @@ export const EXAMPLE_HTTPS_REPOSITORY_URL =
 export const EXAMPLE_SSH_REPOSITORY_URL = 'git@github.com/username/';
 export const EXAMPLE_BRANCHES_NAMES = '"main", "master", ...';
 export const GITHUB_VCS = 'github';
-export const PATH_PREFIX = '[www]';
 export const REGEX_GIT_REPO = /^[https:\\/\\/|git:\\/\\/].*/;
 
 export default {
@@ -14,6 +13,5 @@ export default {
   EXAMPLE_BRANCHES_NAMES,
   EXAMPLE_SSH_REPOSITORY_URL,
   GITHUB_VCS,
-  PATH_PREFIX,
   REGEX_GIT_REPO,
 };
diff --git a/...ent/app/hosting/multisite/git-association/hosting-multisite-git-association.controller.js b/...ent/app/hosting/multisite/git-association/hosting-multisite-git-association.controller.js
@@ -5,18 +5,20 @@ import {
   EXAMPLE_SSH_REPOSITORY_URL,
   GITHUB_VCS,
   REGEX_GIT_REPO,
-  PATH_PREFIX,
 } from './hosting-multisite-git-association.constants';
 
 export default class HostingMultisiteGitAssociationController {
   /* @ngInject */
-  constructor(HostingMultisiteGitAssociationService, coreURLBuilder) {
+  constructor(
+    HostingMultisiteGitAssociationService,
+    coreURLBuilder,
+    $translate,
+  ) {
     this.REPOSITORY_PLACEHOLDER = REPOSITORY_PLACEHOLDER;
     this.EXAMPLE_BRANCHES_NAMES = EXAMPLE_BRANCHES_NAMES;
     this.EXAMPLE_HTTPS_REPOSITORY_URL = EXAMPLE_HTTPS_REPOSITORY_URL;
     this.GITHUB_VCS = GITHUB_VCS;
     this.EXAMPLE_SSH_REPOSITORY_URL = EXAMPLE_SSH_REPOSITORY_URL;
-    this.PATH_PREFIX = PATH_PREFIX;
     this.REGEX_GIT_REPO = REGEX_GIT_REPO;
     this.HostingMultisiteGitAssociationService = HostingMultisiteGitAssociationService;
     this.model = {
@@ -25,27 +27,37 @@ export default class HostingMultisiteGitAssociationController {
       webhookUrl: '',
     };
     this.coreURLBuilder = coreURLBuilder;
+    this.$translate = $translate;
   }
 
   $onInit() {
-    this.errorMessage = !this.sshKey;
     this.ongoingTasksHref = this.coreURLBuilder.buildURL(
       'web',
       `#/hosting/${this.serviceName}/task`,
     );
+    this.model.webhookUrl = this.webHookUrl;
   }
 
   applyConfiguration() {
-    this.HostingMultisiteGitAssociationService.getVcsWebhookUrls(
+    this.HostingMultisiteGitAssociationService.postWebsiteAssociated(
       this.serviceName,
-      this.path,
-      this.GITHUB_VCS,
+      this.path, // www for instance
+      this.model.branchName,
+      this.model.repositoryUrl,
     )
-      .then(({ push }) => {
-        this.model.webhookUrl = push;
+      .then(() => {
+        const message = this.$translate.instant(
+          'hosting_multisite_git_association_success_message',
+          { href: this.ongoingTasksHref },
+        );
+        this.goBack(message);
       })
-      .catch(({ status }) => {
-        this.statusCode = status;
+      .catch(({ data: { message } }) => {
+        const translatedMessage = this.$translate.instant(
+          'hosting_multisite_git_association_error_message',
+          { errorMessage: message },
+        );
+        this.goBack(translatedMessage, 'error');
       });
   }
 }
diff --git a/...s/web/client/app/hosting/multisite/git-association/hosting-multisite-git-association.html b/...s/web/client/app/hosting/multisite/git-association/hosting-multisite-git-association.html
@@ -1,26 +1,24 @@
 <oui-back-button data-on-click="$ctrl.goBack()"></oui-back-button>
 
-<oui-message data-type="error" data-ng-if="$ctrl.errorMessage">
+<oui-message data-type="error" data-ng-if="!$ctrl.sshKey" data-dismissable>
     <p
-        data-ng-if="$ctrl.statusCode===500"
         data-translate="hosting_multisite_git_association_ssh_key_internal_error_message"
     ></p>
-    <p
-        data-ng-if="$ctrl.statusCode!==500"
-        data-ng-bind-html="$ctrl.errorMessage"
-    ></p>
 </oui-message>
 
-<oui-message data-type="success" data-ng-if="!$ctrl.errorMessagee">
+<oui-message
+    data-type="error"
+    data-ng-if="$ctrl.status==='error'"
+    data-dismissable
+>
     <p
-        data-translate="hosting_multisite_git_association_ssh_key_success_message"
-        data-translate-values="{href: $ctrl.ongoingTasksHref}"
+        data-translate="hosting_multisite_git_association_apply_configuration_status_error"
     ></p>
 </oui-message>
 
 <h1
     data-translate="hosting_multisite_git_association_title"
-    data-translate-value="{path: $ctrl.PATH_PREFIX}"
+    data-translate-value="{path: '[' + $ctrl.path + ']'}"
 ></h1>
 <p data-translate="hosting_multisite_git_association_configure_description"></p>
 
@@ -34,7 +32,10 @@ <h3 data-translate="hosting_multisite_git_association_ssh_key"></h3>
             class="col-md-4"
             data-label="{{ ::'hosting_multisite_git_association_ssh_key' | translate }}"
         >
-            <oui-clipboard data-model=":: $ctrl.sshKey"></oui-clipboard>
+            <oui-clipboard
+                name="sshKey"
+                data-model=":: $ctrl.sshKey"
+            ></oui-clipboard>
         </oui-field>
     </div>
     <h3 data-translate="hosting_multisite_git_association_configure"></h3>
@@ -72,6 +73,9 @@ <h3 data-translate="hosting_multisite_git_association_configure"></h3>
         <oui-field
             class="col-md-4"
             data-label="{{ ::'hosting_multisite_git_association_repository' | translate }}"
+            data-error-messages="{
+                pattern: ('hosting_multisite_git_association_incorrect_url_format' | translate)
+            }"
         >
             <div class="d-flex oui-input-group oui-input-group_inline">
                 <input
@@ -132,7 +136,10 @@ <h3 data-translate="hosting_multisite_git_association_configure_auto"></h3>
             class="col-md-4"
             data-label="{{ ::'hosting_multisite_git_association_webhook_url' | translate }}"
         >
-            <oui-clipboard data-model="$ctrl.model.webhookUrl"></oui-clipboard>
+            <oui-clipboard
+                name="webhookUrl"
+                data-model="$ctrl.model.webhookUrl"
+            ></oui-clipboard>
         </oui-field>
     </div>
 </form>

diff --git a/...client/app/hosting/multisite/git-association/hosting-multisite-git-association.routing.js b/...client/app/hosting/multisite/git-association/hosting-multisite-git-association.routing.js
@@ -1,16 +1,63 @@
+import { GITHUB_VCS } from './hosting-multisite-git-association.constants';
+
 export default /* @ngInject */ ($stateProvider) => {
   $stateProvider.state('app.hosting.dashboard.git', {
     url: '/multisite/git-association',
     component: 'hostingMultisiteGitAssociationComponent',
     resolve: {
-      goBack: /* @ngInject */ ($state, $transition$) => () =>
-        $state.go('app.hosting.dashboard.multisite', {
-          productId: $transition$.params().productId,
-        }),
+      goBack: /* @ngInject */ ($transition$, $state, $timeout, setMessage) => (
+        message,
+        type,
+      ) => {
+        const promise = $state.go(
+          'app.hosting.dashboard.multisite',
+          {
+            productId: $transition$.params().productId,
+          },
+          { reload: true },
+        );
+        if (message) {
+          promise.then(() => $timeout(() => setMessage(message, type)));
+        }
+
+        return promise;
+      },
+      setMessage: /* @ngInject */ (
+        Alerter,
+        $translate,
+        coreURLBuilder,
+        alertId,
+        serviceName,
+      ) => (message, type = 'success') => {
+        if (type === 'error') {
+          return Alerter.alertFromSWS(
+            $translate.instant(
+              'hosting_multisite_git_association_error_message',
+              { errorMessage: message },
+            ),
+            message,
+            alertId,
+          );
+        }
+        return Alerter.success(
+          $translate.instant(
+            'hosting_multisite_git_association_success_message',
+            {
+              href: coreURLBuilder.buildURL(
+                'web',
+                `#/hosting/${serviceName}/task`,
+              ),
+            },
+          ),
+          alertId,
+        );
+      },
       breadcrumb: /* @ngInject */ ($translate) =>
         $translate.instant('hosting_multisite'),
       serviceName: /* @ngInject */ ($transition$) =>
         $transition$.params().productId,
+      status: /* @ngInject */ ($transition$) => $transition$.params().status,
+      alertId: /* @ngInject */ ($transition$) => $transition$.params().alertId,
       path: /* @ngInject */ (Hosting, serviceName) =>
         Hosting.getSelected(serviceName, true).then(
           (hosting) => hosting.displayName,
@@ -19,6 +66,18 @@ export default /* @ngInject */ ($stateProvider) => {
         HostingMultisiteGitAssociationService,
         serviceName,
       ) => HostingMultisiteGitAssociationService.getSshKey(serviceName),
+      webHookUrl: /* @ngInject */ (
+        HostingMultisiteGitAssociationService,
+        serviceName,
+        path,
+      ) =>
+        HostingMultisiteGitAssociationService.getVcsWebhookUrls(
+          serviceName,
+          path,
+          GITHUB_VCS,
+        ).then(({ push }) => {
+          return push;
+        }),
     },
   });
 };
diff --git a/...client/app/hosting/multisite/git-association/hosting-multisite-git-association.service.js b/...client/app/hosting/multisite/git-association/hosting-multisite-git-association.service.js
@@ -19,6 +19,30 @@ export default class HostingMultisiteGitAssociationService {
         }
         throw error;
       })
-      .then(({ data }) => data.publicKey);
+      .then(({ data }) => data.publicKey)
+      .catch((error) => {
+        if (error.status === 500) {
+          return null;
+        }
+        throw error;
+      });
+  }
+
+  getWebsitesAssociated(serviceName, path) {
+    return this.$http.put(`/hosting/web/${serviceName}/website?path=${path}`);
+  }
+
+  putWebsiteAssociated(serviceName, vcsBranch, id) {
+    return this.$http.put(`/hosting/web/${serviceName}/website/${id}`, {
+      vcsBranch,
+    });
+  }
+
+  postWebsiteAssociated(serviceName, path, vcsBranch, vcsUrl) {
+    return this.$http.post(`/hosting/web/${serviceName}/website`, {
+      path,
+      vcsBranch,
+      vcsUrl,
+    });
   }
 }
diff --git a/packages/manager/apps/web/client/app/hosting/multisite/translations/Messages_fr_FR.json b/packages/manager/apps/web/client/app/hosting/multisite/translations/Messages_fr_FR.json
@@ -13,9 +13,12 @@
   "hosting_multisite_statistics_changing_datavis_tool": "L'outil de visualisation des statistiques de votre CDN évolue. Retrouvez désormais vos données <b>sur la page OVHcloud Web Statistics</b> pour vous aider à suivre et piloter le trafic de vos sites web",
   "hosting_multisite_git_association_title": "Configurer votre Git pour votre répertoire {{ path }}",
   "hosting_multisite_git_association_ssh_key": "Clé SSH",
+  "hosting_multisite_git_association_incorrect_url_format": "Le format de l'url n'est pas correct",
   "hosting_multisite_git_association_ssh_url_repo_help": "Indiquer l'URL de votre dépôt Git ({{ httpsRepo }}) ou si SSH est activé ({{ sshRepo }})",
   "hosting_multisite_git_association_ssh_key_internal_error_message": "La génération de votre clé SSH a échoué, veuillez ré-essayer ultérieurement ou contacter le support",
-  "hosting_multisite_git_association_ssh_key_success_message": "Git est en cours d’activation. Vous pouvez suivre son activation depuis les tâches en cours <a href=\"{{ href }}\">Tâches en cours</a>",
+  "hosting_multisite_git_association_apply_configuration_status_error": "Votre dernière configuration a échoué. Afin de configurer Git, vous devez à nouveau appliquer votre configuration.",
+  "hosting_multisite_git_association_error_message": "Git n'a pas pu être activé {{ errorMessage }}",
+  "hosting_multisite_git_association_success_message": "Git est en cours d’activation. Vous pouvez suivre son activation depuis les tâches en cours <a href=\"{{ href }}\">Tâches en cours</a>",
   "hosting_multisite_git_association_ssh_branches_names": "Indiquer le nom de la branche de votre dépôt qui sera répliqué ({{ branchesNames }})",
   "hosting_multisite_git_association_configure": "Configurer votre déploiement",
   "hosting_multisite_git_association_configure_auto": "Configurer votre déploiement automatique",