fix: Alphanumeric sorting of options in action selector sub menu (#22216)
## Description - The selector view in the action selector had options being sorted alphabetically. The sorting logic was not considering alphanumeric values where the order should be Page1, Page2, Page10, Page21 instead of Page1, Page10, Page2, Page21 - Add tests for the fix - Move the logic to its own functions Fixes #22178 **Media**     ## Type of change - Bug fix (non-breaking change which fixes an issue) ## How Has This Been Tested? - Manual - Jest ### Test Plan ### Issues raised during DP testing ## Checklist: ### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [x] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [x] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag ### QA activity: - [ ] Test plan has been approved by relevant developers - [ ] Test plan has been peer reviewed by QA - [ ] Cypress test cases have been added and approved by either SDET or manual QA - [ ] Organized project review call with relevant stakeholders after Round 1/2 of QA - [ ] Added Test Plan Approved label after reveiwing all Cypress test
This commit is contained in:
Rimil Dey
GitHub
parent
d2ced601d2
commit
2bac17b1af
|
|
@ -2,7 +2,6 @@ import {
|
|||
AppsmithFunction,
|
||||
FieldType,
|
||||
ViewTypes,
|
||||
DEFAULT_LABELS,
|
||||
DEFAULT_SELECTOR_VIEW_TEXT,
|
||||
} from "../constants";
|
||||
import type { TreeDropdownOption } from "design-system-old";
|
||||
|
|
@ -22,7 +21,7 @@ import { TextView } from "../viewComponents/TextView";
|
|||
import { TabView } from "../viewComponents/TabView";
|
||||
import { FIELD_CONFIG } from "./FieldConfig";
|
||||
import { ActionSelectorView } from "../viewComponents/ActionSelectorView";
|
||||
import { getEvaluationVersion } from "../utils";
|
||||
import { getEvaluationVersion, sortSubMenuOptions } from "../utils";
|
||||
|
||||
const views = {
|
||||
[ViewTypes.SELECTOR_VIEW]: (props: SelectorViewProps) => (
|
||||
|
|
@ -108,18 +107,7 @@ export function Field(props: FieldProps) {
|
|||
case FieldType.RESET_CHILDREN_FIELD:
|
||||
case FieldType.WIDGET_NAME_FIELD:
|
||||
viewElement = (view as (props: SelectorViewProps) => JSX.Element)({
|
||||
options: (options as TreeDropdownOption[]).sort(
|
||||
(a: TreeDropdownOption, b: TreeDropdownOption) => {
|
||||
if (
|
||||
DEFAULT_LABELS.includes(a.label) ||
|
||||
DEFAULT_LABELS.includes(b.label)
|
||||
) {
|
||||
return 1;
|
||||
} else {
|
||||
return a.label.localeCompare(b.label);
|
||||
}
|
||||
},
|
||||
),
|
||||
options: sortSubMenuOptions(options as TreeDropdownOption[]),
|
||||
label: label,
|
||||
get: getterFunction,
|
||||
set: (
|
||||
|
|
|
|||
|
|
@ -18,7 +18,9 @@ import {
|
|||
textSetter,
|
||||
isValueValidURL,
|
||||
objectSetter,
|
||||
sortSubMenuOptions,
|
||||
} from "./utils";
|
||||
import type { TreeDropdownOption } from "design-system-old";
|
||||
|
||||
describe("Test argStringToArray", () => {
|
||||
const cases = [
|
||||
|
|
@ -703,3 +705,335 @@ describe("Test isValueValidURL", () => {
|
|||
},
|
||||
);
|
||||
});
|
||||
|
||||
describe("sortSubMenuOptions", () => {
|
||||
const cases = [
|
||||
{
|
||||
index: 0,
|
||||
input: [
|
||||
{
|
||||
label: "1",
|
||||
id: "6433b0017bd3732ec082375c",
|
||||
value: "'1'",
|
||||
},
|
||||
{
|
||||
id: "ndsf3edjw7",
|
||||
label: "adc",
|
||||
value: "adc",
|
||||
},
|
||||
{
|
||||
id: "a3bvr4ybt1",
|
||||
label: "fsfsdg",
|
||||
value: "fsfsdg",
|
||||
},
|
||||
{
|
||||
label: "Page1",
|
||||
id: "6398aba6b8c4dd68403825a3",
|
||||
value: "'Page1'",
|
||||
},
|
||||
{
|
||||
label: "12",
|
||||
id: "6433b0017bd3732ec082375csdsdsds",
|
||||
value: "'12'",
|
||||
},
|
||||
{
|
||||
label: "2",
|
||||
id: "6433b0017bd3732ec082375csdsdsdssdsds",
|
||||
value: "'2'",
|
||||
},
|
||||
{
|
||||
label: "Page10",
|
||||
id: "6426cd4646c8f921c25eb1b3",
|
||||
value: "'Page10'",
|
||||
},
|
||||
{
|
||||
label: "Page2",
|
||||
id: "6399a035b8c4dd684038282e",
|
||||
value: "'Page2'",
|
||||
},
|
||||
],
|
||||
expected: [
|
||||
{
|
||||
label: "1",
|
||||
id: "6433b0017bd3732ec082375c",
|
||||
value: "'1'",
|
||||
},
|
||||
{
|
||||
label: "2",
|
||||
id: "6433b0017bd3732ec082375csdsdsdssdsds",
|
||||
value: "'2'",
|
||||
},
|
||||
{
|
||||
label: "12",
|
||||
id: "6433b0017bd3732ec082375csdsdsds",
|
||||
value: "'12'",
|
||||
},
|
||||
{
|
||||
id: "ndsf3edjw7",
|
||||
label: "adc",
|
||||
value: "adc",
|
||||
},
|
||||
{
|
||||
id: "a3bvr4ybt1",
|
||||
label: "fsfsdg",
|
||||
value: "fsfsdg",
|
||||
},
|
||||
{
|
||||
label: "Page1",
|
||||
id: "6398aba6b8c4dd68403825a3",
|
||||
value: "'Page1'",
|
||||
},
|
||||
{
|
||||
label: "Page2",
|
||||
id: "6399a035b8c4dd684038282e",
|
||||
value: "'Page2'",
|
||||
},
|
||||
{
|
||||
label: "Page10",
|
||||
id: "6426cd4646c8f921c25eb1b3",
|
||||
value: "'Page10'",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
index: 1,
|
||||
input: [
|
||||
{
|
||||
label: "New window",
|
||||
value: "'NEW_WINDOW'",
|
||||
id: "NEW_WINDOW",
|
||||
},
|
||||
{
|
||||
label: "Same window",
|
||||
value: "'SAME_WINDOW'",
|
||||
id: "SAME_WINDOW",
|
||||
},
|
||||
],
|
||||
expected: [
|
||||
{
|
||||
label: "New window",
|
||||
value: "'NEW_WINDOW'",
|
||||
id: "NEW_WINDOW",
|
||||
},
|
||||
{
|
||||
label: "Same window",
|
||||
value: "'SAME_WINDOW'",
|
||||
id: "SAME_WINDOW",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
index: 2,
|
||||
input: [
|
||||
{
|
||||
label: "Error",
|
||||
value: "'error'",
|
||||
id: "error",
|
||||
},
|
||||
{
|
||||
label: "Info",
|
||||
value: "'info'",
|
||||
id: "info",
|
||||
},
|
||||
{
|
||||
label: "Success",
|
||||
value: "'success'",
|
||||
id: "success",
|
||||
},
|
||||
{
|
||||
label: "Warning",
|
||||
value: "'warning'",
|
||||
id: "warning",
|
||||
},
|
||||
],
|
||||
expected: [
|
||||
{
|
||||
label: "Error",
|
||||
value: "'error'",
|
||||
id: "error",
|
||||
},
|
||||
{
|
||||
label: "Info",
|
||||
value: "'info'",
|
||||
id: "info",
|
||||
},
|
||||
{
|
||||
label: "Success",
|
||||
value: "'success'",
|
||||
id: "success",
|
||||
},
|
||||
{
|
||||
label: "Warning",
|
||||
value: "'warning'",
|
||||
id: "warning",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
index: 3,
|
||||
input: [
|
||||
{
|
||||
label: "CSV",
|
||||
value: "'text/csv'",
|
||||
id: "text/csv",
|
||||
},
|
||||
{
|
||||
label: "Select file type (optional)",
|
||||
value: "",
|
||||
id: "",
|
||||
},
|
||||
{
|
||||
label: "HTML",
|
||||
value: "'text/html'",
|
||||
id: "text/html",
|
||||
},
|
||||
{
|
||||
label: "Plain text",
|
||||
value: "'text/plain'",
|
||||
id: "text/plain",
|
||||
},
|
||||
{
|
||||
label: "PNG",
|
||||
value: "'image/png'",
|
||||
id: "image/png",
|
||||
},
|
||||
{
|
||||
label: "JPEG",
|
||||
value: "'image/jpeg'",
|
||||
id: "image/jpeg",
|
||||
},
|
||||
{
|
||||
label: "SVG",
|
||||
value: "'image/svg+xml'",
|
||||
id: "image/svg+xml",
|
||||
},
|
||||
{
|
||||
label: "JSON",
|
||||
value: "'application/json'",
|
||||
id: "application/json",
|
||||
},
|
||||
],
|
||||
expected: [
|
||||
{
|
||||
label: "Select file type (optional)",
|
||||
value: "",
|
||||
id: "",
|
||||
},
|
||||
{
|
||||
label: "CSV",
|
||||
value: "'text/csv'",
|
||||
id: "text/csv",
|
||||
},
|
||||
{
|
||||
label: "HTML",
|
||||
value: "'text/html'",
|
||||
id: "text/html",
|
||||
},
|
||||
{
|
||||
label: "JPEG",
|
||||
value: "'image/jpeg'",
|
||||
id: "image/jpeg",
|
||||
},
|
||||
{
|
||||
label: "JSON",
|
||||
value: "'application/json'",
|
||||
id: "application/json",
|
||||
},
|
||||
{
|
||||
label: "Plain text",
|
||||
value: "'text/plain'",
|
||||
id: "text/plain",
|
||||
},
|
||||
{
|
||||
label: "PNG",
|
||||
value: "'image/png'",
|
||||
id: "image/png",
|
||||
},
|
||||
{
|
||||
label: "SVG",
|
||||
value: "'image/svg+xml'",
|
||||
id: "image/svg+xml",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
index: 4,
|
||||
input: [
|
||||
{
|
||||
id: "a3bvr4ybt1",
|
||||
label: "fsfsdg",
|
||||
value: "fsfsdg",
|
||||
},
|
||||
{
|
||||
label: "New Modal",
|
||||
value: "Modal",
|
||||
id: "create",
|
||||
icon: "plus",
|
||||
className: "t--create-modal-btn",
|
||||
},
|
||||
{
|
||||
id: "lz8id1xnk7",
|
||||
label: "Modal1",
|
||||
value: "Modal1",
|
||||
},
|
||||
{
|
||||
id: "j5gg12lloy",
|
||||
label: "Modal2",
|
||||
value: "Modal2",
|
||||
},
|
||||
{
|
||||
id: "ndsf3edjw7",
|
||||
label: "adc",
|
||||
value: "adc",
|
||||
},
|
||||
{
|
||||
id: "bfv7i1qt72",
|
||||
label: "Modal10",
|
||||
value: "Modal10",
|
||||
},
|
||||
],
|
||||
expected: [
|
||||
{
|
||||
label: "New Modal",
|
||||
value: "Modal",
|
||||
id: "create",
|
||||
icon: "plus",
|
||||
className: "t--create-modal-btn",
|
||||
},
|
||||
{
|
||||
id: "ndsf3edjw7",
|
||||
label: "adc",
|
||||
value: "adc",
|
||||
},
|
||||
{
|
||||
id: "a3bvr4ybt1",
|
||||
label: "fsfsdg",
|
||||
value: "fsfsdg",
|
||||
},
|
||||
{
|
||||
id: "lz8id1xnk7",
|
||||
label: "Modal1",
|
||||
value: "Modal1",
|
||||
},
|
||||
{
|
||||
id: "j5gg12lloy",
|
||||
label: "Modal2",
|
||||
value: "Modal2",
|
||||
},
|
||||
{
|
||||
id: "bfv7i1qt72",
|
||||
label: "Modal10",
|
||||
value: "Modal10",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
test.each(cases.map((x) => [x.index, x.input, x.expected]))(
|
||||
"test case %d",
|
||||
(_, input, expected) => {
|
||||
const result = sortSubMenuOptions(input as TreeDropdownOption[]);
|
||||
expect(result).toStrictEqual(expected);
|
||||
},
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ import {
|
|||
} from "@shared/ast";
|
||||
import type { TreeDropdownOption } from "design-system-old";
|
||||
import type { TActionBlock } from "./types";
|
||||
import { AppsmithFunction } from "./constants";
|
||||
import { AppsmithFunction, DEFAULT_LABELS } from "./constants";
|
||||
import { FIELD_GROUP_CONFIG } from "./FieldGroup/FieldGroupConfig";
|
||||
import store from "store";
|
||||
import { selectEvaluationVersion } from "@appsmith/selectors/applicationSelectors";
|
||||
|
|
@ -574,3 +574,19 @@ export function paramGetter(code: string, argNum?: number) {
|
|||
const requiredValue = getCodeFromMoustache(code);
|
||||
return getQueryParam(requiredValue, argNum, getEvaluationVersion());
|
||||
}
|
||||
|
||||
export function sortSubMenuOptions(options: TreeDropdownOption[]) {
|
||||
return (options as TreeDropdownOption[]).sort(
|
||||
(a: TreeDropdownOption, b: TreeDropdownOption) => {
|
||||
// Makes default labels like "New modal" show up on top
|
||||
if (DEFAULT_LABELS.includes(a.label)) {
|
||||
return -1;
|
||||
} else if (DEFAULT_LABELS.includes(b.label)) {
|
||||
return 1;
|
||||
} else {
|
||||
// numeric - true handles A10 being shown after A2
|
||||
return a.label.localeCompare(b.label, "en", { numeric: true });
|
||||
}
|
||||
},
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user