feature/FOUR-20314 Add clear user errors for Instance connections

ProcessMaker/Http/Controllers/Api/DevLinkController.php

@@ -55,13 +55,17 @@ public function show(DevLink $devLink)
     public function store(Request $request)
     {
         $request->validate([
-            'name' => ['required', 'unique:dev_links,name'],
-            'url' => ['required', 'url', 'unique:dev_links,url'],
+            'name' => ['required'],
+            'url' => ['required', 'url'],
         ]);
-
-        $devLink = new DevLink();
-        $devLink->name = $request->input('name');
-        $devLink->url = $request->input('url');
+        $devLink = DevLink::where('name', $request->input('name'))->first();
+        if ($devLink) {
+            $devLink->url = $request->input('url');
+        } else {
+            $devLink = new DevLink();
+            $devLink->name = $request->input('name');
+            $devLink->url = $request->input('url');
+        }
         $devLink->saveOrFail();
 
         return $devLink;
@@ -82,7 +86,11 @@ public function destroy(DevLink $devLink)
 
     public function ping(DevLink $devLink)
     {
-        return $devLink->client()->get(route('api.devlink.pong', [], false));
+        try {
+            return$devLink->client()->get(route('api.devlink.pong', [], false));
+        } catch (\Exception $e) {
+            return response()->json(['error' => 'DevLink connection error'], $e->getCode());
+        }
     }
 
     public function pong()

resources/js/admin/devlink/components/BundleSettingsModal.vue

@@ -38,7 +38,7 @@
   </b-modal>
 </template>
 <script setup>
-import { ref, onMounted, getCurrentInstance } from 'vue';
+import { ref } from 'vue';
 import { useRoute } from 'vue-router/composables';
 
 const emit = defineEmits(['settings-saved']);
@@ -58,7 +58,6 @@ const selectedIds = ref([]);
 const allSelected = ref(false);
 
 const onOk = async () => {
-  console.log(selectedIds.value);
   configs.value = {
     id: selectedIds.value,
   };
@@ -124,14 +123,6 @@ const toggleAll = () => {
   });
 };
 
-const refreshSettings = () => {
-  console.log('refreshSettings');
-};
-
-onMounted(() => {
-  //loadSettings();
-});
-
 defineExpose({
   show,
   hide,

resources/js/admin/devlink/components/CreateDevLinkModal.vue

@@ -0,0 +1,163 @@
+<template>
+    <b-modal
+      ref="createDevLinkModal"
+      id="create"
+      centered
+      size="lg"
+      :title="$t('Create new DevLink')"
+      @hidden="clear"
+      @ok="create"
+      :ok-title="$t('Create')"
+      :cancel-title="$t('Cancel')"
+    >
+      <div v-if="status === 'error'" class="alert alert-danger" role="alert">
+        <div class="alert-header">
+          <span class="icon">!</span>
+          <strong>Connection Error</strong>
+        </div>
+        <a href="#" @click.prevent="toggleDetails">{{ showDetails ? 'See Less Details' : 'See More Details' }}</a>
+        <ul v-show="showDetails">
+          <li>Please check your internet connection.</li>
+          <li>Verify if the server is available or try again later.</li>
+          <li>If the issue persists, contact support for assistance.</li>
+        </ul>
+      </div>
+      <div>
+        <b-form-group :label="$t('Please assign a name to the desired linked instance')">
+          <b-form-input v-model="newName" :readonly="status === 'error'" />
+        </b-form-group>
+        <p>{{ $t('We require the access token of the instance you want to connect. If the token is correct, you will have to log-in in the corresponding instance.') }}</p>
+        <b-form-group
+          :label="$t('Instance URL')"
+          :invalid-feedback="$t('Invalid URL')"
+          :state="urlIsValid"
+        >
+          <b-form-input v-model="newUrl"></b-form-input>
+        </b-form-group>
+      </div>
+    </b-modal>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+
+const props = defineProps({
+  newName: {
+    type: String,
+    required: true
+  },
+  newUrl: {
+    type: String,
+    required: true
+  },
+  urlIsValid: {
+    type: Boolean,
+    required: true
+  },
+  status: {
+    type: String,
+    default: ''
+  },
+  showDetails: {
+    type: Boolean,
+    default: false
+  }
+});
+const createDevLinkModal = ref(null);
+
+const newName = ref(props.newName);
+const newUrl = ref(props.newUrl);
+const emit = defineEmits(['clear', 'create', 'update:newUrl']);
+
+const showDetails = ref(false);
+
+const clear = () => {
+  newName.value = '';
+  newUrl.value = '';
+};
+
+const create = (e) => {
+  e.preventDefault();
+  if (props.urlIsValid) {
+    emit('create', newName.value, newUrl.value);
+    if (props.status === 'success') {
+      hide();
+    }
+  }
+};
+
+const show = () => {
+  if (createDevLinkModal.value) {
+    createDevLinkModal.value.show();
+  }
+};
+
+const hide = () => {
+  if (createDevLinkModal.value) {
+    createDevLinkModal.value.hide();
+  }
+};
+
+const toggleDetails = () => {
+  showDetails.value = !showDetails.value;
+};
+
+watch(newUrl, (newValue) => {
+  emit('update:newUrl', newValue);
+});
+
+defineExpose({
+  show,
+  hide,
+});
+</script>
+
+<style lang="scss" scoped>
+  @import "styles/components/modal";
+
+  .alert {
+    background-color: #FDF2F2;
+    border: 1px solid #FBD0D0;
+    color: #596372;
+    padding: 20px;
+    border-radius: 8px;
+    position: relative;
+    margin: 20px auto;
+    font-size: 14px;
+  }
+
+  .alert-header {
+    display: flex;
+    align-items: center;
+  }
+
+  .alert .icon {
+    font-weight: bold;
+    color: #EC5962;
+    border: 1px solid #EC5962;
+    border-radius: 50%;
+    margin-right: 10px;
+    padding: 1px 7px;
+    font-size: 10px;
+  }
+
+  .alert strong {
+    margin-bottom: 0;
+  }
+
+  .alert ul {
+    margin: 10px 0 0 0;
+    padding-left: 20px;
+    list-style-type: disc;
+  }
+
+  .alert a {
+    color: #007bff;
+    cursor: pointer;
+    text-decoration: none;
+  }
+
+  .alert a:hover {
+    text-decoration: underline;
+  }
+</style>

resources/js/admin/devlink/components/Index.vue

@@ -5,6 +5,7 @@ import debounce from 'lodash/debounce';
 import Status from './Status.vue';
 import EllipsisMenu from '../../../components/shared/EllipsisMenu.vue';
 import DeleteModal from './DeleteModal.vue';
+import CreateDevLinkModal from './CreateDevLinkModal.vue';
 import { store } from '../common';
 
 const vue = getCurrentInstance().proxy;
@@ -13,6 +14,7 @@ const route = useRoute();
 const devlinks = ref([]);
 const editModal = ref(null);
 const deleteModal = ref(null);
+const createDevLinkModal = ref(null);
 const deleteWarningTitle = ref(vue.$t("Delete Confirmation"));
 const filter = ref("");
 const actions = [
@@ -53,6 +55,7 @@ onMounted(() => {
 
 const newName = ref('');
 const newUrl = ref('');
+const status = ref('');
 
 const load = () => {
   ProcessMaker.apiClient
@@ -78,16 +81,12 @@ const clear = () => {
   newUrl.value = '';
 }
 
-const create = (e) => {
-  if (!urlIsValid.value) {
-    e.preventDefault();
-    return;
-  }
-
+const create = (name, url) => {
+  status.value = '';
   ProcessMaker.apiClient
     .post('/devlink', {
-      name: newName.value,
-      url: newUrl.value
+      name: name,
+      url: url
     })
     .then((result) => {
       const newUrl = result.data.url;
@@ -97,7 +96,22 @@ const create = (e) => {
         devlink_id: newId,
         redirect_uri: redirectUri,
       };
-      window.location.href = `${newUrl}/admin/devlink/oauth-client?${new URLSearchParams(params).toString()}`;
+      const fullUrl = `${newUrl}/admin/devlink/oauth-client?${new URLSearchParams(params).toString()}`;
+
+      ProcessMaker.apiClient
+        .get(`devlink/${newId}/ping`)
+        .then((response) => {
+          status.value = 'success';
+          window.location.href = fullUrl;
+        })
+        .catch((e) => {
+          if (e.response.status === 401) {
+            status.value = 'success';
+            window.location.href = fullUrl;
+          } else {
+            status.value = 'error';
+          }
+        });
     });
 };
 
@@ -146,6 +160,15 @@ const handleFilterChange = () => {
   debouncedLoad();
 };
 
+const showCreateModal = () => {
+  status.value = '';
+  createDevLinkModal.value.show();
+};
+
+const handleNewUrlUpdate = (newValue) => {
+  newUrl.value = newValue;
+};
+
 const urlIsValid = computed(() => {
   return /^(https?:\/\/[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})(:\d{1,5})?$/.test(newUrl.value);
 });
@@ -161,15 +184,15 @@ const urlIsValid = computed(() => {
       <div class="col-2">
         <b-button
           variant="primary"
-          v-b-modal.create
+          @click="showCreateModal"
           class="new-button"
         >
           <i class="fas fa-plus-circle" style="padding-right: 8px;"></i>{{ $t('Add Instance') }}
         </b-button>
       </div>
     </div>
 
-    <b-modal
+    <!-- <b-modal
       id="create"
       centered
       :title="$t('Create new DevLink')"
@@ -188,7 +211,17 @@ const urlIsValid = computed(() => {
       >
         <b-form-input v-model="newUrl"></b-form-input>
       </b-form-group>
-    </b-modal>
+    </b-modal> -->
+    <CreateDevLinkModal
+      ref="createDevLinkModal"
+      :newName="newName"
+      :newUrl="newUrl"
+      :urlIsValid="urlIsValid"
+      :status="status"
+      @clear="clear"
+      @create="create"
+      @update:newUrl="handleNewUrlUpdate"
+    />
 
     <b-modal
       ref="editModal"