From 106d42d656cbd660a5cae476dfea02cada16aa27 Mon Sep 17 00:00:00 2001
From: Deanna Tran <deannatran@cloudflare.com>
Date: Fri, 4 Oct 2024 09:10:45 +0100
Subject: [PATCH] more work

---
 .../components/banks/actions_bar.html.j2      |   6 +
 .../{ => banks}/add_to_bank_form.html.j2      |   7 +-
 .../components/banks/banks_grid.html.j2       | 121 +++++++++++++
 .../components/banks/create_new_bank.html.j2  |  69 ++++++++
 .../components/banks/match_form.html.j2       | 102 +++++++++++
 .../templates/components/banks_grid.html.j2   | 162 ------------------
 .../components/create_exchange_modal.html.j2  |   2 +-
 .../templates/components/match_form.html.j2   |  81 ---------
 .../templates/pages/banks.html.j2             |  10 +-
 9 files changed, 303 insertions(+), 257 deletions(-)
 create mode 100644 hasher-matcher-actioner/src/OpenMediaMatch/templates/components/banks/actions_bar.html.j2
 rename hasher-matcher-actioner/src/OpenMediaMatch/templates/components/{ => banks}/add_to_bank_form.html.j2 (88%)
 create mode 100644 hasher-matcher-actioner/src/OpenMediaMatch/templates/components/banks/banks_grid.html.j2
 create mode 100644 hasher-matcher-actioner/src/OpenMediaMatch/templates/components/banks/create_new_bank.html.j2
 create mode 100644 hasher-matcher-actioner/src/OpenMediaMatch/templates/components/banks/match_form.html.j2
 delete mode 100644 hasher-matcher-actioner/src/OpenMediaMatch/templates/components/banks_grid.html.j2
 delete mode 100644 hasher-matcher-actioner/src/OpenMediaMatch/templates/components/match_form.html.j2

diff --git a/hasher-matcher-actioner/src/OpenMediaMatch/templates/components/banks/actions_bar.html.j2 b/hasher-matcher-actioner/src/OpenMediaMatch/templates/components/banks/actions_bar.html.j2
new file mode 100644
index 000000000..8bc0697b5
--- /dev/null
+++ b/hasher-matcher-actioner/src/OpenMediaMatch/templates/components/banks/actions_bar.html.j2
@@ -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>
diff --git a/hasher-matcher-actioner/src/OpenMediaMatch/templates/components/add_to_bank_form.html.j2 b/hasher-matcher-actioner/src/OpenMediaMatch/templates/components/banks/add_to_bank_form.html.j2
similarity index 88%
rename from hasher-matcher-actioner/src/OpenMediaMatch/templates/components/add_to_bank_form.html.j2
rename to hasher-matcher-actioner/src/OpenMediaMatch/templates/components/banks/add_to_bank_form.html.j2
index a1630e644..326df0f11 100644
--- a/hasher-matcher-actioner/src/OpenMediaMatch/templates/components/add_to_bank_form.html.j2
+++ b/hasher-matcher-actioner/src/OpenMediaMatch/templates/components/banks/add_to_bank_form.html.j2
@@ -3,12 +3,11 @@
 <!-- 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: 10px">
+        <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>
-                     
+                    <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%">
@@ -24,7 +23,7 @@
                         </div>
                 </div>
                 <div class="modal-footer">
-                    <button type="submit" class="btn btn-primary">Submit</button>
+                    <button type="submit" class="btn btn-success">Add</button>
                 </div>
             </form>
             <div id="hash_result_{{ bank_title }}">
diff --git a/hasher-matcher-actioner/src/OpenMediaMatch/templates/components/banks/banks_grid.html.j2 b/hasher-matcher-actioner/src/OpenMediaMatch/templates/components/banks/banks_grid.html.j2
new file mode 100644
index 000000000..fa9ecfd04
--- /dev/null
+++ b/hasher-matcher-actioner/src/OpenMediaMatch/templates/components/banks/banks_grid.html.j2
@@ -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>
+{% 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>
+        {% 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>
\ No newline at end of file
diff --git a/hasher-matcher-actioner/src/OpenMediaMatch/templates/components/banks/create_new_bank.html.j2 b/hasher-matcher-actioner/src/OpenMediaMatch/templates/components/banks/create_new_bank.html.j2
new file mode 100644
index 000000000..62b6b5ac6
--- /dev/null
+++ b/hasher-matcher-actioner/src/OpenMediaMatch/templates/components/banks/create_new_bank.html.j2
@@ -0,0 +1,69 @@
+{# Copyright (c) Meta Platforms, Inc. and affiliates. #}
+<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>
+</div>
+<script>
+    document.getElementById('create_bank_bank_name').addEventListener('blur', function() {
+        const bankNameField = this;
+        // auto uppercase and trim input
+        bankNameField.value = bankNameField.value.trim().toUpperCase();
+        const submitButton = document.getElementById('create_bank_submit');
+        submitButton.disabled = true;
+        const errorSpan = document.getElementById('bank-name-error');
+        errorSpan.textContent = ''; // Clear previous error message
+        const regex = /^[A-Z0-9_]+$/;
+
+        // Validate the input
+        if (!regex.test(bankNameField.value)) {
+            errorSpan.textContent = 'Bank name must be all uppercase and snake cased';
+            bankNameField.classList.remove("is-valid");
+            bankNameField.classList.add("is-invalid");
+        } else {
+            submitButton.disabled = false;
+            bankNameField.classList.remove("is-invalid");
+            bankNameField.classList.add("is-valid");
+        }
+    });
+
+    document.getElementById("banks_grid_form").addEventListener("submit", async event => {
+        event.preventDefault();
+
+        fetch(`/c/banks`, {
+            method: 'POST',
+            body: JSON.stringify({name: document.getElementById('create_bank_bank_name').value}),
+            headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json'
+            },
+        })
+            .then(async response => {
+                if (response.ok) {
+                    window.location.reload();
+                } else {
+                    json = await response.json()
+                    alert("Create Bank failed! " + response.statusText + " : " + (json['message'] ?? '<no message>)'))
+                }
+            });
+    })
+</script>
\ No newline at end of file
diff --git a/hasher-matcher-actioner/src/OpenMediaMatch/templates/components/banks/match_form.html.j2 b/hasher-matcher-actioner/src/OpenMediaMatch/templates/components/banks/match_form.html.j2
new file mode 100644
index 000000000..d40c71738
--- /dev/null
+++ b/hasher-matcher-actioner/src/OpenMediaMatch/templates/components/banks/match_form.html.j2
@@ -0,0 +1,102 @@
+{# Copyright (c) Meta Platforms, Inc. and affiliates. #}
+<div class="card">
+    <div class="card-header">Find Content in Banks</div>
+    <form id="match_file" class="card-body">
+        <div class="row">
+            <div class="col">
+                <input class="form-control" type="file" name="file" required />
+            </div>
+            <div class="col">
+                <select class="form-select" name="media" id="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 class="col">
+                <button type="submit" class="btn btn-primary">Find</button>
+            </div>
+            <div class="col">
+                <!-- for spacing -->
+            </div>
+        </div>
+    </form>
+    <div id="matches">
+        <!-- Added to by javascript -->
+    </div>
+</div>
+
+<script>
+    const match_form = document.getElementById("match_file");
+    const matches = document.getElementById("matches");
+    let banks = [];
+    match_form.addEventListener("submit", (event) => {
+        event.preventDefault();
+        const formData = new FormData();
+
+        // Append the selected file and content type to the FormData
+        formData.append(event.target.media.value, event.target.file.files[0]);
+
+        fetch('/ui/query', {
+            method: 'POST',
+            body: formData
+        })
+            .then(response => response.json())
+            .then(data => {
+                // Handle the response from the server here
+                banks = data.banks;
+                renderMatchResult(data);
+                highlightMatchedResults(data);
+            })
+            .catch(error => {
+                console.error('Error:', error);
+            });
+    })
+
+    
+    const clearMatches = () => {
+        matches.innerHTML = "";
+        banks.forEach((bankName) => {
+            document.getElementById(`bank_item_${bankName}`).classList.remove("bg-light");
+        })
+    }
+    
+    const renderMatchResult = (result) => {
+        // Render matched banks
+        const banksList = result.banks.map(bank => `<li>${bank}</li>`).join('');
+        const content = `
+                <div class="card-body">
+                    <h5>Matched Banks</h5>
+                    <ul>${banksList}</ul>
+                    <h5>Hash Values:</h5>
+                    <table class="table table-hover" style="max-height: 100px;">
+                        <tr>
+                            <th>Key</th>
+                            <th>Value</th>
+                        </tr>
+                        ${Object.entries(result.hashes).map(([key, value]) => `
+                            <tr>
+                                <td>${key}</td>
+                                <td style="overflow: scroll; max-width: 200px; white-space: no-wrap;">${value}</td>
+                            </tr>
+                        `).join('')}
+                    </table>
+                    <button type="button" class="btn btn-secondary" onclick="clearMatches()">Clear</button>
+                </div>
+        `
+        // Append both the banks and hashes sections to the "matches" element
+        matches.innerHTML = content;
+    }
+
+    const highlightMatchedResults = (result) => {
+        // Render matched banks
+        result.banks.forEach((bankName) => {
+            document.getElementById(`bank_item_${bankName}`).classList.add("bg-light");
+        })
+    }
+    
+    
+</script>
\ No newline at end of file
diff --git a/hasher-matcher-actioner/src/OpenMediaMatch/templates/components/banks_grid.html.j2 b/hasher-matcher-actioner/src/OpenMediaMatch/templates/components/banks_grid.html.j2
deleted file mode 100644
index d1b4ca82c..000000000
--- a/hasher-matcher-actioner/src/OpenMediaMatch/templates/components/banks_grid.html.j2
+++ /dev/null
@@ -1,162 +0,0 @@
-{# 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">
-    <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>
-                <th scope="row">{{ loop.index }}</th>
-                <td>{{ bank['name'] }}</td>
-                <td>{{ bank['matching_enabled_ratio'] }}</td>
-                <td>
-                    {% with bank_title=bank['name'] %}
-                        {% include 'components/add_to_bank_form.html.j2' with context %}
-                    {% endwith %}
-                </td>
-            </tr>
-        {% endfor %}
-        </tbody>
-        
-    </table>
-</div>
-<script>
-    document.getElementById('create_bank_bank_name').addEventListener('blur', function() {
-        const bankNameField = this;
-        // auto uppercase and trim input
-        bankNameField.value = bankNameField.value.trim().toUpperCase();
-        const submitButton = document.getElementById('create_bank_submit');
-        submitButton.disabled = true;
-        const errorSpan = document.getElementById('bank-name-error');
-        errorSpan.textContent = ''; // Clear previous error message
-        const regex = /^[A-Z0-9_]+$/;
-
-        // Validate the input
-        if (!regex.test(bankNameField.value)) {
-            errorSpan.textContent = 'Bank name must be all uppercase and snake cased';
-            bankNameField.classList.remove("is-valid");
-            bankNameField.classList.add("is-invalid");
-        } else {
-            submitButton.disabled = false;
-            bankNameField.classList.remove("is-invalid");
-            bankNameField.classList.add("is-valid");
-        }
-    });
-
-    document.getElementById("banks_grid_form").addEventListener("submit", async event => {
-        event.preventDefault();
-
-        fetch(`/c/banks`, {
-            method: 'POST',
-            body: JSON.stringify({name: document.getElementById('create_bank_bank_name').value}),
-            headers: {
-                'Accept': 'application/json',
-                'Content-Type': 'application/json'
-            },
-        })
-            .then(async response => {
-                if (response.ok) {
-                    window.location.reload();
-                } else {
-                    json = await response.json()
-                    alert("Create Bank failed! " + response.statusText + " : " + (json['message'] ?? '<no message>)'))
-                }
-            });
-    })
-
-    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 add_content_modal = document.getElementById(bankTitle);
-        const add_content_to_bank_form = document.getElementById("add_content_to_bank_" + bankTitle);
-        const content_result = document.getElementById("hash_result_" + bankTitle);
-
-        add_content_to_bank_form.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 hash innerHTML
-        add_content_modal.addEventListener('hidden.bs.modal', function () {
-            content_result.innerHTML = ""
-        });
-
-        const renderAddBankResult = (result) => {
-        const hashHeader = `
-                    <h4>Added Hashes:</h4>
-                    <p>Content ID: ${result.id}</p>
-                `;
-
-            // Render hashes table
-            const hashesTableHTML = renderHashTable(result.signals);
-
-            // render on HTML
-            content_result.innerHTML = hashHeader + hashesTableHTML;
-        }
-
-        const renderHashTable = (hashes) => {
-            return `
-                        <h3>Hash Values:</h3>
-                        <table class="table table-hover">
-                            <thead>
-                                <tr>
-                                    <th>Key</th>
-                                    <th>Value</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                ${Object.entries(hashes).map(([key, value]) => `
-                                    <tr>
-                                        <td>${key}</td>
-                                        <td>${value}</td>
-                                    </tr>
-                                `).join('')}
-                            </tbody>
-                           
-                        </table>
-                    `;
-        }
-
-  });
-    
-</script>
\ No newline at end of file
diff --git a/hasher-matcher-actioner/src/OpenMediaMatch/templates/components/create_exchange_modal.html.j2 b/hasher-matcher-actioner/src/OpenMediaMatch/templates/components/create_exchange_modal.html.j2
index bc91087f1..8bab693a5 100644
--- a/hasher-matcher-actioner/src/OpenMediaMatch/templates/components/create_exchange_modal.html.j2
+++ b/hasher-matcher-actioner/src/OpenMediaMatch/templates/components/create_exchange_modal.html.j2
@@ -10,7 +10,7 @@
         <div class="modal-content">
             <form id="exchange_create_form">
                 <div class="modal-header">
-                    <h1 class="modal-title fs-5" id="createExchangeLabel">{{bank.name}}</h1>
+                    <h1 class="modal-title fs-5" id="createExchangeLabel">Create Exchange</h1>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body">
diff --git a/hasher-matcher-actioner/src/OpenMediaMatch/templates/components/match_form.html.j2 b/hasher-matcher-actioner/src/OpenMediaMatch/templates/components/match_form.html.j2
deleted file mode 100644
index 6ac6fc978..000000000
--- a/hasher-matcher-actioner/src/OpenMediaMatch/templates/components/match_form.html.j2
+++ /dev/null
@@ -1,81 +0,0 @@
-{# Copyright (c) Meta Platforms, Inc. and affiliates. #}
-<h3>Match File</h3>
-<form id="match_file">
-    <div class="row">
-        <div class="col">
-            <input class="form-control" type="file" name="file" required />
-        </div>
-        <div class="col">
-            <select class="form-select" name="media" id="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 class="col">
-            <button type="submit" class="btn btn-primary">Submit</button>
-        </div>
-        <div class="col">
-            <!-- for spacing -->
-        </div>
-    </div>
-</form>
-<div id="matches">
-    <!-- Added to by javascript -->
-</div>
-<script>
-    const match_form = document.getElementById("match_file");
-    const matches = document.getElementById("matches");
-
-    match_form.addEventListener("submit", (event) => {
-        event.preventDefault();
-        const formData = new FormData();
-
-        // Append the selected file and content type to the FormData
-        formData.append(event.target.media.value, event.target.file.files[0]);
-
-        fetch('/ui/query', {
-            method: 'POST',
-            body: formData
-        })
-            .then(response => response.json())
-            .then(data => {
-                // Handle the response from the server here
-                renderMatchResult(data);
-            })
-            .catch(error => {
-                console.error('Error:', error);
-            });
-    })
-
-    const renderMatchResult = (result) => {
-        // Render matched banks
-        const banksList = result.banks.map(bank => `<li>${bank}</li>`).join('');
-        const banksHTML = `
-            <h4>Matched Banks</h4>
-            <ul>${banksList}</ul>
-        `;
-
-        const hashesTableHTML = `
-                <h3>Hash Values:</h3>
-                <table>
-                    <tr>
-                        <th>Key</th>
-                        <th>Value</th>
-                    </tr>
-                    ${Object.entries(result.hashes).map(([key, value]) => `
-                        <tr>
-                            <td>${key}</td>
-                            <td>${value}</td>
-                        </tr>
-                    `).join('')}
-                </table>
-            `;;
-
-        // Append both the banks and hashes sections to the "matches" element
-        matches.innerHTML = banksHTML + hashesTableHTML;
-    }
-</script>
\ No newline at end of file
diff --git a/hasher-matcher-actioner/src/OpenMediaMatch/templates/pages/banks.html.j2 b/hasher-matcher-actioner/src/OpenMediaMatch/templates/pages/banks.html.j2
index 37e14cd5e..5dca12068 100644
--- a/hasher-matcher-actioner/src/OpenMediaMatch/templates/pages/banks.html.j2
+++ b/hasher-matcher-actioner/src/OpenMediaMatch/templates/pages/banks.html.j2
@@ -1,12 +1,4 @@
 {# Copyright (c) Meta Platforms, Inc. and affiliates. #}
 <div class="container my-3">
-    {% include "components/banks_grid.html.j2" %}
-</div>
-
-<div class="container my-3">
-    {% include "components/add_to_bank_form.html.j2" %}
-</div>
-
-<div class="container my-3">
-    {% include "components/match_form.html.j2" %}
+    {% include "components/banks/banks_grid.html.j2" %}
 </div>
\ No newline at end of file