ENGCOM-7210: {ASI} : SortBy component added #26736

 - Merge Pull Request #26736 from konarshankar07/magento2:Sortby-component
 - Merged commits:
   1. d913e15
   2. 4e65dc9
   3. a483274
   4. dd95f5e
   5. bdfe729
   6. 9404f53
   7. 858756d
   8. 7dc8227
   9. 08aea80
   10. a1b3c47
   11. 6aaebb2
   12. 9aa1cfc
   13. a66fb6c
   14. 5010692
   15. aa09e38
   16. 1f5bed9
   17. 31926d6
   18. 76c357b

Author: magento-engcom-team

app/code/Magento/Ui/view/base/web/js/grid/sortBy.js

@@ -0,0 +1,78 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+define([
+    'uiElement'
+], function (Element) {
+    'use strict';
+
+    return Element.extend({
+        defaults: {
+            template: 'ui/grid/sortBy',
+            options: [],
+            applied: {},
+            sorting: 'asc',
+            columnsProvider: 'ns = ${ $.ns }, componentType = columns',
+            selectedOption: '',
+            isVisible: true,
+            listens: {
+                'selectedOption': 'applyChanges'
+            },
+            statefull: {
+                selectedOption: true,
+                applied: true
+            },
+            exports: {
+                applied: '${ $.provider }:params.sorting'
+            },
+            imports: {
+                preparedOptions: '${ $.columnsProvider }:elems'
+            },
+            modules: {
+                columns: '${ $.columnsProvider }'
+            }
+        },
+
+        /**
+         * @inheritdoc
+         */
+        initObservable: function () {
+            return this._super()
+                .observe([
+                    'applied',
+                    'selectedOption',
+                    'isVisible'
+                ]);
+        },
+
+        /**
+         * Prepared sort order options
+         */
+        preparedOptions: function (columns) {
+            if (columns && columns.length > 0) {
+                columns.map(function (column) {
+                    if (column.sortable === true) {
+                        this.options.push({
+                            value: column.index,
+                            label: column.label
+                        });
+                        this.isVisible(true);
+                    } else {
+                        this.isVisible(false);
+                    }
+                }.bind(this));
+            }
+        },
+
+        /**
+         * Apply changes
+         */
+        applyChanges: function () {
+            this.applied({
+                field: this.selectedOption(),
+                direction: this.sorting
+            });
+        }
+    });
+});

app/code/Magento/Ui/view/base/web/templates/grid/sortBy.html

@@ -0,0 +1,15 @@
+<!--
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+<div if="isVisible" class="masonry-image-sortby">
+    <b><!-- ko i18n: 'Sort by' --><!-- /ko -->:</b>
+    <select class="admin__control-select" data-bind="
+        options: options,
+        optionsValue: 'value',
+        optionsText: 'label',
+        value: selectedOption
+    "></select>
+</div>

app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/module/_masonry-grid.less

@@ -114,5 +114,16 @@
                 }
             }
         }
+
+        &-sortby {
+            select {
+                background-image: url(../images/arrows-bg.svg);
+                border: none;
+                padding-right: 3.2rem;
+                &:active {
+                    background-image+: url('../images/arrows-bg.svg');
+                }
+            }
+        }
     }
 }

dev/tests/js/jasmine/tests/app/code/Magento/Ui/base/js/grid/sortBy.test.js

@@ -0,0 +1,83 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+/*eslint max-nested-callbacks: 0*/
+define([
+    'Magento_Ui/js/grid/sortBy'
+], function (SortBy) {
+    'use strict';
+
+    describe('Magento_Ui/js/grid/sortBy', function () {
+
+        var sortByObj;
+
+        beforeEach(function () {
+            sortByObj = new SortBy({
+                options: []
+            });
+        });
+
+        describe('"preparedOptions" method', function () {
+            it('sort option will not available if sorting is disabled for the columns', function () {
+                var columns = {
+                    sortable: false,
+                    label: 'magento',
+                    index: 'name'
+                };
+
+                sortByObj.preparedOptions([columns]);
+                expect(sortByObj.options[0]).toBeUndefined();
+                expect(sortByObj.options[0]).toBeUndefined();
+            });
+
+            it('sort option will available if sorting is enabled for the columns', function () {
+                var columns = {
+                    sortable: true,
+                    label: 'magento',
+                    index: 'name'
+                };
+
+                sortByObj.preparedOptions([columns]);
+                expect(sortByObj.options[0].value).toEqual('name');
+                expect(sortByObj.options[0].label).toEqual('magento');
+            });
+
+            it('return "isVisible" method true if sorting is enabled for column', function () {
+                var columns = {
+                    sortable: true,
+                    label: 'magento',
+                    index: 'name'
+                };
+
+                sortByObj.preparedOptions([columns]);
+                expect(sortByObj.isVisible()).toBeTruthy();
+            });
+
+            it('return "isVisible" method false if sorting is disabled for column', function () {
+                var columns = {
+                    sortable: false,
+                    label: 'magento',
+                    index: 'name'
+                };
+
+                sortByObj.preparedOptions([columns]);
+                expect(sortByObj.isVisible()).toBeFalsy();
+            });
+        });
+        describe('"applyChanges" method', function () {
+            it('return applied options for sorting column', function () {
+                var applied = {
+                    field: 'selectedOption',
+                    direction: 'asc'
+                };
+
+                spyOn(sortByObj, 'selectedOption').and.returnValue('selectedOption');
+                sortByObj.applyChanges();
+                expect(sortByObj.applied()).toEqual(applied);
+                expect(sortByObj.selectedOption).toHaveBeenCalled();
+            });
+        });
+    });
+});