Merge pull request #5 from Lightning-Flow-Scanner/feature/improve-lfs…

…-experience

feat: implement loading, sorting improvements and no flow smells

lfs-app/main/default/lwc/flowOverview/flowOverview.html

@@ -13,6 +13,9 @@
         columns={columns}
         hide-checkbox-column="true"
         onrowaction={handleRowAction}
+        default-sort-direction={sortDirection}
+        sorted-by={sortedBy}
+        onsort={sortRecords}
       >
       </lightning-datatable>
     </template>

lfs-app/main/default/lwc/flowOverview/flowOverview.js

@@ -2,25 +2,59 @@ import { LightningElement, api, track } from "lwc";
 import { NavigationMixin } from "lightning/navigation";
 
 export default class FlowOverview extends NavigationMixin(LightningElement) {
-  @api records = [];
+  @api
+  get records() {
+    return this._data;
+  }
+  set records(value) {
+    this._data = [...value];
+  }
+
+  @track _data = [];
+
   @track err;
-  @track columns = [
-    { label: "Label", fieldName: "masterLabel", type: "text" },
+
+  sortedBy = "lastModifiedDate";
+  sortedDirection = "desc";
+  columns = [
+    { label: "Label", fieldName: "masterLabel", type: "text", sortable: true },
     {
       label: "API Name",
       fieldName: "developerNameUrl",
       type: "url",
       typeAttributes: {
         label: { fieldName: "developerName" },
         target: "_blank"
-      }
+      },
+      sortable: true
     },
     { label: "Process Type", fieldName: "processType", type: "text" },
+    { label: "Description", fieldName: "flowDescription", type: "text" },
     {
       label: "Is Active",
       fieldName: "isActive",
       type: "boolean",
-      cellAttributes: { alignment: "center" }
+      cellAttributes: { alignment: "center" },
+      sortable: true
+    },
+    {
+      label: "Last Modified Date",
+      fieldName: "lastModifiedDate",
+      type: "date",
+      typeAttributes: {
+        year: "numeric",
+        month: "long",
+        day: "2-digit",
+        hour: "2-digit",
+        minute: "2-digit"
+      },
+      sortable: true
+    },
+    {
+      label: "Last Modified By",
+      fieldName: "lastModifiedBy",
+      type: "text",
+      sortable: true
     },
     {
       type: "button",
@@ -33,6 +67,32 @@ export default class FlowOverview extends NavigationMixin(LightningElement) {
     }
   ];
 
+  reverseDirection = {
+    asc: "desc",
+    desc: "asc"
+  };
+
+  sortRecords(event) {
+    const fieldName = event.detail.fieldName;
+    const sortDirection = this.reverseDirection[this.sortedDirection] ?? "desc";
+    const sortData = () => {
+      let parseData = JSON.parse(JSON.stringify(this.records));
+      const keyValue = (a) => {
+        return a[fieldName];
+      };
+      const isReverse = sortDirection === "asc" ? 1 : -1;
+      parseData.sort((x, y) => {
+        x = keyValue(x) ? keyValue(x) : "";
+        y = keyValue(y) ? keyValue(y) : "";
+        return isReverse * ((x > y) - (y > x));
+      });
+      return parseData;
+    };
+    this._data = [...sortData()];
+    this.sortedBy = fieldName;
+    this.sortedDirection = sortDirection;
+  }
+
   handleRowAction(event) {
     const actionName = event.detail.action.name;
     const row = event.detail.row;

lfs-app/main/default/lwc/lightningFlowScanner/lightningFlowScanner.html

@@ -17,15 +17,15 @@
               <strong>Type:</strong> {flow.processType}
             </div>
             <div class="info-item">
-              <strong>API Version:</strong> {flow.apiVersion}
+              <strong>API Version:</strong> {flow.xmldata.apiVersion}
             </div>
             <div class="info-item">
               <strong># Rules Run:</strong> {numberOfRules}
             </div>
           </div>
         </div>
         <div class="description">
-          <strong>Description:</strong> {flow.description}
+          <strong>Description:</strong> {flow.xmldata.description}
         </div>
       </div>
     </template>
@@ -58,6 +58,11 @@
             </template>
           </tbody>
         </table>
+        <template lwc:if={noViolations}>
+          <div class="slds-align_absolute-center slds-text-heading_large">
+            Well done 👏👏👏 0 flow smells found 🚀🚀🚀
+          </div>
+        </template>
       </div>
     </template>
 

lfs-app/main/default/lwc/lightningFlowScanner/lightningFlowScanner.js

@@ -27,7 +27,6 @@ export default class LightningFlowScanner extends LightningElement {
           this.flow = {
             ...new lightningflowscanner.Flow(this.name, this.metadata) // eslint-disable-line no-undef
           };
-
           let uri = "/services/data/v61.0/tooling/sobjects/Flow/" + this.id;
           let parsedFlow = { uri, flow: this.flow };
           try {
@@ -76,6 +75,10 @@ export default class LightningFlowScanner extends LightningElement {
     return this.isLoaded && (this.scanResult?.ruleResults?.length > 0 ?? false);
   }
 
+  get noViolations() {
+    return !this.scanResult?.ruleResults?.find((rule) => rule.occurs);
+  }
+
   get flowName() {
     return this.isLoaded && (this.flow?.name ?? "");
   }

lfs-app/main/default/lwc/lightningFlowScannerApp/lightningFlowScannerApp.html

@@ -1,6 +1,7 @@
 <template>
   <div class="container">
-    <main>
+    <lightning-spinner lwc:if={isLoading} size="large"></lightning-spinner>
+    <main lwc:else>
       <ul class="tabs">
         <li class={FlowsClass} data-tab="1" onclick={handleTabClick}>Flows</li>
         <li class={AnalysisClass} data-tab="2" onclick={handleTabClick}>

lfs-app/main/default/lwc/lightningFlowScannerApp/lightningFlowScannerApp.js

@@ -13,6 +13,8 @@ export default class lightningFlowScannerApp extends LightningElement {
   @track flowName;
   conn;
 
+  isLoading = false;
+
   get isTab1Active() {
     return this.activeTab === 1;
   }
@@ -42,24 +44,29 @@ export default class lightningFlowScannerApp extends LightningElement {
       });
 
       const res = await this.conn.tooling.query(
-        `SELECT Id, DeveloperName, ActiveVersionId, LatestVersionId, ActiveVersion.Status, ActiveVersion.MasterLabel, ActiveVersion.ProcessType, LatestVersion.Status, LatestVersion.MasterLabel, LatestVersion.ProcessType FROM FlowDefinition`
+        `SELECT Id, DeveloperName, Description, LatestVersion.Description, ActiveVersion.Description, LatestVersion.LastModifiedDate, ActiveVersion.LastModifiedDate, LatestVersion.LastModifiedBy.Name, ActiveVersion.LastModifiedBy.Name, ActiveVersionId, LatestVersionId, ActiveVersion.Status, ActiveVersion.MasterLabel, ActiveVersion.ProcessType, LatestVersion.Status, LatestVersion.MasterLabel, LatestVersion.ProcessType FROM FlowDefinition`
       );
       if (res && res.records) {
-        this.records = res.records.map((record) => ({
-          id: record.Id,
-          developerName: record.DeveloperName,
-          developerNameUrl: `/${record.Id}`,
-          isActive: !!record.ActiveVersionId,
-          masterLabel: record.ActiveVersionId
-            ? record.ActiveVersion.MasterLabel
-            : record.LatestVersion.MasterLabel,
-          processType: record.ActiveVersionId
-            ? record.ActiveVersion.ProcessType
-            : record.LatestVersion.ProcessType,
-          versionId: record.ActiveVersionId
-            ? record.ActiveVersionId
-            : record.LatestVersionId
-        }));
+        this.records = res.records.map((record) => {
+          const deriveFromVersion = record.ActiveVersionId
+            ? "ActiveVersion"
+            : "LatestVersion";
+          const result = {
+            id: record.Id,
+            developerName: record.DeveloperName,
+            developerNameUrl: `/${record.Id}`,
+            isActive: !!record.ActiveVersionId,
+            masterLabel: record[deriveFromVersion].MasterLabel,
+            processType: record[deriveFromVersion].ProcessType,
+            flowDescription: record[deriveFromVersion].Description,
+            lastModifiedDate: record[deriveFromVersion].LastModifiedDate,
+            lastModifiedBy: record[deriveFromVersion].LastModifiedBy.Name,
+            versionId: record.ActiveVersionId
+              ? record.ActiveVersionId
+              : record.LatestVersionId
+          };
+          return result;
+        });
 
         if (this.records.length > 0) {
           this.selectedFlowRecord = this.records[0];
@@ -74,12 +81,15 @@ export default class lightningFlowScannerApp extends LightningElement {
 
   async loadFlowMetadata(record) {
     try {
-      let id = record.versionId;
+      const ensureLatest = await this.conn.tooling.query(
+        `SELECT Id, ActiveVersionId, LatestVersionId FROM FlowDefinition WHERE Id = '${record.id}' LIMIT 1`
+      );
+      const latestRecord = ensureLatest.records.pop();
+      let id = latestRecord.LatestVersionId ?? latestRecord.ActiveVersionId;
       const metadataRes = await this.conn.tooling.query(
-        `SELECT Id, Fullname, Metadata FROM Flow WHERE Id = '${id}' LIMIT 1`
+        `SELECT Id, Fullname, Metadata, Description, ApiVersion FROM Flow WHERE Id = '${id}' LIMIT 1`
       );
       let fullname = metadataRes.records[0].FullName;
-      console.log("fn", fullname);
       let fmd = metadataRes.records[0].Metadata;
       if (metadataRes && metadataRes.records) {
         this.flowName = fullname;
@@ -88,6 +98,8 @@ export default class lightningFlowScannerApp extends LightningElement {
     } catch (error) {
       this.err = error.message;
       console.error(error.message);
+    } finally {
+      this.isLoading = false;
     }
   }
 
@@ -96,7 +108,7 @@ export default class lightningFlowScannerApp extends LightningElement {
   }
 
   async handleScanFlow(event) {
-    console.log("scan");
+    this.isLoading = true;
     const flowId = event.detail.flowId;
     const record = this.records.find((rec) => rec.id === flowId);
     if (record) {