From 8c20d2980619a556ccdfa43be89f082ffec1acbe Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Wed, 26 May 2021 15:28:41 -0400
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20add=20remove=20array=20i?=
 =?UTF-8?q?tem=20support=20to=20oidc=20form?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rose/addon/components/rose/form/index.hbs |   1 +
 .../rose/components/form/_fieldset.scss       |   2 +
 .../app/components/form/auth-method/index.hbs |   1 +
 .../form/auth-method/oidc/index.hbs           | 194 +++++++++++-------
 .../components/form/auth-method/oidc/index.js |   2 -
 .../app/routes/scopes/scope/auth-methods.js   |  14 ++
 ui/admin/app/styles/app.scss                  |  12 +-
 .../scope/auth-methods/auth-method/index.hbs  |   1 +
 8 files changed, 148 insertions(+), 79 deletions(-)

diff --git a/addons/rose/addon/components/rose/form/index.hbs b/addons/rose/addon/components/rose/form/index.hbs
index 80b027371..8c545ec22 100644
--- a/addons/rose/addon/components/rose/form/index.hbs
+++ b/addons/rose/addon/components/rose/form/index.hbs
@@ -30,5 +30,6 @@
       cancel=this.handleCancel
       enableEdit=this.enableEdit
     )
+    isEditable=this.isEditable
   )}}
 </form>
diff --git a/addons/rose/addon/styles/rose/components/form/_fieldset.scss b/addons/rose/addon/styles/rose/components/form/_fieldset.scss
index 8696ad562..d0b35d2ea 100644
--- a/addons/rose/addon/styles/rose/components/form/_fieldset.scss
+++ b/addons/rose/addon/styles/rose/components/form/_fieldset.scss
@@ -2,6 +2,8 @@
 @use '../../utilities/type';
 
 .rose-form-fieldset {
+  margin-bottom: sizing.rems(m);
+  
   .rose-form-fieldset-title {
     @include type.type(l, bold);
   }
diff --git a/ui/admin/app/components/form/auth-method/index.hbs b/ui/admin/app/components/form/auth-method/index.hbs
index 478c2ea91..9ac27859f 100644
--- a/ui/admin/app/components/form/auth-method/index.hbs
+++ b/ui/admin/app/components/form/auth-method/index.hbs
@@ -4,5 +4,6 @@
     model=@model
     submit=@submit
     cancel=@cancel
+    removeItemByIndex=@removeItemByIndex
   }}
 {{/if}}
\ No newline at end of file
diff --git a/ui/admin/app/components/form/auth-method/oidc/index.hbs b/ui/admin/app/components/form/auth-method/oidc/index.hbs
index c7ac8ad4a..a0ababf3d 100644
--- a/ui/admin/app/components/form/auth-method/oidc/index.hbs
+++ b/ui/admin/app/components/form/auth-method/oidc/index.hbs
@@ -39,7 +39,6 @@
     @label={{t 'form.description.label'}}
     @helperText={{t 'form.description.help'}}
     @error={{@model.errors.description}}
-    disabled={{@model.isSaving}}
     readonly={{false}}
     as |field|
   >
@@ -124,7 +123,7 @@
     <:title>{{t 'form.signing_algorithms.label'}}</:title>
     <:description>{{t 'form.signing_algorithms.help'}}</:description>
     <:body>
-      <Rose::Table @style="condensed" as |table|>
+      <Rose::Table @style='condensed' as |table|>
         <table.header as |header|>
           <header.row @hidden={{true}} as |row|>
             <row.headerCell>{{t 'titles.value'}}</row.headerCell>
@@ -140,16 +139,22 @@
                   @error={{@model.errors.attributes.signing_algorithms}}
                   @contextual={{true}}
                   @onChange={{fn (mut algorithm.value)}}
-                as |field|>
+                  as |field|
+                >
                   <field.label>{{t 'form.algorithm.label'}}</field.label>
                   <field.field as |select|>
                     {{#each this.signingAlgorithms as |algorithm|}}
-                      <select.option @value={{algorithm}}>{{algorithm}}</select.option>
+                      <select.option
+                        @value={{algorithm}}
+                      >{{algorithm}}</select.option>
                     {{/each}}
                   </field.field>
                   {{#if @model.errors.attributes.signing_algorithms}}
                     <field.errors as |errors|>
-                      {{#each @model.errors.attributes.signing_algorithms as |error|}}
+                      {{#each
+                        @model.errors.attributes.signing_algorithms
+                        as |error|
+                      }}
                         <errors.message>{{error.message}}</errors.message>
                       {{/each}}
                     </field.errors>
@@ -158,57 +163,14 @@
               </row.cell>
               <row.cell @shrink={{true}}>
                 <Rose::Button
-                  @style='secondary'
-                  @iconOnly='trash'
-                  title={{t 'actions.remove'}}
-                >
-                  {{t 'actions.remove'}}
-                </Rose::Button>
-              </row.cell>
-            </body.row>
-          {{/each}}
-        </table.body>
-      </Rose::Table>
-    </:body>
-  </Rose::Form::Fieldset>
-
-  {{! Certificates }}
-  <Rose::Form::Fieldset>
-    <:title>{{t 'form.idp_ca_certs.label'}}</:title>
-    <:description>{{t 'form.idp_ca_certs.help'}}</:description>
-    <:body>
-      <Rose::Table @style="condensed" as |table|>
-        <table.header as |header|>
-          <header.row @hidden={{true}} as |row|>
-            <row.headerCell>{{t 'titles.value'}}</row.headerCell>
-            <row.headerCell>{{t 'titles.actions'}}</row.headerCell>
-          </header.row>
-        </table.header>
-        <table.body as |body|>
-          {{#each @model.attributes.idp_ca_certs as |cert i|}}
-            <body.row as |row|>
-              <row.cell>
-                <form.textarea
-                  @value={{cert.value}}
-                  @error={{@model.errors.attributes.idp_ca_certs}}
-                  @contextual={{true}}
-                as |field|>
-                  <field.label>{{t 'form.certificate.label'}}</field.label>
-                  <field.field />
-                  {{#if @model.errors.attributes.idp_ca_certs}}
-                    <field.errors as |errors|>
-                      {{#each @model.errors.attributes.idp_ca_certs as |error|}}
-                        <errors.message>{{error.message}}</errors.message>
-                      {{/each}}
-                    </field.errors>
-                  {{/if}}
-                </form.textarea>
-              </row.cell>
-              <row.cell @shrink={{true}}>
-                <Rose::Button
-                  @style='secondary'
+                  @style='warning'
                   @iconOnly='trash'
                   title={{t 'actions.remove'}}
+                  @disabled={{if form.isEditable false true}}
+                  {{on
+                    'click'
+                    (fn @removeItemByIndex 'attributes.signing_algorithms' i)
+                  }}
                 >
                   {{t 'actions.remove'}}
                 </Rose::Button>
@@ -225,7 +187,7 @@
     <:title>{{t 'form.allowed_audiences.label'}}</:title>
     <:description>{{t 'form.allowed_audiences.help'}}</:description>
     <:body>
-      <Rose::Table @style="condensed" as |table|>
+      <Rose::Table @style='condensed' as |table|>
         <table.header as |header|>
           <header.row @hidden={{true}} as |row|>
             <row.headerCell>{{t 'titles.value'}}</row.headerCell>
@@ -241,12 +203,16 @@
                   @value={{audience.value}}
                   @error={{@model.errors.attributes.allowed_audiences}}
                   @contextual={{true}}
-                as |field|>
+                  as |field|
+                >
                   <field.label>{{t 'form.claim.label'}}</field.label>
                   <field.field />
                   {{#if @model.errors.attributes.allowed_audiences}}
                     <field.errors as |errors|>
-                      {{#each @model.errors.attributes.allowed_audiences as |error|}}
+                      {{#each
+                        @model.errors.attributes.allowed_audiences
+                        as |error|
+                      }}
                         <errors.message>{{error.message}}</errors.message>
                       {{/each}}
                     </field.errors>
@@ -255,9 +221,14 @@
               </row.cell>
               <row.cell @shrink={{true}}>
                 <Rose::Button
-                  @style='secondary'
+                  @style='warning'
                   @iconOnly='trash'
                   title={{t 'actions.remove'}}
+                  @disabled={{if form.isEditable false true}}
+                  {{on
+                    'click'
+                    (fn @removeItemByIndex 'attributes.allowed_audiences' i)
+                  }}
                 >
                   {{t 'actions.remove'}}
                 </Rose::Button>
@@ -274,11 +245,11 @@
     <:title>{{t 'form.claims_scopes.label'}}</:title>
     <:description>{{t 'form.claims_scopes.help'}}</:description>
     <:body>
-      <Rose::Table @style="condensed" as |table|>
+      <Rose::Table @style='condensed' as |table|>
         <table.header as |header|>
           <header.row @hidden={{true}} as |row|>
             <row.headerCell>{{t 'titles.value'}}</row.headerCell>
-            <row.headerCell></row.headerCell>
+            <row.headerCell />
           </header.row>
         </table.header>
         <table.body as |body|>
@@ -289,13 +260,17 @@
                   @type='text'
                   @value={{claimsScope.value}}
                   @error={{@model.errors.attributes.claims_scopes}}
-
-                as |field|>
+                  @contextual={{true}}
+                  as |field|
+                >
                   <field.label>{{t 'form.claims_scope.label'}}</field.label>
                   <field.field />
                   {{#if @model.errors.attributes.claims_scopes}}
                     <field.errors as |errors|>
-                      {{#each @model.errors.attributes.claims_scopes as |error|}}
+                      {{#each
+                        @model.errors.attributes.claims_scopes
+                        as |error|
+                      }}
                         <errors.message>{{error.message}}</errors.message>
                       {{/each}}
                     </field.errors>
@@ -304,9 +279,14 @@
               </row.cell>
               <row.cell @shrink={{true}}>
                 <Rose::Button
-                  @style='secondary'
+                  @style='warning'
                   @iconOnly='trash'
                   title={{t 'actions.remove'}}
+                  @disabled={{if form.isEditable false true}}
+                  {{on
+                    'click'
+                    (fn @removeItemByIndex 'attributes.claims_scopes' i)
+                  }}
                 >
                   {{t 'actions.remove'}}
                 </Rose::Button>
@@ -323,7 +303,7 @@
     <:title>{{t 'form.account_claim_maps.label'}}</:title>
     <:description>{{t 'form.account_claim_maps.help'}}</:description>
     <:body>
-      <Rose::Table @style="condensed" as |table|>
+      <Rose::Table @style='condensed' as |table|>
         <table.header as |header|>
           <header.row as |row|>
             <row.headerCell>{{t 'form.from_claim.label'}}</row.headerCell>
@@ -340,12 +320,16 @@
                   @value={{claimMap.from}}
                   @error={{@model.errors.attributes.account_claim_maps}}
                   @contextual={{true}}
-                as |field|>
+                  as |field|
+                >
                   <field.label>{{t 'form.from_claim.label'}}</field.label>
                   <field.field />
                   {{#if @model.errors.attributes.account_claim_maps}}
                     <field.errors as |errors|>
-                      {{#each @model.errors.attributes.account_claim_maps as |error|}}
+                      {{#each
+                        @model.errors.attributes.account_claim_maps
+                        as |error|
+                      }}
                         <errors.message>{{error.message}}</errors.message>
                       {{/each}}
                     </field.errors>
@@ -358,16 +342,22 @@
                   @error={{@model.errors.attributes.account_claim_maps}}
                   @contextual={{true}}
                   @onChange={{fn (mut claimMap.to)}}
-                as |field|>
+                  as |field|
+                >
                   <field.label>{{t 'form.to_claim.label'}}</field.label>
                   <field.field as |select|>
                     {{#each this.toClaims as |toClaim|}}
-                      <select.option @value={{toClaim}}>{{toClaim}}</select.option>
+                      <select.option
+                        @value={{toClaim}}
+                      >{{toClaim}}</select.option>
                     {{/each}}
                   </field.field>
                   {{#if @model.errors.attributes.account_claim_maps}}
                     <field.errors as |errors|>
-                      {{#each @model.errors.attributes.account_claim_maps as |error|}}
+                      {{#each
+                        @model.errors.attributes.account_claim_maps
+                        as |error|
+                      }}
                         <errors.message>{{error.message}}</errors.message>
                       {{/each}}
                     </field.errors>
@@ -376,9 +366,14 @@
               </row.cell>
               <row.cell @shrink={{true}}>
                 <Rose::Button
-                  @style='secondary'
+                  @style='warning'
                   @iconOnly='trash'
                   title={{t 'actions.remove'}}
+                  @disabled={{if form.isEditable false true}}
+                  {{on
+                    'click'
+                    (fn @removeItemByIndex 'attributes.account_claim_maps' i)
+                  }}
                 >
                   {{t 'actions.remove'}}
                 </Rose::Button>
@@ -390,6 +385,61 @@
     </:body>
   </Rose::Form::Fieldset>
 
+  {{! Certificates }}
+  <Rose::Form::Fieldset>
+    <:title>{{t 'form.idp_ca_certs.label'}}</:title>
+    <:description>{{t 'form.idp_ca_certs.help'}}</:description>
+    <:body>
+      <Rose::Table @style='condensed' as |table|>
+        <table.header as |header|>
+          <header.row @hidden={{true}} as |row|>
+            <row.headerCell>{{t 'titles.value'}}</row.headerCell>
+            <row.headerCell>{{t 'titles.actions'}}</row.headerCell>
+          </header.row>
+        </table.header>
+        <table.body as |body|>
+          {{#each @model.attributes.idp_ca_certs as |cert i|}}
+            <body.row as |row|>
+              <row.cell>
+                <form.textarea
+                  @value={{cert.value}}
+                  @error={{@model.errors.attributes.idp_ca_certs}}
+                  @contextual={{true}}
+                  as |field|
+                >
+                  <field.label>{{t 'form.certificate.label'}}</field.label>
+                  <field.field />
+                  {{#if @model.errors.attributes.idp_ca_certs}}
+                    <field.errors as |errors|>
+                      {{#each @model.errors.attributes.idp_ca_certs as |error|}}
+                        <errors.message>{{error.message}}</errors.message>
+                      {{/each}}
+                    </field.errors>
+                  {{/if}}
+                </form.textarea>
+              </row.cell>
+              <row.cell @shrink={{true}}>
+                <Rose::Button
+                  @style='warning'
+                  @iconOnly='trash'
+                  title={{t 'actions.remove'}}
+                  @disabled={{if form.isEditable false true}}
+                  {{on
+                    'click'
+                    (fn @removeItemByIndex 'attributes.idp_ca_certs' i)
+                  }}
+                >
+                  {{t 'actions.remove'}}
+                </Rose::Button>
+              </row.cell>
+            </body.row>
+          {{/each}}
+          {{! Add field }}
+        </table.body>
+      </Rose::Table>
+    </:body>
+  </Rose::Form::Fieldset>
+
   <form.input
     @name='max_age'
     @type='number'
@@ -436,4 +486,4 @@
     @submitText={{t 'actions.save'}}
     @cancelText={{t 'actions.cancel'}}
   />
-</Rose::Form>
+</Rose::Form>
\ No newline at end of file
diff --git a/ui/admin/app/components/form/auth-method/oidc/index.js b/ui/admin/app/components/form/auth-method/oidc/index.js
index 4e4ac6f8b..fd99fc353 100644
--- a/ui/admin/app/components/form/auth-method/oidc/index.js
+++ b/ui/admin/app/components/form/auth-method/oidc/index.js
@@ -2,7 +2,6 @@ import Component from '@glimmer/component';
 import { options } from 'api/models/auth-method';
 
 export default class FormAuthMethodOidcComponent extends Component {
-
   // =attributes
   /**
    * @type {object}
@@ -13,5 +12,4 @@ export default class FormAuthMethodOidcComponent extends Component {
    * @type {object}
    */
   toClaims = options.oidc.account_claim_maps.to;
-
 }
diff --git a/ui/admin/app/routes/scopes/scope/auth-methods.js b/ui/admin/app/routes/scopes/scope/auth-methods.js
index 291a9573d..d432f9b9d 100644
--- a/ui/admin/app/routes/scopes/scope/auth-methods.js
+++ b/ui/admin/app/routes/scopes/scope/auth-methods.js
@@ -134,4 +134,18 @@ export default class ScopesScopeAuthMethodsRoute extends Route {
     }
     await authMethod.reload();
   }
+
+  /**
+   * Removes an item from array `property` at `index` on the
+   * passed `authMethod`.  This is used to manage entries in fragment array
+   * fields such as `signing_algorithms`.
+   * @param {AuthMethodModel} authMethod
+   * @param {string} property
+   * @param {number} index
+   */
+  @action
+  async removeItemByIndex(authMethod, property, index) {
+    const array = authMethod.get(property);
+    array.removeAt(index);
+  }
 }
diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss
index 420258319..9defaac7b 100644
--- a/ui/admin/app/styles/app.scss
+++ b/ui/admin/app/styles/app.scss
@@ -80,11 +80,13 @@
     }
   }
 
-  fieldset {
-    margin-bottom: sizing.rems(m);
-
-    legend {
-      @extend .rose-form-label;
+  .rose-form-fieldset {
+    .rose-table {
+      .rose-form-label {
+        position: absolute;
+        top: -9999px;
+        left: -9999px;
+      }
     }
   }
 }
diff --git a/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/index.hbs b/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/index.hbs
index b82869296..f610fc81e 100644
--- a/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/index.hbs
@@ -2,4 +2,5 @@
   @model={{@model}}
   @submit={{route-action 'save' @model}}
   @cancel={{route-action 'cancel' @model}}
+  @removeItemByIndex={{route-action 'removeItemByIndex' @model}}
 />
\ No newline at end of file