Merge branch 'vis-move-mounted-fn-to-watchers' into 'master'

Move Ci pipeline graph mounted logic to an immediate watcher

See merge request gitlab-org/gitlab!51388

app/assets/javascripts/pipelines/components/pipeline_graph/pipeline_graph.vue

@@ -126,33 +126,22 @@ export default {
     },
   },
   watch: {
-    isPipelineDataEmpty: {
+    pipelineData: {
       immediate: true,
-      handler(isDataEmpty) {
-        if (isDataEmpty) {
+      handler() {
+        if (this.isPipelineDataEmpty) {
           this.reportFailure(EMPTY_PIPELINE_DATA);
-        }
-      },
-    },
-    isInvalidCiConfig: {
-      immediate: true,
-      handler(isInvalid) {
-        if (isInvalid) {
+        } else if (this.isInvalidCiConfig) {
           this.reportFailure(INVALID_CI_CONFIG);
+        } else {
+          this.$nextTick(() => {
+            this.computeGraphDimensions();
+            this.prepareLinkData();
+          });
         }
       },
     },
   },
-  mounted() {
-    if (!this.isPipelineDataEmpty && !this.isInvalidCiConfig) {
-      // This guarantee that all sub-elements are rendered
-      // https://v3.vuejs.org/api/options-lifecycle-hooks.html#mounted
-      this.$nextTick(() => {
-        this.getGraphDimensions();
-        this.prepareLinkData();
-      });
-    }
-  },
   methods: {
     prepareLinkData() {
       try {
@@ -194,7 +183,7 @@ export default {
     removeHighlightNeeds() {
       this.highlightedJob = null;
     },
-    getGraphDimensions() {
+    computeGraphDimensions() {
       this.width = `${this.$refs[this.$options.CONTAINER_REF].scrollWidth}`;
       this.height = `${this.$refs[this.$options.CONTAINER_REF].scrollHeight}`;
     },