Skip to content

Commit 4851d11

Browse files
tdrueztdruez
committed
Improve the Import forms rendering for better readability #241
Signed-off-by: tdruez <[email protected]>
1 parent 0fc6b32 commit 4851d11

File tree

5 files changed

+150
-114
lines changed

5 files changed

+150
-114
lines changed

‎product_portfolio/api.py‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -357,7 +357,7 @@ def load_sboms(self, request, *args, **kwargs):
357357
* AboutCode .ABOUT files,
358358
359359
Multiple SBOMs: You can provide multiple SBOMs by packaging them into a zip
360-
archive. DejaCode will handle and process them accordingly.
360+
archive. DejaCode will process them accordingly.
361361
"""
362362
product = self.get_object()
363363

@@ -374,7 +374,7 @@ def import_manifests(self, request, *args, **kwargs):
374374
Import Packages from Manifests.
375375
376376
Multiple Manifests: You can provide multiple files by packaging them into a zip
377-
archive. DejaCode will handle and process them accordingly.
377+
archive. DejaCode will process them accordingly.
378378
"""
379379
product = self.get_object()
380380

‎product_portfolio/forms.py‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@
3838
from dje.forms import DataspacedAdminForm
3939
from dje.forms import DataspacedModelForm
4040
from dje.forms import DefaultOnAdditionLabelMixin
41+
from dje.forms import StrictSubmit
4142
from dje.forms import Group
4243
from dje.forms import JSONListField
4344
from dje.forms import OwnerChoiceField
@@ -569,7 +570,16 @@ def __init__(self, user, *args, **kwargs):
569570
@property
570571
def helper(self):
571572
helper = FormHelper()
572-
helper.add_input(Submit("submit", "Import", css_class="btn-success"))
573+
helper.attrs = {"autocomplete": "off"}
574+
helper.layout = Layout(
575+
Fieldset(
576+
None,
577+
"upload_file",
578+
"create_codebase_resources",
579+
"stop_on_error",
580+
StrictSubmit("submit", _("Import"), css_class="btn-success col-2"),
581+
),
582+
)
573583
return helper
574584

575585
def save(self, product):
@@ -634,7 +644,15 @@ def helper(self):
634644
helper.form_method = "post"
635645
helper.form_id = "import-manifest-form"
636646
helper.attrs = {"autocomplete": "off"}
637-
helper.add_input(Submit("submit", "Import", css_class="btn-success"))
647+
helper.layout = Layout(
648+
Fieldset(
649+
None,
650+
"input_file",
651+
"update_existing_packages",
652+
"scan_all_packages",
653+
StrictSubmit("submit", _("Import"), css_class="btn-success col-2"),
654+
),
655+
)
638656
return helper
639657

640658
def submit(self, product, user):

‎product_portfolio/templates/product_portfolio/import_from_scan.html‎

Lines changed: 38 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -26,41 +26,47 @@ <h1 class="header-title">
2626

2727
{% include 'includes/messages_alert.html' %}
2828

29-
<div class="alert alert-primary" role="alert">
30-
When you upload your <strong>JSON-formatted ScanCode output results</strong>, DejaCode will:
31-
<ul class="mb-0 mt-2">
32-
<li><strong>Create new Packages</strong> using the ScanCode data if those Packages do not yet exist in your dataspace.</li>
33-
<li><strong>Assign the Packages</strong> identified in the ScanCode data to the Product you are updating.</li>
34-
{# <li><strong>Create new Custom Components</strong> on the Product you are updating, based on data produced by the ScanCode "consolidate" feature, which summarizes related files from the scanned codebase.</li>#}
35-
<li>Return you to the Product details so that you can review and edit the results as necessary. DejaCode shows you the Source name of the original ScanCode file with each new object that it created on your Product. Note that you can import multiple scans to your Product. You can also generate Attribution for your Product at any time to see what your new data will look like when you are ready to publish Attribution for your third-party software usage.</li>
36-
</ul>
37-
</div>
38-
39-
<div class="alert alert-dark bg-body-tertiary">
40-
<h5>Option 1: from a ScanCode-toolkit scan output</h5>
41-
<div class="mb-2">
42-
Upload a ScanCode-toolkit JSON output file, generated with <strong>version 31.2.3 or later</strong>, the following <strong>options are mandatory</strong>:
43-
</div>
44-
<kbd>$ scancode --copyright --license --info --package --json {file_output.json} {input_directory}</kbd>
45-
</div>
29+
<div class="row">
30+
<div class="col-9">
31+
<div class="alert alert-primary" role="alert">
32+
When you upload your <strong>JSON-formatted ScanCode output results</strong>, DejaCode will:
33+
<ul class="mb-0 mt-2">
34+
<li><strong>Create new Packages</strong> using the ScanCode data if those Packages do not yet exist in your dataspace.</li>
35+
<li><strong>Assign the Packages</strong> identified in the ScanCode data to the Product you are updating.</li>
36+
<li><strong>Return you to the Product details</strong> so that you can review and edit the results as necessary.</li>
37+
</ul>
38+
</div>
4639

47-
<div class="alert alert-dark bg-body-tertiary">
48-
<h5>Option 2: from ScanCode.io pipeline results</h5>
49-
<p class="mb-1">
50-
Upload a ScanCode.io JSON output file, <strong>generated with one of the following pipelines:</strong>
51-
</p>
52-
<p class="mb-0">
53-
<code>analyze_docker_image</code>,
54-
<code>analyze_windows_docker_image</code>,
55-
<code>inspect_packages</code>,
56-
<code>scan_codebase</code>,
57-
<code>scan_single_package</code>
58-
</p>
59-
</div>
40+
<div class="alert alert-dark bg-body-tertiary">
41+
<h5>Option 1: from a ScanCode-toolkit scan output</h5>
42+
<div class="mb-2">
43+
Upload a ScanCode-toolkit JSON output file, generated with <strong>version 31.2.3 or later</strong>, the following <strong>options are mandatory</strong>:
44+
</div>
45+
<kbd>$ scancode --copyright --license --info --package --json {file_output.json} {input_directory}</kbd>
46+
</div>
6047

61-
{{ form.errors }}
62-
{% crispy form %}
48+
<div class="alert alert-dark bg-body-tertiary">
49+
<h5>Option 2: from ScanCode.io pipeline results</h5>
50+
<p class="mb-1">
51+
Upload a ScanCode.io JSON output file, <strong>generated with one of the following pipelines:</strong>
52+
</p>
53+
<p class="mb-0">
54+
<code>analyze_docker_image</code>,
55+
<code>analyze_windows_docker_image</code>,
56+
<code>inspect_packages</code>,
57+
<code>scan_codebase</code>,
58+
<code>scan_single_package</code>
59+
</p>
60+
</div>
6361

62+
<div class="card">
63+
<div class="card-body">
64+
{% include 'includes/form_errors_alert.html' %}
65+
{% crispy form %}
66+
</div>
67+
</div>
68+
</div>
69+
</div>
6470
{% endblock %}
6571

6672
{% block javascripts %}

‎product_portfolio/templates/product_portfolio/import_manifests_form.html‎

Lines changed: 44 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -23,45 +23,49 @@ <h1 class="header-title">
2323

2424
{% include 'includes/messages_alert.html' %}
2525

26-
<div class="alert alert-success">
27-
<div>
28-
Supports resolving packages for:
29-
<ul class="mt-2">
30-
<li><strong>Python</strong>: requirements.txt and setup.py manifest files.</li>
31-
</ul>
32-
</div>
33-
<strong>Multiple Manifests:</strong>
34-
You can provide multiple Manifests by packaging them into a <strong>zip archive</strong>.
35-
DejaCode will handle and process them accordingly.
36-
</div>
26+
<div class="row">
27+
<div class="col-9">
28+
<div class="alert alert-success">
29+
<div>
30+
Supports resolving packages for:
31+
<ul class="mt-1 mb-2">
32+
<li><strong>Python</strong>: requirements.txt and setup.py manifest files.</li>
33+
</ul>
34+
</div>
35+
<strong>Multiple manifests:</strong>
36+
You can provide multiple manifests by packaging them into a <strong>zip archive</strong>.
37+
DejaCode will process them accordingly.
38+
</div>
3739

38-
<div class="alert alert-primary" role="alert">
39-
When you upload your <strong>Manifest file to DejaCode</strong>,
40-
the following process will occur:
41-
<ul class="mb-0 mt-2">
42-
<li>
43-
<strong>Submission to ScanCode.io</strong>
44-
Your Manifest file will be submitted to ScanCode.io for thorough scan inspection.
45-
</li>
46-
<li>
47-
<strong>Package Discovery</strong>
48-
ScanCode.io will identify and discover packages within your Manifest.
49-
</li>
50-
<li>
51-
<strong>Package Importation</strong>
52-
DejaCode will retrieve the discovered packages from ScanCode.io and import them into its system.
53-
</li>
54-
<li>
55-
<strong>Package Assignment</strong>
56-
The imported packages will be assigned to the corresponding product within DejaCode.
57-
</li>
58-
</ul>
59-
</div>
40+
<div class="alert alert-primary" role="alert">
41+
When you upload your <strong>manifest file to DejaCode</strong>,
42+
the following process will occur:
43+
<ul class="mt-2 mb-0">
44+
<li>
45+
<strong>Submission to ScanCode.io</strong>
46+
Your manifest file will be submitted to ScanCode.io for thorough scan inspection.
47+
</li>
48+
<li>
49+
<strong>Package Discovery</strong>
50+
ScanCode.io will identify and discover packages within your manifest.
51+
</li>
52+
<li>
53+
<strong>Package Importation</strong>
54+
DejaCode will retrieve the discovered packages from ScanCode.io and import them into its system.
55+
</li>
56+
<li>
57+
<strong>Package Assignment</strong>
58+
The imported packages will be assigned to the corresponding product within DejaCode.
59+
</li>
60+
</ul>
61+
</div>
6062

61-
<div class="row">
62-
<div class="col-8">
63-
{% include 'includes/form_errors_alert.html' %}
64-
{% crispy form %}
63+
<div class="card">
64+
<div class="card-body">
65+
{% include 'includes/form_errors_alert.html' %}
66+
{% crispy form %}
67+
</div>
68+
</div>
6569
</div>
6670
</div>
6771
{% endblock %}
@@ -70,7 +74,9 @@ <h1 class="header-title">
7074
<script>
7175
$(document).ready(function () {
7276
$('form#import-manifest-form').on('submit', function () {
73-
NEXB.displayOverlay("Load Packages from Manifest...");
77+
// Prevent from re-submitting the form by mistake
78+
$('button').prop('disabled', true);
79+
NEXB.displayOverlay("Import in progress...");
7480
})
7581
});
7682
</script>

‎product_portfolio/templates/product_portfolio/load_sboms_form.html‎

Lines changed: 46 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -23,47 +23,51 @@ <h1 class="header-title">
2323

2424
{% include 'includes/messages_alert.html' %}
2525

26-
<div class="alert alert-success">
27-
<div>
28-
DejaCode supports the following SBOM formats:
29-
<ul class="mt-2">
30-
<li>CycloneDX BOM as JSON <strong>bom.json</strong> and <strong>.cdx.json</strong></li>
31-
<li>SPDX document as JSON <strong>.spdx.json</strong></li>
32-
<li>AboutCode <strong>.ABOUT</strong> files</li>
33-
</ul>
34-
</div>
35-
<strong>Multiple SBOMs:</strong>
36-
You can provide multiple SBOMs by packaging them into a <strong>zip archive</strong>.
37-
DejaCode will handle and process them accordingly.
38-
</div>
26+
<div class="row">
27+
<div class="col-9">
28+
<div class="alert alert-success">
29+
<div>
30+
DejaCode supports the following SBOM formats:
31+
<ul class="mt-1 mb-2">
32+
<li><strong>CycloneDX</strong> BOM as JSON <strong>bom.json</strong> and <strong>.cdx.json</strong></li>
33+
<li><strong>SPDX</strong> document as JSON <strong>.spdx.json</strong></li>
34+
<li><strong>AboutCode .ABOUT</strong> files</li>
35+
</ul>
36+
</div>
37+
<strong>Multiple SBOMs:</strong>
38+
You can provide multiple SBOMs by packaging them into a <strong>zip archive</strong>.
39+
DejaCode will process them accordingly.
40+
</div>
3941

40-
<div class="alert alert-primary" role="alert">
41-
When you upload your <strong>Software Bill of Materials (SBOM) file to DejaCode</strong>,
42-
the following process will occur:
43-
<ul class="mb-0 mt-2">
44-
<li>
45-
<strong>Submission to ScanCode.io</strong>
46-
Your SBOM file will be submitted to ScanCode.io for thorough scan inspection.
47-
</li>
48-
<li>
49-
<strong>Package Discovery</strong>
50-
ScanCode.io will identify and discover packages within your SBOM.
51-
</li>
52-
<li>
53-
<strong>Package Importation</strong>
54-
DejaCode will retrieve the discovered packages from ScanCode.io and import them into its system.
55-
</li>
56-
<li>
57-
<strong>Package Assignment</strong>
58-
The imported packages will be assigned to the corresponding product within DejaCode.
59-
</li>
60-
</ul>
61-
</div>
42+
<div class="alert alert-primary" role="alert">
43+
When you upload your <strong>Software Bill of Materials (SBOM) file to DejaCode</strong>,
44+
the following process will occur:
45+
<ul class="mt-1 mb-0">
46+
<li>
47+
<strong>Submission to ScanCode.io</strong>
48+
Your SBOM file will be submitted to ScanCode.io for thorough scan inspection.
49+
</li>
50+
<li>
51+
<strong>Package Discovery</strong>
52+
ScanCode.io will identify and discover packages within your SBOM.
53+
</li>
54+
<li>
55+
<strong>Package Importation</strong>
56+
DejaCode will retrieve the discovered packages from ScanCode.io and import them into its system.
57+
</li>
58+
<li>
59+
<strong>Package Assignment</strong>
60+
The imported packages will be assigned to the corresponding product within DejaCode.
61+
</li>
62+
</ul>
63+
</div>
6264

63-
<div class="row">
64-
<div class="col-8">
65-
{% include 'includes/form_errors_alert.html' %}
66-
{% crispy form %}
65+
<div class="card">
66+
<div class="card-body">
67+
{% include 'includes/form_errors_alert.html' %}
68+
{% crispy form %}
69+
</div>
70+
</div>
6771
</div>
6872
</div>
6973
{% endblock %}
@@ -72,7 +76,9 @@ <h1 class="header-title">
7276
<script>
7377
$(document).ready(function () {
7478
$('form#import-manifest-form').on('submit', function () {
75-
NEXB.displayOverlay("Load Packages from SBOM...");
79+
// Prevent from re-submitting the form by mistake
80+
$('button').prop('disabled', true);
81+
NEXB.displayOverlay("Import in progress...");
7682
})
7783
});
7884
</script>

0 commit comments

Comments
 (0)