Ui/create edit transformation fixes #9668

Monkeychip · 2020-08-05T20:09:18Z

This PR:

fixes the create transformation issue with the stringArray error
conditionally shows with the tweak_source or masking field based on the type selected.
serializes the masking data such that instead of displaying a character code, which is what is returned by the API, we display the character (e.g. we now show * and not 42).
Starts to layout the "show" display of a transformation. My next PR will finish this.
Fixes issue with template vs templates on the POST vs GET requests, respectfully. These will likely be changed again once the BE fixes the issue.

Here is a gif run through:

… text for create transformation

… character

…TODO: turn into components.

…ormation-itme list accordingly

…tion-fixes

chelshaw

Really great work so far! A few questions, happy to chat about it (especially the serializer thing, which I'm sure I'm missing some context on)

chelshaw · 2020-08-11T15:19:20Z

ui/app/serializers/transform.js

+
+    if (payload.data.templates && payload.data.templates.length === 1) {
+      // add space after comma in returned array length one of a string of templates
+      payload.data.templates[0] = payload.data.templates[0].replace(/,/g, ', ');


If we're adding a comma for display purposes I would expect the controller to add that in, not the serializer. I'm also a little confused why we're adding it only to the first template? Maybe an example of the before and after here would be helpful.

Let's discuss during our sync. This was a request by design, but becomes a problem with Roles because the data is structured differently. And yeah, I originally thought of using a serializer because it was changing the data, but it's more of a display thing. It should go in a controller.

Removing for now based on discussion

ui/app/styles/core/forms.scss

chelshaw · 2020-08-11T15:20:35Z

ui/app/styles/core/forms.scss

@@ -73,6 +73,7 @@ label {
 .sub-text {
  color: $grey;
  margin-bottom: 0.25rem;
+  font-size: 12px;


Here too. If the designs don't match the sizing variables we have we need to revisit with the design team

See comment above.

ui/app/templates/components/transform-edit-form.hbs

chelshaw · 2020-08-11T15:22:22Z

ui/app/templates/components/transform-show-transformation.hbs

+    </div>
+    <div class="copy-text level">
+      <code>vault write transform/encode/payments value=&lt;enter your value here&gt;</code>
+      <CopyButton class="button is-transparent level-right" @clipboardText='blahblah'


The @clipboardText should probably be the command above, which makes me think this is a perfect use case for the handlebars {{let}} helper

You may have to walk me through that one. Let's touch base in the sync later today

That's sweet!!

chelshaw · 2020-08-11T15:22:34Z

ui/app/templates/components/transform-show-transformation.hbs

+    </div>
+    <div class="copy-text level">
+      <code>vault write transform/decode/payments value=&lt;enter your value here&gt;</code>
+      <CopyButton class="button is-transparent level-right" @clipboardText='blahblah'


Here too! :D

chelshaw · 2020-08-11T15:24:48Z

ui/app/templates/components/transformation-edit.hbs

        >
-          Delete role
+          Delete transformation
        </ConfirmAction>
      {{/if}}
      {{#if (or model.canUpdate model.canDelete)}}


Someone with only delete capabilities can edit the transformation, is that right?

Ah, good catch. I was using a pattern from the template earlier, but they to have canUpdate in order to edit, not canDelete. I'll amend.

chelshaw · 2020-08-11T15:28:52Z

ui/app/templates/partials/secret-list/transform-transformation-item.hbs

@@ -0,0 +1,62 @@
+{{#linked-block
+  (concat


Probably don't need concat if it's all magic strings

Good catch, another carry over from copying from a different template.

ui/app/templates/partials/secret-list/transform-transformation-item.hbs

* Ui/transform enable (#9647) * Show Transform on engines list if enterprise * Add box-radio component * Add is-disabled styling for box-radio and fix tooltip styling when position: above * Add KMIP and Transform to possible features on has feature helper * Sidebranch: Transform Secret Engine Initial setup (#9625) * WIP // list transforms, console.logs and all * setup LIST transformations ajax request and draft out options-for-backend options * change from plural to singluar and add transform to secret-edit * create two transform edit components * modify transform model with new attrs * add adapterFor to connect transform adapter to transform-edit-form component * setup Allowed roles searchSelect component to search over new transform/role adapter and model. * clean up for PR * clean up linting errors * restructure adapter call, now it works. * remove console * setup template model for SearchSelect component * add props to form field and search select for styling Co-authored-by: Chelsea Shaw <[email protected]> * Ui/transform language fixes (#9666) * Update casing and wording on Transform list route. Use generic list item for transformations * Add back js file for transformation-edit * Set up transform for tabs * Ui/create edit transformation fixes (#9668) * add conditional for masking vs tweak source based on type, and update text for create transformation * change order * fix error with stringArray * setup the edit/delete transformation view * clean up toolbar links * setup serializer to change response of mask character from keycode to character * change styling of label and sub-text size, confirmed with design * temp fix on templates vs template * add clickable list item * add space between template list * setup styling and structure for the rest of the show transformation. TODO: turn into components. * create transform-show-transformation component * add attachCapabilities to transform model and update transform-transformation-itme list accordingly * clean up liniting errors * address pr comments * remove leftover * clean up * Sidebranch: UI transform create and edit clean up (#9778) * clean up some of the TODOs * setup edit view with read only attributes for name and template * setup initial selected for search select component * fixes * hide templates form field for now * set selectLimit for search select component * hide power select if the select limit is greater than or equal to the selectedOptions length * clean up failing linting * address pr comments * Ui/fix list roles transformation (#9788) * Update search-select to pass backend to query if exists * Update role and template adapters * cleanup * Fix replace with static string * Ui/transform cleanup 2 (#9789) * amend encode/decode commands for now until design gets back with more details * restrict character count on masking input field * clean up selectLimit * show backend instead of transform in cli copy command * Show KMIP un-selectable if enterprise but no ADP module (#9780) * New component transform-edit-base * Duplicate RoleEdit as TransformEditBase and swap in all transform components * Roll back role-edit changes * Update to transform edit base * Remove extraeneous set backend type on transform components * formatting * Revert search-select changes * Update template/templates data on transformation (#9838) Co-authored-by: Angel Garbarino <[email protected]>

Monkeychip added 6 commits August 5, 2020 09:57

add conditional for masking vs tweak source based on type, and update…

c2fe735

… text for create transformation

change order

71d6423

fix error with stringArray

d25a15f

setup the edit/delete transformation view

929b574

clean up toolbar links

adeef54

setup serializer to change response of mask character from keycode to…

ac7403b

… character

Monkeychip added the ui label Aug 5, 2020

Monkeychip added 9 commits August 6, 2020 10:56

change styling of label and sub-text size, confirmed with design

aea22a3

temp fix on templates vs template

1cad8d2

add clickable list item

33f2924

add space between template list

fb58b2a

setup styling and structure for the rest of the show transformation. …

495802f

…TODO: turn into components.

create transform-show-transformation component

7294361

add attachCapabilities to transform model and update transform-transf…

1cafa55

…ormation-itme list accordingly

clean up liniting errors

a3de72a

Merge branch 'ui/transform-sidebranch' into ui/create-edit-transforma…

2cf8bd3

…tion-fixes

chelshaw suggested changes Aug 11, 2020

View reviewed changes

Monkeychip added 3 commits August 11, 2020 15:37

address pr comments

d3dba72

remove leftover

48720ab

clean up

d01b83c

Monkeychip merged commit 5b3282e into ui/transform-sidebranch Aug 11, 2020

Monkeychip deleted the ui/create-edit-transformation-fixes branch August 11, 2020 21:46

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Ui/create edit transformation fixes #9668

Ui/create edit transformation fixes #9668

Monkeychip commented Aug 5, 2020 •

edited

Loading

chelshaw left a comment

chelshaw Aug 11, 2020

Monkeychip Aug 11, 2020

Monkeychip Aug 11, 2020

chelshaw Aug 11, 2020

Monkeychip Aug 11, 2020

chelshaw Aug 11, 2020

Monkeychip Aug 11, 2020

Monkeychip Aug 11, 2020

chelshaw Aug 11, 2020

chelshaw Aug 11, 2020

Monkeychip Aug 11, 2020

chelshaw Aug 11, 2020

Monkeychip Aug 11, 2020

Ui/create edit transformation fixes #9668

Ui/create edit transformation fixes #9668

Conversation

Monkeychip commented Aug 5, 2020 • edited Loading

chelshaw left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Monkeychip commented Aug 5, 2020 •

edited

Loading