infor-design/enterprise

Enterprise-grade component library for the Infor Design System

enterprise's Issues

SOHO-8027: Datagrid Functional Tests

Is your feature request related to a problem? Please describe.
Datagrid needs tests.

Describe the solution you'd like

Write functional Tests

• Test events that get triggered
• Test events that are listened to
• Test all API methods, most importantly the public ones first and the rest for coverage. (fx enable/disable)
• Test lifecycle methods (init, teardown, destroy, invoke)
• Test setting and that some states are applied

Describe alternatives you've considered
n/a

Additional context
See existing tests for example dropdown, treemap, menubutton, timepicker, spinbox for reference. Also see docs/TESTING.MD for commands

SOHO-7909: Lookup control - Select all checkbox when filtering

Steps to reproduce:

1. Open the modal
2. Use the search control (e.g. use a criteria that return 2-3 records)
3. Click on “Select All” check box

Expected behaviour: it should return only the selected ones (i.e. 2 - 3 records)
Actual behaviour: it is returning all items from list without considering the filter

I have tested it with 4.5 version angular components

Initial Readonly Calendar Control

Made base readonly calendar with events the main things supported so far are

• themes
• locale
• loading events and event types
• filtering event types
• loading more than 2 events in a field
• (very) basic responsive
• changing months
• placeholders for other functionality to be added next sprint
• basic docs and tests for everything so far.

Other info
This used to be SOHO-2182
Remaining items added to #675

Design
SoHo Calendar-UI-v1_050418_JN.pdf

SOHO-7993: Broken links on design.infor.com

Links to examples are broken as follows:

Alerts ->
More Badge Examples
(/) working now

Dropdown ->
States example

Inputs ->
Textarea example

Pager ->
Paging the ListView Component
Paging the Datagrid Component

Searchfield ->
Header Searchfield (compact)
Header Searchfield (Large)

Slider Component =>
setValue() API Demo

Switch component ->
Alternate alighment example

Tabs =>
Update count example

Text Input =>
Test Area example

Tooltip component =>
Demo of setContent() api method

Utilities

All that have examples give a 404 result when clicking the link.

Charts
All chart example links return a 404 page

Unclassified ->

Hierarchy =>
Lazy Loading Example

List Filter =>
Multiselect Filter Types link

Radio Button =>
Horizontal Example (goes to example-index, not correct example)

SOHO-8037: [All Browsers] Contextual Action Panel Control: Unable to close the modal

1. [All Browsers] Contextual Action Panel Control: Unable to close the modal

2. For URLS:
   http://470-beta-enterprise.demo.design.infor.com/components/contextualactionpanel/example-markup.html

and

http://470-beta-enterprise.demo.design.infor.com/components/contextualactionpanel/example-trigger.html

3. Steps to reproduce:

• Click Open Contextual Action Panel Button
• Click outside the modal

SOHO-7928: Datagrid - the Soho.Editors.Lookup editor doesn't support mask

A datagrid column using the Soho.Editors.Lookup does not support mask.

For example would like to restrict the input to 10 numeric characters. This is currently not supported.

So the following does not work (even when adding maskMode and maxLength to SohoDataGridColumn)
columns.push({
id: 'lookup-click',
name: 'Lookup Click',
field: 'productId',
editor: Soho.Editors.Lookup,
editorOptions: {editable: true, click: LMLookupClickFunction},
maskMode: 'number',
mask: '##########',
maxLength: 10
});

SOHO-8161: Busy Indicator Functional and E2E Tests

Add some tests for Busy Indicator

See existing tests for example textarea, dropdown, treemap, menubutton for reference. Also see docs/TESTING.MD for commands. Ask for help on sohoxi-dev if needed.

Functional Tests

• Test events that get triggered
• Test events that are listened to
• Test all API methods, most importantly the public ones first and the rest for coverage. (fx enable/disable)
• Test lifecycle methods (init, teardown, destroy, invoke)
• Test setting and that some states are applied

E2e Tests

• Load each test page in the components//list and test the main ideas of the page, if unsure of the main idea ask on the channel.
• Keyboard

Busy Indicator Specific Test Considerations

• show on body
• customizing text
• on inputs
• non blocking
• on an ajax call
• block ui
• block part area
• block whole page
• contains in font-size 0
• delaying display
• on a tab
• nested
• updating

Other Tests

• Accessibility tests https://github.com/dequelabs/axe-core
• Security Tests
• Specific Test Cases from Cindy
• Protractor Image Comparison Tests

SOHO-8056: [All Browsers] Editor Dirty Tracker Control: Dirty Tracker Alignment Issue

1. http://470-beta-enterprise.demo.design.infor.com/components/editor/example-dirty-tracking.html

2. [All Browsers] Editor Dirty Tracker Control: Dirty Tracker Alignment Issue

3. Steps to reproduce:

4. html view

5. edit text (yellow thing in wrong place)

6. go back to visual

7. go back to html

SOHO-7919: [Android Galaxy 8] Filterable Datagrid Control: Alignment Issue with Filter dropdown list box

1. http://usalvlhlpool1.infor.com/4.6.0-rc/components/datagrid/example-filter

2. [Android Galaxy 8] Filterable Datagrid Control: Alignment Issue with Filter dropdown list box

3. Please see screen shot attached

SOHO-5888: Multiple display issues when datagrid inside tabs and other containers

When a datagrid is inside of certain containers (2-column layout, tabs, expandable areas, etc.), there are the following display issues:

1. Multiselect checkbox is not vertically aligned in middle
2. Drag handle bars don't display at all or display too large
3. Dropdown filter arrow icon is positioned very low

See attached screen shots. I will submit an example too. Please test dark theme too.

I believe the issue is caused by the font-size: 0 or other font-size css rules on these containers.

SOHO-7839: [All Browsers] Data Grid Editable Control: Price Column giving "Nan" error

1. http://usalvlhlpool1.infor.com/4.6.0-rc/components/datagrid/example-editable.html

2. [All Browsers] Data Grid Editable Control: Price Column giving "Nan" error

3. Steps to reproduce:

• Click on any cell in the Price column
• Remove the text from the field box
• Click out of the cell. You will get "Required" icon
• Click back into the same cell and start type anything and click out of the cell
• The "NaN" error appears in the field box. Please see screen shot attached.

****** Also the page record is not working correctly****

SOHO-8121: 4.0 Validation getting multiple events firing for one occurrance

Seeing multiple validation events firing for one occurrence.

For example, using a date field and changing the value to 12, seeing the following events being fired:
{code}
'valid'
'error'
'valid'
'error'
{code}

To duplicate, use the example-index.html that is either attached or located in the validation directory.

• Highlight the date value and replace with 12
• Tab out of the field
• On the console observe the multiple events that were logged.

Also attached is a screenshot/gif demonstrating the issue.

Pager API Updates - To Support Listview having number of records dropdown

Is your feature request related to a problem? Please describe.
Cardview lists should have the dropdown for number of records shown in the footer along with the paging controls. in order to do this in angular/landmark pager.js needs some refactors.

Describe the solution you'd like

• Would like settings to indicate which controls should be used in the pager

next
prev
first
last
page input
page size selector
pager list buttons

• Trigger events when paging actions happen

• Use only events to other components instead of directly linking componentAPI setting

• All updates and control state would take place by a function in pager. (enableFirstButton, enableLastButton for example).

• Existing functionality not broken in any way.

Strawman

<soho-pager  
   [hasPageSizeChooser]=true
 
   [hasFirstButton]="'true'"
   [enableFirstButton]="enableFirstButton"
   ...
 
  (firstButtonClicked)="onFirstButtonClicked()"
  (pageSizeChanged)="onPageSizeChanged()"

Additional context
Issue combined with #438
Formerly SOHO-7823 and SOHO-6841

SOHO-6968: Enhance alerts on data grid rows to show changing values and alerts

Here's what is needed:
A new row indicator. Current implementation adds an additional column which is odd and not optimal.
A mechanism to show which cell in a row has changed or is dirty. Landmark has the ability to know which value has changes so that it can place the dirty indicator in the specific place.

SOHO-8039: [All Browsers] Contextual Action Panel Control: Modal is not closing when clicking "Cancel"

1. http://470-beta-enterprise.demo.design.infor.com/components/contextualactionpanel/example-workspaces.html

2. [All Browsers] Contextual Action Panel Control: Modal is not closing when clicking "Cancel"

Steps to reproduce:

• Click Show Contextual Action Panel Button
• Click Cancel
• The cancel button stays highlighted. Please see screen shot attached
  Second Issue:
• When resizing the pop up there are alignment issues. Please see screen shot attached.

SOHO-8119: Context menu not hidden when clicking on accordion menu

Repro:

1. Setup an accordion menu bar with two menu groups.
2. Setup a context menu to display when clicking on a menu item.
3. Right-click on the menu item (the context-menu is correctly displayed)
4. Click on another menu group in the menu bar (the context menu remains visible).
5. Click somewhere else in the document (the context menu is correctly hidden).

!ContextMenuOnHeader.PNG|thumbnail!

SOHO-7351: Datagrid row reorder breaks in IE11

The row-reorder functionality of the datagrid breaks after moving a few items around. Only happens in IE11.

Reproduce:

• Go to http://usalvlhlpool1.infor.com/4.4.0-rc/components/datagrid/example-row-reorder.html
• Move items around 2-4 times.
  issue occurs here

Expected: It's possible to reorder rows.
Actual: It's not possible to reorder rows.

SOHO-8162: Toast Functional and E2E Tests

Add some tests for Toast

See existing tests for example textarea, dropdown, treemap, menubutton for reference. Also see docs/TESTING.MD for commands. Ask for help on sohoxi-dev if needed.

Functional Tests

• Test events that get triggered
• Test events that are listened to
• Test all API methods, most importantly the public ones first and the rest for coverage. (fx enable/disable)
• Test lifecycle methods (init, teardown, destroy, invoke)
• Test setting and that some states are applied

E2e Tests

• Load each test page in the components//list and test the main ideas of the page, if unsure of the main idea ask on the channel.
• Keyboard

Toast Specific Test Considerations

• positions
• changing text
• api
• new links setting

Other Tests

• Accessibility tests https://github.com/dequelabs/axe-core
• Security Tests
• Specific Test Cases from Cindy
• Protractor Image Comparison Tests

SOHO-7964: Escaped modal title showing escaped characters

When escaping the title of a modal, to prevent XSS, the title will be shown with the escaped characters, not the not the corresponding alphabetical characters.

Reproduce

• Start the local server in the Componenets repo and go to http://localhost:4200/modal-dialog
• Enter the following in the Dialog title input:

<script>alert("menuXSS")</script>

the issue occurs here

Expected: Title shown as <script>alert("menuXSS")</script>
Actual: Title shown as

<script>alert("menuXSS")</script>

SOHO-7481: [All Browsers] Drop Down Filter - No Way to Clear with keyboard.

1. [Win 10 IE11] Data Grid Filter Control: Accessibility Issue For Status Field

2. http://usalvlhlpool1.infor.com/4.4.0-rc/components/datagrid/example-filter.html

3. Steps below to reproduce:

• Click into the "Status" field box
• Click on the dropdown list and click on one of the following: Confirmed, Error, or None
• Once the user clicks on one of the three options and then TAB key back into to clear out the
  selection, The user is unable to clear out the field box for Status.
• In order for the user to see all the values returned they have to refresh the page.

SOHO-8120: Dismissable tag icon misaligned in RTL

The x-icon of dismissable tags are misaligned when running RTL.

Reproduce

• Go to http://localhost:4200/tags with dir="RTL"

ids-enterprise
The x-icon is placed too far to the right.
!ids-enterprise_tag.PNG|thumbnail!
ids-enterprise-ng
The x-icon is placed too far to the right.
The x-icon is placed to far down.
!ids-enterprise-ng_tags.PNG|thumbnail!

Travis CI build integration

@d-g-h What are the npm scripts we want to be running to kick of unit and functional tests?

SOHO-7946: I like Links with my Toast in the morning

Allow hyperlinks in the toast message.

You can see my use case in http://jira.lawson.com/secure/attachment/942586/screenshot-1.png - see http://jira.lawson.com/browse/LMCLIENT-19493.

We had another use-case where if a record is created from a list we could present a link to that newly created record. Much like Jira does when you create a new Jira issue.

See SOHO-7818 for more context and XSS concerns

SOHO-7983: Chart issues in angular controls

Original ticket: SOHO-7983

• 🚫missing animation on radar (wont do)
• ✅ emptyMessage input missing on Pie chart
• 🚫 tooltip input missing on column (wont do)
• ✅ getSelected missing on all chart components
• ✅ setSelected input missing on all chart components

I Believe we could set this by passing an index but we also passed an object with a reference of some kind and a value. You would find the element with the reference attribute and value that matched and select it. In our case we pass a ref vaule in each of our data nodes to tie it back to the dataset that we used to create the data we pass into the chart.

      if (this._chartOptions.type.indexOf('grouped') >= 0 || this._chartOptions.type === 'column') {
        selectOptions = {groupName: 'ref', groupValue: ref};
      } else {
        selectOptions = {fieldName: 'ref', fieldValue: ref};
      }

      this.chart.setSelected(selectOptions);

• ✅ Legend needs to be able to scroll and overlays chart in some cases
  

SOHO-8097: Tabs Functional and E2E Tests

Add some tests for Tabs and Tab Variations

See existing tests for example dropdown, timepicker, treemap, ect menubutton for reference. Also see docs/TESTING.MD for commands.

Ask for help on hl-dev-ids if needed.

Function Tests

• Test events that get triggered (activated, beforeactivated ect)
• Test events that are listened to
• Test all API methods, most importantly the public ones first and the rest for coverage. (fx enable/disable)
• Test lifecycle methods (init, teardown, destroy, invoke)
• Test setting and that some states are applied

E2E

• Load each test page in the components//list and test the main ideas of the page, if unsure of the main idea ask on the channel.
• Keyboard

Tabs Specific Test Considerations

• Regular Tabs
• Header Tabs (two variations)
• Validation - Editing a field on the page shows icon on the tab
• Add Tab Button
• Tab Counts
• Closable Tabs
• Dropdwn Tabs
• Enable/Disable Tabs
• Hide/Show Tabs
• Urls on tabs as links
• Ajax tab content
• Special LSF bordered tabs
• Nested Tabs
• Not able to dismiss some tabs
• Seperators
• Module Tabs - Add
• Module Tabs - Menu Button
• Module Tabs - Category Search
• Empty Module Tabs
• Multi (Side by Side) Tabs - With Mast Head
• Vertical Tabs - scrolling
• Vertical Tabs - responsive

Other Tests

• Accessibility tests https://github.com/dequelabs/axe-core
• Security Tests (XSS) -
• Specific Test Cases from Cindy ?
• Protractor Image Comparison Tests (Css Regressions)

SOHO-7686: Data Entered In Typeahead Not Available In The Dropdown Control

hi, I think we have an error in the Dropdown typeahead binding & I'm seeing the same thing in the 4.4.0 build.

The control I'm looking at is the Angular "Dropdown-Single Select" with "States - From Source".

What I'm looking for is a subscription to the typeahead data. Each time the user presses a key then my app needs to respond & do something extra. The way to do this is through the "source" property which the Angular control uses - [source]="source".

However, the source method (in dropdown.demo.ts) is getting called only once with a searchTerm of "". It doesnt get called again after subsequent user keypresses.

Could you please have a look. Maybe this is expected behavior - if so could we please have a "searchTerm" Output event added to the API so we can subscribe that way? Thanks

SOHO-7747: Ability to display additional information next to a field.

In our current app we display the "description" of the "code" that the user selects in a text box to the right of the text box.

For example, the users enters a vendor's code, and we display the vendor name to the right of the field. Or, the user selects a customer id and we display the customer name to the right of the field.

Before they enter a customer id:

!2018-04-03_1326.png|thumbnail!

After they enter a customer id:

!2018-04-03_1327.png|thumbnail!

You can also see this works if the user enters data or picks from the picklist.
https://www.screencast.com/t/UFxM2Hplc

We request guidance and maybe modifications to include this ability in the SOHO forms. We are currently using form-responsive row divs wrapping fields per SOHO guidelines.

SOHO-6459: ID's For Automation

To Support the QA / Krypton / Testing Team we want to include notes in the documentation around adding ID's and "automation ids".

Task is to update all of the documentation pages at design.infor.com by updating the MD examples in our project.

• Add the following section to the MD file for each component

Testability

• Make sure each item has a unique id that does not change across versions of your software
• If you think that your id may change, you should alternatively use the “data-automation-id” for test teams to target your elements. This should not change or future test scripts may break unexpectedly.
• If you already have a stable and unique id, then you can omit the use of “data-automation-id”
• Make sure to use a meaningful value for the “name” attribute, e.g. “Submit” for the Submit Button
• Please refer to the for further details see the Application Testability Checklist

• Make sure the example in each md shows the correct use of an ID attribute. (ids should use kebab-case)
• Once the Application Testability Checklist link is created make sure we show a few examples on that page of data-automation-id.

File Structure Reorganization

Tentative Reorganization Plan

The basics

dist
src
    core
    components
        component a
        component b
    layouts
    patterns
    utilities
test
demoapp
    www
    views
scripts

Other subfolders/files

• /baseline gets moved to /test/baseline
• contents of /bin, /build get moved to /scripts
  • some of these may no longer be necessary, check each one individually
• need to categorize items in /components when moving to /src, because some items in here are not all components. Some are behaviors, some are small utilities.
• /demoapp needs a bit of reorganization
  • /demoapp/js should be moved to /demoapp/www/js
  • add server.js, app.js, and the /public folder's contents to this folder.
  • add /docs? (unsure)
• /images goes away
• /license can either stay as-is
• /publish may need to stay as-is (consult @tmcconechy)
• /sass gets moved/organized into /src/sass and various component/utility folders
• /specs contents get moved to their corresponding /src/components/[component] folders
• /views gets moved to /demoapp/views:
  • some views, like the includes in src/components/[includes], should actually be moved to views, since they're demoapp-specific

Other Tasks

• - The demoapp will be initially broken until we fix all the paths
• - Need to make sure the test suite still works (also needs path changes)
• - Double-check that documentation is still building from source and visible in the demo app routes
• - Need to make sure the /dist folder's contents don't change

SOHO-6549: Hidden lookup and datefield initializing visible

When initializing an element with display: none, the icon still shows up after initialization.

Selects appear to work, unsure about others.

SOHO-8153: Incorrect styling on disabled module tabs

1. open http://localhost:4000/components/tabs-module/example-toolbar-with-spillover.html?colors=80000
2. click disable all

SOHO-8160: Block Grid Functional and E2E Tests

Add some tests for Block Grid

See existing tests for example textarea, dropdown, treemap, menubutton for reference. Also see docs/TESTING.MD for commands. Ask for help on sohoxi-dev if needed.

Functional Tests

• Test events that get triggered
• Test events that are listened to
• Test all API methods, most importantly the public ones first and the rest for coverage. (fx enable/disable)
• Test lifecycle methods (init, teardown, destroy, invoke)
• Test setting and that some states are applied

E2e Tests

• Load each test page in the components//list and test the main ideas of the page, if unsure of the main idea ask on the channel.
• Keyboard

Block Grid Specific Test Considerations

• mixed selection
• multiselect
• paging
• single select
• updated

Other Tests

• Accessibility tests https://github.com/dequelabs/axe-core
• Security Tests
• Specific Test Cases from Cindy
• Protractor Image Comparison Tests

SOHO-7464: Visual Regression Testing

• Compare visuals on a baseline w/ https://www.npmjs.com/package/protractor-image-comparison

• Take one screen shot at each width: desktop, table, mobile, and test all themes if possible

• Setup config for protractor image comparison

• Make some sample tests

• Run the image tests on CI server, and provide instructions about how to create baseline images

SOHO-3182: Scatter Plot Chart

Scatter plot charts with selection, right click for a context menu, and hover for a popup with application developer defined info: image, field values, etc...

SOHO-8128: Datagrid - unable to capture the 'tab' key onKeydown

In Landmark, the list component is listening for the tab key onKeyDown. When the user hits the tab key on the last cell of a newly added row, the row is saved and another row is added to the datagrid. This is intended to support users that want to quickly add data rows to the datagrid.

The tab key event from onKeydown was not getting to our keydown handler because within soho's datagrid.js it is capturing the tab event and indicating that the event was handled and performs preventDefault() and stopPropagation().

Including some code snippets from datagrid.js....
{code}
// Handle rest of the keyboard
self.table.on('keydown.datagrid', 'td', function (e) {
const key = e.which || e.keyCode || e.charCode || 0;
let handled = false;

......

  // Tab, Left and Right arrow keys.
  if ([9, 37, 39].indexOf(key) !== -1) {
    if (key === 9 && !self.settings.actionableMode) {
      return;
    }

    if (key !== 9 && e.altKey) {
      // [Alt + Left/Right arrow] to move to the first or last cell on the current row.
      cell = ((key === 37 && !isRTL) || (key === 39 && isRTL)) ? 0 : lastCell;
      self.setActiveCell(row, cell);
    } else if (!self.quickEditMode || (key === 9)) {
      if ((!isRTL && (key === 37 || key === 9 && e.shiftKey)) || // eslint-disable-line
          (isRTL && (key === 39 || key === 9))) { // eslint-disable-line
        cell = getNextVisibleCell(cell, lastCell, true);
      } else {
        cell = getNextVisibleCell(cell, lastCell);
      }

      if (cell instanceof jQuery) {
        self.setActiveCell(cell);
      } else {
        self.setActiveCell(row, cell);
      }
      self.quickEditMode = false;
      handled = true;
    }
  }

.....

  if (handled) {
    e.preventDefault();
    e.stopPropagation();
    return false; // eslint-disable-line
  }

{code}

Dropdowns on Field Filter don't display correctly

Describe the bug
Dropdowns aren't being wrapped correctly by the field filter control.

To Reproduce
Steps to reproduce the behavior:
Add this html to field-filter/example-index.html

 <div class="field">
  <label for="example-dropdown" class="label">Dropdown</label>
  <select id="example-dropdown" class="dropdown field-filter input-md">
    <option value=""></option>
    <option value="1">Inquiry</option>
    <option value="2">Setup</option>
  </select>
</div>

1. Navigate to /components/field-filter/example-index.html
2. See error

Expected behavior
Dropdown should match how the other fields looks for field filter

Screenshots

Platform

• All

Right click (long press) to activate context menus on mobile

Original issue: https://jira.infor.com/browse/SOHO-7978

Need a way to open context menus on mobile devices. On lists / datagrid and inputs.

SOHO-7401: Lookup Formatter/Editor for DataGrid does not support right alignment

Currently the Formatter/Editor for Lookup does not support right-aligned text (test application zip attached which runs against v4.3.4 of the controls).

On inspection the CSS text-align on the data wrapper is not inherited by the child span with class trigger.

SOHO-8101: Accordion 'selected' event only fires when anchors are clicked, and not when the +/- are clicked

In the example, open 'Learning' and click items inside. Observe the selected event is only triggered when clicking the text and not the +/-.

I'm making a feature in Portal where we restore opened items in the app nav the next time someone loads our site but if they click +/- I have no way to track it and my logic gets all confused.

SOHO-7789: Tree rendering time

I'm using the tree component in a scenario with a large amounts of data (3000 items and 7 levels depth aprox). The issue is performance, the tree is displayed in 5-7 seconds.

So, Is there a way to deal with this, like loading the tree in a stepped way, level by level or in demand ? have you any example of this ?

SOHO-8098: E2E Timepicker 24hrs is failing on CI

On the Trusty Distro, the test is failing, and outputting the original input value.

✗ Should pick time from picker and set to field for 24 Hour
- Expected '19:15' to equal '21:25'.

Attempted
Sleeping, waitingFor, etc, It's still reading the old input upon clicking or entering of the "set time" btn

Difficulties
The local docker testing setup differs here as well, with a mock build script.
Hard to debug, currently, just throwing commits at the branch to rerun tests.

SOHO-7019: XSS in Editor (Homepages Notes widget)

When using the Notes widget in Homepages (which uses the Editor SoHo component), you can insert script tags in hyperlinks:
!xss_notes.gif|thumbnail!

This is pretty dangerous, since it makes it trivial to perform an XSS attack on any platform where users can share the contents of the Editor (assuming no escaping is done when serializing/transmitting the data).

I guess this affects any product that uses the Editor, and is not specific to Homepages widgets.

Stpes to reproduce

• Go to http://usalvlhlpool1.infor.com/4.4.0-rc/components/editor/example-clickable-links
• Click the insert anchor button.
• Add a link with URL: "><script>alert()</script>
• Click Insert
• Click the HTML button
  issue occurs here

Expected: No alert
Actual: Alert appears due to injected script being executed.

SOHO-7918: [Win 7 FF 59] Filterable Data Grid Control: Activity and Status field box alignment issue

1. http://usalvlhlpool1.infor.com/4.6.0-rc/components/datagrid/example-filter

2. [Win 7 FF 59] Filterable Data Grid Control: Activity and Status field box alignment issue

3. Please see screen shot attached

soho- 6877 Loading Shimmer

Add the soho loading shim to replace the current busy indicator on app load.

https://codepen.io/kevlarthrowintreesatya/pen/GZYRwY

• This needs designs approval that is is something we even want to do

SOHO-7503: Datagrid 'New' status icon tooltip is not translated

Datagrid with row status enabled. When a new row is added the tooltip for the 'New' icon that gets automatically added is not translated (and styled as in Infor Tooltip (black)).

SOHO-8165: Tree Functional and E2E Tests

Original ticket: SOHO-8165

Add some tests for Tree

See existing tests for example textarea, dropdown, treemap, menubutton for reference. Also see docs/TESTING.MD for commands. Ask for help on sohoxi-dev if needed.

Functional Tests

• Test events that get triggered
• Test events that are listened to
• Test all API methods, most importantly the public ones first and the rest for coverage. (fx enable/disable)
• Test lifecycle methods (init, teardown, destroy, invoke)
• Test setting and that some states are applied

E2e Tests

• Load each test page in the components//list and test the main ideas of the page, if unsure of the main idea ask on the channel.
• Keyboard

Tree Grid Specific Test Considerations
see all of http://localhost:4000/components/tree/list examples and tests

Other Tests

• Accessibility tests https://github.com/dequelabs/axe-core
• Security Tests (TBD)
• Specific Test Cases from Cindy (TBD)
• Protractor Image Comparison Tests (TBD)

SOHO-8090: Soho Grid Copy and Paste performance issue on large clipboard data

Have tried copying 500 rows on data from excel to Soho Data Grid and browses goes not responding/crashing.

This request is related to : SOHO-1750

To reproduce:

1. Go to components/datagrid/example-editable.html
2. Copy the rows of cell in the attached excel file. 500Rows.xlsx
3. Paste it on the 'Activity' column in the grid in the link above.

SOHO-8026: Datepicker Functional and E2E Tests

Add some tests for Datepicker

See existing tests for example dropdown, treemap, menubutton, timepicker, spinbox for reference. Also see docs/TESTING.MD for commands.

Ask for help on slack if needed.

Unit Tests

• Test events that get triggered
• Test events that are listened to
• Test all API methods, most importantly the public ones first and the rest for coverage. (fx enable/disable)
• Test lifecycle methods (init, teardown, destroy, invoke)
• Test setting and that some states are applied

Functional

• Load each test page in the components//list and test the main ideas of the page, if unsure of the main idea ask on the channel.
• Keyboard

Textarea Specific Test Considerations
TODO

Other Tests

• Accessibility tests https://github.com/dequelabs/axe-core
• Security Tests
• Specific Test Cases from Cindy
• Protractor Image Comparison Tests

Deploying the documentation produces toString() error

Describe the bug
Something in the markup is causing the syntax highlighter (pygmentize-bundled) in scripts/deploy-documentation.js to throw an error:

TypeError: Cannot read property 'toString' of undefined
    at require (.../enterprise/scripts/deploy-documentation.js:55:28)
    at ChildProcess.<anonymous> (.../enterprise/node_modules/pygmentize-bundled/index.js:32:14)

To Reproduce
Steps to reproduce the behavior:

1. node ./scripts/deploy-documentation.js --test-mode (use test-mode to make it faster for this instance)
2. See the error thrown in the console.

Expected behavior
No errors and it builds and deploys properly.

Screenshots

Platform

• OS Version: OS X high sierra

SOHO-7914: [All Browsers] Modal Control: Not all editor features are working when its on a modal

1. http://localhost:4000/components/modal/test-validation2

2. [All Browsers] Modal Control: Not all editor features are working in the modal

3. Steps to reproduce:

• Open the modal
• Update text in the following fields" Type, Name, Description, and Editor
• In the Editor click on the 3 Ellipse button and click on one of the following: Insert Anchor, or Insert Image
• Nothing happens.
• In addition if change the theme to dark or high and type in the editor the font is green. Please see screen shot attached.