openshift / angular-key-value-editor Goto Github PK

Code snippet when bug found:

<span ng-if="entry.keyValidatorErrorTooltip || keyValidatorErrorTooltip" class="help action-inline">
            <a aria-hidden="true" data-toggle="tooltip" data-placement="top" title="{{entry.keyValidatorErrorTooltip || keyValidatorErrorTooltip}}">
              <i class="{{entry.keyValidatorErrorTooltipIcon || keyValidatorErrorTooltipIcon}}"></i>
            </a>
          </span>

did not render properly via bootstrap tooltip, hack around was to use data-original-title="" directly, but this isn't right.

@rhamilto

I still wonder if we can eliminate the repetitive inputs. The template is pretty complex, if its possible to reduce repetition it will likely save us some future bugs.

@rhamilto

This is a "key value pair"... but the value is something complicated that really can't be displayed. Therefore we probably need a displayName property on the entry.

Since these functions filter, rather than needing to require keyValueEditorUtils and call fns on the service, these 4 util functions should also be exposed as filters so can be used simply by requiring $filter and using $filter('kveCleanEntires')($scope.entries).

If this ever becomes a thing in font awesome: FortAwesome/Font-Awesome#816

Per discussion on this issue in origin web console: openshift/origin-web-console#150

also mentions updating the icon.

@rhamilto just for tracking.

Noticed this why hammering keys with both hands just messing around to see how fast the events fired. Occasionally two letters such as 'f' and 'd' will create two separate entries, one with 'f', and one with 'd', for example. Is not super frequent, but slightly annoying.

in this code:

  // min/max lengths
            $scope.keyMinlength = keyValueEditorConfig.keyMinlength || $attrs.keyMinlength;
            $scope.keyMaxlength = keyValueEditorConfig.keyMaxlength || $attrs.keyMaxlength;
            $scope.valueMinlength = keyValueEditorConfig.valueMinlength || $attrs.valueMinlength;
            $scope.valueMaxlength = keyValueEditorConfig.valueMaxlength || $attrs.valueMaxlength;
            // validation regex
            $scope.keyValidator = keyValueEditorConfig.keyValidator || $attrs.keyValidator;
            $scope.valueValidator = keyValueEditorConfig.valueValidator || $attrs.valueValidator;
            $scope.keyValidatorError = keyValueEditorConfig.keyValidatorError || $attrs.keyValidatorError;
            $scope.valueValidatorError = keyValueEditorConfig.valueValidatorError || $attrs.valueValidatorError;
            // key value validator error tooltip
            $scope.keyValidatorErrorTooltip = keyValueEditorConfig.keyValidatorErrorTooltip || $attrs.keyValidatorErrorTooltip;
            $scope.keyValidatorErrorTooltipIcon = keyValueEditorConfig.keyValidatorErrorTooltipIcon || $attrs.keyValidatorErrorTooltipIcon;
            // secret values
            $scope.secretValueTooltip = keyValueEditorConfig.secretValueTooltip || $attrs.secretValueTooltip;
            $scope.secretValueIcon = keyValueEditorConfig.secretValueIcon || $attrs.secretValueIcon;
            // placeholders
            $scope.keyPlaceholder = keyValueEditorConfig.keyPlaceholder || $attrs.keyPlaceholder;
            $scope.valuePlaceholder = keyValueEditorConfig.valuePlaceholder || $attrs.valuePlaceholder;

Seems like the $attrs should come first. @rhamilto

When <key-value-editor add-row-link> is used, clicking that link should automatically set the focus on the first input in the newly added row.

@jwforres

Opening this mostly to illustrate why it won't be supported.

Illustration:

var list = [{
  name: 'foo',
  value: 'bar'
  isReadonly: true
}, {
  name: 'foo2',
  value: 'bar2'
  cannotDelete: true
}];

var list2 = {
  foo: 'bar',        // now, how to add additional props? mess. nope.
  foo2: 'bar2'
}

A plain object of key-value pairs can't be supported while also supporting the additional properties desired. For this reason, objects should be converted to a list to display with this control, then back to an object when user interaction is complete (save, etc).

@rhamilto just documenting why this wont work

@rhamilto thoughts? I think we talked about this before.

Prob some of the features cannot be easily tested via standard unit tests. Therefore setting up protractor would probably be handy.

Rather than just being in the link fn as an || 'add row', the "add row" could easily be pulled from the provider like other configurable text.

@rhamilto you get to do this.

PR that removed:
https://github.com/openshift/angular-key-value-editor/pull/99/files

Curious the right fix:

• could put back the bootstrap include and tell people to use the dist/css. The issue there is perhaps someone could override bootstrap vars and want to build the kve css with their overriden bootstrap. Not sure what the typical solution is for that but something to think about someday when it matters :)

@rhamilto just for reference

Just documenting this. Erm...name?
keyMinlength, keyPlaceholder, keyMaxLength, keyValidator, etc all applies to name. heh.

@rhamilto 😄

Example:

<key-value-editor
    entries="entries"
    is-readonly
    add-row-link></key-value-editor>

the add-row-link will exist, but is-readonly means no rows can be edited. Don't use add-row-link with is-readonly. This is simple enough, but could be problematic if some attribs are conditionally applied via ng-attr-* usage.

Need to ensure that screen readers can clearly communicate the purpose of each input.

Per this issue:
openshift/origin-web-console#431

This is not an issue if the original "tabbable" inputs are used instead of the link.

To avoid weird things...

kinda seems complicated to do this though.

in Openshift? pass it up to Patternfly? leave it here? @rhamilto

Right now we are tacking on an extra empty pair every time the last pair is clicked. This may need to be adjusted, perhaps by putting the "new" empty item in its own separate block until the user interacts with it. $dirty may be the route to take, however it may just end up being the responsibity of the object receiving the pairs to ensure final validation (ie, no lingering empty pairs anywhere, as the user could blank them all out).

The placeholders seem odd, see example image:

@jwforres

In the web console of openshift we will have key value pars where the value is a complex object (something like choosing a value from a secret, or from a config map). This directive needs to be able to take an array of data to "choose" from, or perhaps take a url that would allow it to fetch data to then present as a picker.

I'm leaning towards no HTTP calls, that should be provided by calling code (controller).

Might be less messy than a bunch of attribs? Look @ <ui-ace> directive.
Per conversation w/@spadgett.

add a "save" button to the demo that will take the UI copy of the data and merge it back into the original data to conceptually send to server (or whatever is going to be done with it).

We have enough dense complexity here that it really would be nice to run tests when we commit at this point & avoid regressions.

    var last = function(entries) {
      return entries && entries[entries.length - 1];
    };

@rhamilto

https://docs.angularjs.org/api/ng/directive/ngMaxlength

'is-readonly' attribute should take boolean, since the there are cases we want to have the envVar editor readlony and cases we don't.
Eg: different users have different actions allowed, so when checking user's permissions we would pass the result into the attribute

Removed this block, but perhaps should put it back:

#cache:
#  directories:
#  - node_modules
#  - bower_components

There is a toJSON directive or filter I think....

It may be helpful to add text messages to the validation, rather than just a red border on the input. The ng-messages directive is useful for this.

bower complains:

bower angular-key-value-editor#1.1.0     invalid-meta The "main" field has to contain only 1 file per filetype; found multiple .js files: ["dist/angular-key-value-editor.js","dist/compiled-templates.js"]

Fix is probably to create a third file & put the minified js + compiled templates together (but leaves option for someone to opt out of templates).

run jshint?

• key-placeholder and value-placeholder double up to also be headers if show-header exists
• is-readonly hides the placeholders to improve readability

Just making a not to think about this and make sure its sensible.

@rhamilto just found this when added to web console :)

  "main": [
    "dist/angular-key-value-editor.css",
    "dist/angular-key-value-editor.js",
    "dist/compiled-templates.js"
  ],

Need an attrib that implies 'edit value only'. Essentially just means you cant delete a key, but you can change to any value, or set to ''.

Use case openshift/origin-web-console#161 (comment)

Some values may be quite a bit larger and require a textbox instead of an input.

@rhamilto im adding as issues so we can work on them if we divvy out anything

A general keyValidator and valueValidator property should be able to be set to provide regex validation for the key-value pairs.

Ideally these should be able to be provided on each entry as keyValidator: '<some-regex>' so individual entries can be uniquely validated if they serve different purposes

Icons in the editor are not displayed correctly at certain witdhs. eg: