Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[UI] Refactor Banks Page #1652

Merged
merged 2 commits into from
Oct 6, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view

This file was deleted.

Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<div class="mt-4 mb-4">
{% include "components/banks/match_form.html.j2" %}
<div class="d-flex mt-5 mb-4 justify-content-end">
{% include 'components/banks/create_new_bank.html.j2' %}
</div>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
{# Copyright (c) Meta Platforms, Inc. and affiliates. #}
<button type="button" class="btn btn-light" data-bs-toggle="modal" data-bs-target="#{{bank_title}}">Add content</button>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wish this was an icon and not "Add content" but I didn't want to mess around with icon libraries either lol

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agree - we want to keep things as simple as possible, which sometimes means that things may look a little odd because we are trading off against adding more dependencies or custom styling.

<!-- Modal -->
<div class="modal fade" id="{{bank_title}}" tabindex="-1">
<div class="modal-dialog modal-dialog-centered modal-xl" style="width: 60%; max-width: none;">
<div class="modal-content modal-xl" style="padding: 20px">
<form id="add_content_to_bank_{{ bank_title }}">
<div class="modal-header">
<h1 class="modal-title fs-5">Add Content: {{ bank_title }}</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row" style="width: 80%">
<input class="form-control" type="file" name="file" required style="margin-bottom: 20px">
<select class="form-select" name="content_type" required>
<option selected disabled value="">Select content type</option>
{% for c in content %}
{% if c['enabled'] %}
<option value="{{c['name']}}">{{c['name'].capitalize()}}</option>
{% endif %}
{% endfor %}
</select>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success">Add</button>
</div>
</form>
<div id="hash_result_{{ bank_title }}">
<!-- Added to by javascript -->
</div>
</div>
</div>
</div>
<script>

</script>
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
{# Copyright (c) Meta Platforms, Inc. and affiliates. #}
<h1>Banks</h1>
<p class="text-secondary">Banks are like folders. You can do the following on this page:</p>
<ul class="text-secondary">
<li>Create new banks</li>
<li>Add content: Add content to each bank</li>
<li>Search by content: Find banks that contain a certain piece of content</li>
</ul>
Comment on lines +3 to +8
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I made this up lol. Someone should come up with better copy to describe these concepts.

I think all the pages should have a h1 title and a description

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree, and was tempted to give you and @levi-cloudflare a nudge in that direction. I'm fine to land-and-iterate on the content.

Why I agree:

  • The primary purpose of the UI should be to help a non-technical person understand what HMA is doing for showcase demos. We assume anyone using it "for real" will only use the API
  • Therefore, the UI should primarily focus on introducing concepts (e.g. "Bank" terminology.

{% include 'components/banks/actions_bar.html.j2' %}

<div class="row row-cols-1 row-cols-md-4 g-4">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Bank Name</th>
<th scope="col">Matching Enabled Ratio</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
{% for bank in bankList %}
<tr id="bank_item_{{bank['name']}}">
<th scope="row" style="background-color: transparent;">{{ loop.index }}</th>
<td style="background-color: transparent;">{{ bank['name'] }}</td>
<td style="background-color: transparent;">{{ bank['matching_enabled_ratio'] }}</td>
<td style="background-color: transparent;">
{% with bank_title=bank['name'] %}
{% include 'components/banks/add_to_bank_form.html.j2' %}
{% endwith %}
</td>
</tr>
Comment on lines +23 to +32
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

eventually, these will link to their own page with stats and such.

Leaving that up to ya'll too

{% endfor %}
</tbody>

</table>
</div>
<script>
const banksData = [
{% for bank in bankList %}
{
name: "{{ bank.name|e }}"
}{% if not loop.last %},{% endif %}
{% endfor %}
];

banksData.forEach(function(bank) {
const bankTitle=bank.name;
const addContentModal = document.getElementById(bankTitle);
const addContentToBankForm = document.getElementById("add_content_to_bank_" + bankTitle);
const formContent = addContentToBankForm.innerHTML;
addContentToBankForm.addEventListener("submit", (event) => {
event.preventDefault();
const formData = new FormData(event.target);
formData.append(event.target.content_type.value, event.target.file.files[0]);
formData.delete("file");

fetch(`/c/bank/${bankTitle}/content`, {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
// Handle the response from the server here
renderAddBankResult(data);

})
.catch(error => {
console.error('Error:', error);
});
})



// reset modal innerHTML
addContentModal.addEventListener('hidden.bs.modal', function () {
addContentToBankForm.innerHTML = formContent;
});

const renderAddBankResult = (result) => {
// Render hashes table
const hashTable = HashTable(result);

// render on HTML
addContentToBankForm.innerHTML = hashTable;
}

const HashTable = (result) => {
return `
<div class="modal-header">
<h3 class="text-success">Success!</h3>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h4>Added Hashes:</h4>
<p>Content ID: ${result.id}</p>
<h4>Hash Values:</h4>
<table class="table table-hover" =>
<thead>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
</thead>
<tbody>
${Object.entries(result.signals).map(([key, value]) => `
<tr>
<td>${key}</td>
<td style="overflow: scroll; max-width: 200px; white-space: no-wrap;">${value}</td>
</tr>
`).join('')}
</tbody>

</table>
</div>
`;
}

});

</script>
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@
{# Copyright (c) Meta Platforms, Inc. and affiliates. #}
<h3> Banks </h3>
<div class="w-50 my-1">
<form action="/ui/create_bank" method="post" enctype="multipart/form-data" id="banks_grid_form">
<div class="input-group mb-3">
<input type="text" class="form-control" name="bank_name" placeholder="Name" id="create_bank_bank_name" required>
<button type="submit" class="btn btn-outline-success" id="create_bank_submit">Create New Bank</button>
</div>
<span id="bank-name-error" class="text-danger"></span>
</form>
</div>
<div class="row row-cols-1 row-cols-md-4 g-4">
{% for b in bankList %}
<div class="col">
<div class="card">
<div class="card-header bg-info">
<h5 class="my-0 fw-normal">{{b['name']}}</h4>
</div>
<div class="card-body">
<p class="card-text">We'll add stats here later.</p>
</div>
<button type="submit" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#create_new_bank_modal">Create New Bank</button>

<!-- Modal -->
<div class="modal fade" id="create_new_bank_modal" tabindex="-1">
<div class="modal-dialog modal-dialog-centered modal-xl" style="width: 60%; max-width: none;">
<div class="modal-content modal-xl" style="padding: 20px">
<form action="/ui/create_bank" method="post" enctype="multipart/form-data" id="banks_grid_form">
<div class="modal-header">
<h1 class="modal-title fs-5">Create New Bank</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="input-group mb-3">
<input type="text" class="form-control" name="bank_name" placeholder="Name" id="create_bank_bank_name" required>
</div>
<span id="bank-name-error" class="text-danger"></span>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success" id="create_bank_submit">Create</button>
</div>
</form>
</div>
</div>
{% endfor %}
</div>
<script>
document.getElementById('create_bank_bank_name').addEventListener('blur', function() {
Expand Down Expand Up @@ -66,5 +66,4 @@
}
});
})

</script>
Loading
Loading