From a9a3b79253eddd2058bd6e093ebac64f91a7f5e7 Mon Sep 17 00:00:00 2001
From: Philipp Ossler <philipp.ossler@gmail.com>
Date: Tue, 7 Feb 2023 06:26:50 +0100
Subject: [PATCH] feat: highlight connectors on the home page

---
 src/main/resources/templates/views/home.html | 49 ++++++++++++++++----
 1 file changed, 40 insertions(+), 9 deletions(-)

diff --git a/src/main/resources/templates/views/home.html b/src/main/resources/templates/views/home.html
index cef2c39d..395e5ff1 100644
--- a/src/main/resources/templates/views/home.html
+++ b/src/main/resources/templates/views/home.html
@@ -45,7 +45,9 @@ <h5 class="card-header">
     <div class="col">
       <div class="card h-100">
         <h5 class="card-header">
-          <svg class="bi" width="32" height="32"><use xlink:href="/img/bootstrap-icons.svg#play"/></svg>
+          <svg class="bi" width="32" height="32">
+            <use xlink:href="/img/bootstrap-icons.svg#play"/>
+          </svg>
           Drive the process instance
         </h5>
         <div class="card-body">
@@ -96,13 +98,17 @@ <h5 class="card-header">
         <ul class="list-group list-group-flush">
           <li class="list-group-item">
             <button class="btn btn-sm btn-primary" onclick="deployDemo();">
-              <svg class="bi" width="18" height="18" fill="white"><use xlink:href="/img/bootstrap-icons.svg#upload"/></svg>
+              <svg class="bi" width="18" height="18" fill="white">
+                <use xlink:href="/img/bootstrap-icons.svg#upload"/>
+              </svg>
             </button>
             First, deploy the demo process
           </li>
           <li class="list-group-item">
             <button id="demo-create-instance-button" class="btn btn-sm btn-primary" disabled>
-              <svg class="bi" width="18" height="18" fill="white"><use xlink:href="/img/bootstrap-icons.svg#play"/></svg>
+              <svg class="bi" width="18" height="18" fill="white">
+                <use xlink:href="/img/bootstrap-icons.svg#play"/>
+              </svg>
             </button>
             Then, create a new process instance
           </li>
@@ -113,16 +119,18 @@ <h5 class="card-header">
     <div class="col">
       <div class="card h-100">
         <h5 class="card-header">
-          <svg class="bi" width="32" height="32"><use xlink:href="/img/bootstrap-icons.svg#person"/></svg>
-           User forms
-          <span class="badge bg-success">New</span>
+          <svg class="bi" width="32" height="32">
+            <use xlink:href="/img/bootstrap-icons.svg#person"/>
+          </svg>
+          User forms
         </h5>
         <div class="card-body">
           <p class="card-text">
-            If a user task <span class="bpmn-icon-user-task fs-3"></span> defines a Camunda form,
-            you can click on
+            Select a user task <span class="bpmn-icon-user-task fs-3"></span> with a <a
+              href="https://docs.camunda.io/docs/guides/utilizing-forms/" target="_blank">Camunda
+            form</a> and click on
             <button type="button" class="btn btn-sm btn-primary">
-              <img width="18" height="18" style="margin-top:-4px;" src="/img/edit-form.svg" />
+              <img width="18" height="18" style="margin-top:-4px;" src="/img/edit-form.svg"/>
             </button>
             to see the form and fill it out. The user task gets completed with the form data.
           </p>
@@ -130,6 +138,29 @@ <h5 class="card-header">
       </div>
     </div>
 
+    <div class="col">
+      <div class="card h-100">
+        <h5 class="card-header">
+          <svg class="bi" width="32" height="32">
+            <use xlink:href="/img/bootstrap-icons.svg#plugin"/>
+          </svg>
+          Connectors
+          <span class="badge bg-success">New</span>
+        </h5>
+        <div class="card-body">
+          <p class="card-text">
+            A task <span class="bpmn-icon-service-task fs-3"></span> can be defined as a <a
+              href="https://docs.camunda.io/docs/components/connectors/use-connectors/"
+              target="_blank">connector</a>. If the connector is available, the task gets completed
+            automatically.
+          </p>
+          <p class="card-text">
+            Go to <a href="/view/connectors">connectors</a> and see the available connectors.
+          </p>
+        </div>
+      </div>
+    </div>
+
   </div>
 </div>