feat: add redact pii data label on UI

app/views/app_groups/_applications.html.slim

@@ -69,6 +69,9 @@ h4.mb-3 All Applications
             .btn.btn-primary.btn-sm data-toggle="modal" data-target="#manage-label-modal" data-app-name=app.name data-app-path=update_labels_app_path(app)
               i.fa.fa-tag.text-light
 
+            .btn.btn-primary.btn-sm data-toggle="modal" data-target="#manage-label-redact-modal" data-app-name=app.name data-app-path=update_labels_app_path(app)
+              i.fa.fa-plus.text-light
+
             - if allow_delete
               .btn.btn-danger.btn-sm
                 = link_to "", app_path(app), method: :delete, data: { confirm: 'Are you sure?' }, id: "delete_app_button_#{app.id}", class: 'far fa-trash-alt text-light'

app/views/app_groups/_redact-modal.html.slim

@@ -0,0 +1,167 @@
+div.modal.fade id="manage-label-redact-modal" tabindex="-1" role="dialog" aria-labelledby="manage-label-modal-title" aria-hidden=true
+    div.modal-dialog role="document"
+        div.modal-content
+            = form_with(url: update_labels_app_group_path, method: 'patch', local: true, id: 'update-labels')
+            div.modal-header
+                h5.modal-title#manage-label-redact-modal-title
+                    = "Manage PII redact Data #{app_group}"
+                button.close data-dismiss="modal" aria-label="close" type="button"
+                    span aria-hidden=true
+                        | ×
+            div.modal-body
+                table.table
+                  thead
+                    tr
+                      th[scope="col"]
+                        | PII
+                      th[scope="col"]
+                        | Value
+                      - if @allow_manage_labels
+                        th[scope="col"]
+                            | Actions
+                  tbody#label-body
+            div.modal-footer
+                - if @allow_manage_labels
+                    button#remove-all-labels.btn.btn-danger type="button"
+                        | remove all labels
+                    button#add-label.btn.btn-success type="button" 
+                        | add label
+                    button#submit-label.btn.btn-primary type="submit"
+                        | update
+
+javascript:
+    const labels = #{labels.to_json.html_safe}
+    const allow_manage_labels = #{allow_manage_labels}
+
+    const removeAllLabels = () => {
+        const rows = $(`tbody#label-body tr[data-idx]`)
+        for (let row of rows) {
+            row.remove()
+        }
+    }
+
+    const removeLabel = idx => {
+        let row = $(`tbody#label-body tr[data-idx="${idx}"]`)
+        if (row.length < 1) {
+            console.log(`rows with label ${idx} not found`)
+        }
+
+        row[0].remove()
+    }
+
+    const generateRow = (pii, data, idx) => {
+            let delete_button = ""
+            if (allow_manage_labels) {
+                delete_button = ` <td>
+                    <button class="btn btn-sm btn-danger" data-idx="${idx}" id="remove-label" type="button">
+                        <i class="far fa-trash-alt"></i>
+                    </button>
+                </td>`
+            }
+            return `<tr data-idx="${idx}">
+                <td>
+                    <input class="form-control" name=pii[] value="${pii}" ${allow_manage_labels ? "" : "disabled"}>
+                </td>
+                <td>
+                    <input class="form-control" name=values[] value="${data}" ${allow_manage_labels ? "" : "disabled"}>
+                </td>
+                ${delete_button}          
+            </tr>`
+        }
+
+    const addLabel = (pii, data, idx) => {
+        let tbody = $('tbody#label-body')
+        let lastIdx = idx || Number($(tbody.children().last()).attr('data-idx'))+1
+        let lastPii = Pii || ""
+        let lastData = data || ""
+        tbody.append(generateRow(lastPii, lastData, lastIdx))
+    }
+
+    const getIdFromClickedButton = event => {
+        return event.currentTarget.id
+    }
+
+    const getRowNumberFromClickedButton = event => {
+        return $(event.currentTarget).attr('data-idx')
+    }
+
+    const onModalButtonClicked = event => {
+        const buttonId = getIdFromClickedButton(event)
+        switch(buttonId) {
+            case "remove-all-labels":
+                removeAllLabels()
+                break
+            case "remove-label":
+                const idx = getRowNumberFromClickedButton(event)
+                removeLabel(idx)
+                break
+            case "add-label":
+                addLabel()
+                break
+        }
+    }
+
+    const removeAppNameField = () => {
+        $(`input[name="app_name"]`).remove()
+    }
+
+    const resetModalFields = () => {
+        removeAllLabels()
+        removeAppNameField()
+        modifyTitle(`Manage PII redact Data #{app_group}`)
+        modifyFormAction(`#{update_labels_app_group_path}`)
+    }
+
+    const getApplicationURLFromClickedButton = event => {
+        return $(event.relatedTarget).attr('data-app-path')
+    }
+    const getApplicationNameFromClickedButton = event => {
+        return $(event.relatedTarget).attr('data-app-name') 
+    }
+    const isManageAppGroupLabelsEvent = event => {
+        return getApplicationNameFromClickedButton(event) === undefined
+    }
+
+    const modifyTitle = text => {
+        $('#manage-label-redact-modal-title').text(text)
+    }
+
+    const modifyFormAction = action => {
+        $('form#update-labels').attr('action', action) 
+    }
+
+    const modifyModalForManageApplicationLabels = event => {
+        let appName = getApplicationNameFromClickedButton(event)
+        modifyFormAction(getApplicationURLFromClickedButton(event))
+
+        // change the title
+        modifyTitle(`Manage PII redact Data #{app_group}: ${appName}`)
+
+        // add app_name field
+        $('tbody#label-body').append(`<input type="hidden" name="app_name" value="${appName}">`)
+
+        return appName
+    }
+
+    const showCurrentLabels = labels => {
+        Object.pii(labels).map((pii, idx) => addLabel(pii, labels[pii], idx+1))
+    }
+
+    const onModalOpen = event => {
+        resetModalFields()
+
+        let shownLabel = []
+        if (isManageAppGroupLabelsEvent(event)) {
+            shownLabel = labels['app-group']
+        } else {
+            let appName = modifyModalForManageApplicationLabels(event)
+            shownLabel = labels[appName]
+        }
+
+        showCurrentLabels(shownLabel)
+    }
+
+    // triggered when the modal is opened
+
+    $('body').on('click', '#manage-label-redact-modal button.btn', onModalButtonClicked)
+    $('#manage-label-redact-modal').on('show.bs.modal', onModalOpen)

app/views/app_groups/show.html.slim

@@ -106,13 +106,21 @@
               = link_to 'Show Helm Infrastructure', helm_infrastructure_path(@app_group.helm_infrastructure), class: 'text-light', style: 'text-decoration: none'
             - else
               = link_to 'Create Helm Infrastructure', new_app_group_helm_infrastructure_path(@app_group), class: 'text-light', style: 'text-decoration: none'
+
+
+        .btn.btn-primary.btn-sm.mr-2 data-toggle="modal" data-target="#manage-label-redact-modal"
+          i.fa.fa-tag.mr-1
+          | Redact PII Data
+
         - if @allow_delete_helm_infrastructure
           div class=("btn btn-danger btn-sm text-light #{!@allow_delete_helm_infrastructure ? 'disabled' : ''}") id=("delete_helm_infrastructure_#{@app_group.helm_infrastructure.id}")
             i.far.fa-trash-alt.mr-1
             = link_to "Delete Helm Infrastructure", delete_helm_infrastructure_path(@app_group.helm_infrastructure.id), method: :delete, data: { confirm: 'Are you sure?' }, class: 'text-light', style: 'text-decoration: none'
 
+
 br
 br
 
 = render 'app_groups/applications', new_app: @new_app, app_group: @app_group, apps: @apps, allow_delete: @allow_delete_barito_app, allow_add: @allow_add_barito_app
 = render 'app_groups/modal', labels: @labels, app_group: @app_group.name, allow_manage_labels:@allow_manage_labels
+= render 'app_groups/redact-modal', labels: @labels, app_group: @app_group.name, allow_manage_labels:@allow_manage_labels