Skip to content

Commit 19345a7

Browse files
RubenHalmanRubenHalman
authored
Filters & scoped css (#11)
* config eslint * add filters * adds scoped css via static resource * include images in the readme
1 parent 78d1770 commit 19345a7

30 files changed

+10977
-519
lines changed

‎.eslintrc.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
module.exports = {
2+
root: true,
3+
overrides: [
4+
// LWC configuration
5+
{
6+
files: ['**/lwc/**/*.js'],
7+
extends: ['@salesforce/eslint-config-lwc/recommended']
8+
},
9+
10+
// LWC test files
11+
{
12+
files: ['**/lwc/**/*.test.js'],
13+
extends: ['@salesforce/eslint-config-lwc/recommended'],
14+
rules: {
15+
'@lwc/lwc/no-unexpected-wire-adapter-usages': 'off'
16+
},
17+
env: {
18+
node: true
19+
}
20+
},
21+
22+
// Jest mocks
23+
{
24+
files: ['**/jest-mocks/**/*.js'],
25+
env: {
26+
node: true,
27+
es2021: true,
28+
jest: true
29+
},
30+
extends: ['plugin:jest/recommended']
31+
}
32+
]
33+
};

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
.sfdx/
88
.localdevserver/
99
deploy-options.json
10+
lc
1011

1112
# LWC VSCode autocomplete
1213
**/lwc/jsconfig.json
@@ -43,3 +44,5 @@ $RECYCLE.BIN/
4344
**/__pycache__/
4445
**/.venv/
4546
**/venv/
47+
48+
.sfdx-project.json

‎.husky/pre-commit‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
#!/bin/sh
2-
. "$(dirname "$0")/_/husky.sh"
2+
# . "$(dirname "$0")/_/husky.sh"
33

4-
npm run precommit
4+
# npm run precommit

‎README.md‎

Lines changed: 27 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,70 @@
11
<p align="center">
2-
<a href="https://github.com/Flow-Scanner">
3-
<img src="media/banner.png" style="width: 41%;" />
4-
</a>
2+
<a href="https://github.com/Flow-Scanner">
3+
<img src="media/banner.png" style="width: 41%;" />
4+
</a>
55
</p>
6+
67
<p align="center">Scans for unsafe contexts, hardcoded IDs, and other issues to optimize your Flows.</p>
78

8-
[![Demo](media/lfsapp.gif)](https://github.com/Lightning-Flow-Scanner)
9+
<p align="center">
10+
<img src="media/lfsapp.gif" alt="Lightning Flow Scanner Demo" width="70%" />
11+
</p>
912

1013
## Features
1114

1215
**Lightning Flow Scanner App** integrates the Lightning Flow Scanner as a UMD module within Salesforce, enabling scanning of flow metadata. The app runs predefined rules and presents detailed scan results for flows, including violation details, severity levels, and relevant flow metadata.
1316

17+
### Flow Overview:
18+
<p align="center">
19+
<img src="media/overview.jpg" alt="Flow Overview" width="65%" />
20+
</p>
21+
22+
### Violation Details:
23+
<p align="center">
24+
<img src="media/details.jpg" alt="Violation Details" width="65%" />
25+
</p>
26+
27+
### Rule Configuration:
28+
<p align="center">
29+
<img src="media/config.jpg" alt="Rule Configuration" width="65%" />
30+
</p>
31+
1432
## Installation
1533

1634
<a href="https://githubsfdeploy.herokuapp.com?owner=Flow-Scanner&repo=lightning-flow-scanner-app&ref=main">
17-
<img alt="Deploy to Salesforce"
18-
src="https://raw.githubusercontent.com/afawcett/githubsfdeploy/master/deploy.png">
35+
<img alt="Deploy to Salesforce"
36+
src="https://raw.githubusercontent.com/afawcett/githubsfdeploy/master/deploy.png">
1937
</a>
2038

2139
## Usage
2240

23-
1) Assign the `LFSApp` permission set, to any user that requires access to the flow scanning abilities.
41+
1) Make sure the `LFSApp` permission set is assigned to any user that requires access to the flow scanner.
2442
2) Open the App:
2543
- Click on the App Launcher icon in the top-left corner of your Salesforce interface.
2644
- Search for "Flow Scanner" in the App Launcher search bar.
2745
- Click on the "Flow Scanner" app to open it.
28-
3) To scan a flow, click the "Scan" button in the Flow Overview.
46+
3) View results of a Flow by clicking "details".
2947

3048
## Development
3149

3250
1) Clone this repository:
33-
3451
```sh
3552
git clone https://github.com/Flow-Scanner/lightning-flow-scanner-app.git
3653
```
3754

3855
2) Authorize your Salesforce org to set up a connection with your local development environment:
39-
4056
```sh
4157
sf login web --set-default --alias <YourOrgAlias>
4258
```
4359

4460
3) Push Source to Your Org:
45-
4661
```sh
4762
sf project:deploy:start
4863
```
4964

5065
4) Pull Modifications from Your Org:
51-
5266
```sh
5367
sf project sync
5468
```
5569

56-
Want to help improve [Lightning Flow Scanner](https://flow-scanner.github.io/lightning-flow-scanner-core/)? See our [Contributing Guidelines](https://github.com/Flow-Scanner/lightning-flow-scanner-core/blob/main/CONTRIBUTING.md).
70+
Want to help improve [Lightning Flow Scanner](https://flow-scanner.github.io/lightning-flow-scanner-core/)? See our [Contributing Guidelines](https://github.com/Flow-Scanner/lightning-flow-scanner-core/blob/main/CONTRIBUTING.md).

‎force-app/main/default/flexipages/Lightning_Flow_Scanner.flexipage-meta.xml‎

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎force-app/main/default/lwc/flowOverview/flowOverview.css‎

Lines changed: 57 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,20 +8,69 @@ lightning-card {
88
background-color: #ffffff;
99
border-radius: 0.5rem;
1010
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
11+
--sds-c-card-header-spacing-block-end: 0;
12+
--sds-c-card-body-spacing-block-start: 0;
13+
--sds-c-card-header-spacing-block-start: 0;
1114
}
1215

13-
.search-bar {
14-
padding: 0.25rem 1rem; /* Reduced padding for less height */
15-
background-color: #ffffff;
16+
.toolbar-row {
17+
width: 100%;
18+
gap: 0.5rem;
19+
padding: 0.25rem 0.5rem;
20+
background-color: #003087;
21+
color: #ffffff;
22+
margin-bottom: 0;
23+
}
24+
25+
.toolbar-icon {
26+
flex: 0 0 auto;
1627
display: flex;
1728
align-items: center;
1829
}
1930

20-
.search-bar lightning-input {
21-
max-width: 300px; /* Smaller width for compact look */
22-
--slds-c-input-color-border: #003087; /* Dark blue border */
23-
--slds-c-input-radius-border: 0.25rem;
24-
--slds-c-input-font-size: 0.875rem; /* Smaller font for compactness */
31+
.toolbar-icon lightning-icon {
32+
--slds-c-icon-color-foreground: #ffffff;
33+
}
34+
35+
.toolbar-title {
36+
flex: 0 0 auto;
37+
line-height: 1.2rem;
38+
}
39+
40+
.toolbar-title h2 {
41+
color: #ffffff;
42+
margin: 0;
43+
}
44+
45+
.toolbar-item {
46+
flex: 1 1 auto;
47+
min-width: 120px;
48+
}
49+
50+
.compact-input {
51+
--slds-c-input-color-background: #ffffff;
52+
--slds-c-input-text-color: #003087;
53+
--slds-c-input-color-border: #003087;
54+
--slds-c-input-shadow-focus: 0 0 3px #00205b;
55+
}
56+
57+
.compact-input input {
58+
height: 2rem;
59+
padding: 0.2rem 0.5rem;
60+
font-size: 0.875rem;
61+
}
62+
63+
.compact-toggle {
64+
height: 2rem;
65+
--slds-c-toggle-color-background-checked: #ffffff;
66+
--slds-c-toggle-color-foreground-checked: #003087;
67+
--slds-c-toggle-color-background-unchecked: #cccccc;
68+
--slds-c-toggle-color-foreground-unchecked: #003087;
69+
--slds-c-toggle-shadow-color-focus: #00205b;
70+
}
71+
72+
.custom-datatable {
73+
margin-top: 0;
2574
}
2675

2776
lightning-datatable {

‎force-app/main/default/lwc/flowOverview/flowOverview.html‎

Lines changed: 65 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,77 @@
11
<template>
2-
<lightning-card title="Flows" icon-name="custom:custom19">
3-
<div class="search-bar">
4-
<lightning-input
5-
type="search"
6-
placeholder="Search by Name or Label..."
7-
onchange={handleSearchInput}
8-
class="slds-m-bottom_x-small"
9-
></lightning-input>
2+
<div slot="title" class="slds-grid slds-grid_vertical-align-center slds-p-around_xx-small toolbar-row">
3+
4+
<!-- Icon -->
5+
<div class="toolbar-icon">
6+
<lightning-icon icon-name="custom:custom19" size="small"></lightning-icon>
7+
</div>
8+
9+
<!-- Title -->
10+
<div class="toolbar-title slds-p-left_x-small">
11+
<h2 class="slds-text-heading_small slds-truncate">Flows</h2>
12+
</div>
13+
14+
<!-- Name / Label -->
15+
<div class="toolbar-item slds-p-left_x-small">
16+
<lightning-input
17+
type="search"
18+
placeholder="Name or Label"
19+
onkeyup={handleNameKeyUp}
20+
variant="label-hidden"
21+
class="compact-input"
22+
></lightning-input>
23+
</div>
24+
25+
<!-- Flow Type -->
26+
<div class="toolbar-item slds-p-left_x-small">
27+
<lightning-input
28+
type="search"
29+
placeholder="Flow Type"
30+
onkeyup={handleTypeKeyUp}
31+
variant="label-hidden"
32+
class="compact-input"
33+
></lightning-input>
34+
</div>
35+
36+
<!-- Active Toggle -->
37+
<div class="toolbar-item slds-p-left_x-small slds-align-middle">
38+
<lightning-input
39+
type="toggle"
40+
label="Active"
41+
checked={activeOnly}
42+
onchange={handleToggleChange}
43+
class="compact-toggle"
44+
variant="label-hidden"
45+
></lightning-input>
46+
</div>
1047
</div>
48+
<lightning-card>
49+
50+
51+
<!-- Table & footer remain unchanged -->
1152
<template if:true={err}>
1253
<p class="slds-p-horizontal_small">Error fetching records: {err}</p>
1354
</template>
55+
1456
<template if:false={records.length}>
1557
<p class="slds-p-horizontal_small">No flows available to scan</p>
1658
</template>
17-
<template if:true={records.length}>
18-
<lightning-datatable
19-
key-field="id"
20-
data={records}
21-
columns={columns}
22-
hide-checkbox-column="true"
23-
onrowaction={handleRowAction}
24-
></lightning-datatable>
59+
60+
<template if:true={displayedRecords.length}>
61+
<div class="custom-datatable">
62+
<lightning-datatable
63+
key-field="id"
64+
data={displayedRecords}
65+
columns={columns}
66+
hide-checkbox-column="true"
67+
onrowaction={handleRowAction}
68+
onsort={handleSort}
69+
sorted-by={sortedBy}
70+
sorted-direction={sortedDirection}
71+
></lightning-datatable>
72+
</div>
2573
</template>
74+
2675
<template if:true={hasMoreRecords}>
2776
<div slot="footer" class="slds-p-horizontal_small">
2877
<lightning-button

0 commit comments

Comments
 (0)