Sorting keys wherever we render inputs/outputs

src/common/utils.ts

@@ -85,3 +85,17 @@ export function createCorsProxyURL(path: string) {
         `${baseUrl}${corsProxyPrefix}${ensureSlashPrefixed(path)}`
     );
 }
+
+/** Returns entires for an object, sorted lexicographically */
+export function sortedObjectEntries(
+    object: Object
+): ReturnType<typeof Object.entries> {
+    return Object.entries(object).sort((a, b) => a[0].localeCompare(b[0]));
+}
+
+/** Returns keys for an objext, sorted lexicographically */
+export function sortedObjectKeys(
+    object: Object
+): ReturnType<typeof Object.keys> {
+    return Object.keys(object).sort((a, b) => a.localeCompare(b));
+}

src/components/Launch/LaunchWorkflowForm/useLaunchWorkflowFormState.ts

@@ -1,3 +1,4 @@
+import { sortedObjectEntries } from 'common/utils';
 import { useAPIContext } from 'components/data/apiContext';
 import {
     useFetchableData,
@@ -53,7 +54,7 @@ function getInputs(workflow: Workflow, launchPlan: LaunchPlan): ParsedInput[] {
 
     const workflowInputs = getWorkflowInputs(workflow);
     const launchPlanInputs = launchPlan.closure.expectedInputs.parameters;
-    return Object.entries(launchPlanInputs).map(value => {
+    return sortedObjectEntries(launchPlanInputs).map(value => {
         const [name, parameter] = value;
         const required = !!(parameter.default || parameter.required);
         const workflowInput = workflowInputs[name];

src/components/Literals/LiteralMapViewer.tsx

@@ -1,4 +1,5 @@
 import * as classnames from 'classnames';
+import { sortedObjectEntries } from 'common/utils';
 import { useCommonStyles } from 'components/common/styles';
 import { Literal, LiteralMap } from 'models';
 import * as React from 'react';
@@ -22,7 +23,7 @@ export const LiteralMapViewer: React.FC<{
                 commonStyles.listUnstyled
             )}
         >
-            {Object.entries(literals).map(([key, value]) => (
+            {sortedObjectEntries(literals).map(([key, value]) => (
                 <li key={key}>
                     <LiteralValue label={key} literal={value as Literal} />
                 </li>

src/components/Literals/Scalar/ProtobufStructValue.tsx

@@ -1,4 +1,5 @@
 import * as classnames from 'classnames';
+import { sortedObjectEntries } from 'common/utils';
 import { useCommonStyles } from 'components/common/styles';
 import { ProtobufListValue, ProtobufStruct, ProtobufValue } from 'models';
 import * as React from 'react';
@@ -63,7 +64,7 @@ export const ProtobufStructValue: React.FC<{
                 commonStyles.listUnstyled
             )}
         >
-            {Object.entries(fields).map(([key, value]) => (
+            {sortedObjectEntries(fields).map(([key, value]) => (
                 <li key={key}>
                     <RenderedProtobufValue label={key} value={value} />
                 </li>

src/components/Literals/Scalar/test/ProtobufStructValue.test.tsx

@@ -0,0 +1,25 @@
+import { render } from '@testing-library/react';
+import * as React from 'react';
+
+import { ProtobufStruct } from 'models';
+import { ProtobufStructValue } from '../ProtobufStructValue';
+
+describe('ProtobufStructValue', () => {
+    it('renders sorted keys', () => {
+        const struct: ProtobufStruct = {
+            fields: {
+                input2: {
+                    kind: 'nullValue'
+                },
+                input1: { kind: 'nullValue' }
+            }
+        };
+        const { getAllByText } = render(
+            <ProtobufStructValue struct={struct} />
+        );
+        const labels = getAllByText(/input/);
+        expect(labels.length).toBe(2);
+        expect(labels[0]).toHaveTextContent(/input1/);
+        expect(labels[1]).toHaveTextContent(/input2/);
+    });
+});

src/components/Literals/test/LiteralMapViewer.test.tsx

@@ -0,0 +1,21 @@
+import { render } from '@testing-library/react';
+import * as React from 'react';
+
+import { LiteralMap } from 'models';
+import { LiteralMapViewer } from '../LiteralMapViewer';
+
+describe('LiteralMapViewer', () => {
+    it('renders sorted keys', () => {
+        const literals: LiteralMap = {
+            literals: {
+                input2: {},
+                input1: {}
+            }
+        };
+        const { getAllByText } = render(<LiteralMapViewer map={literals} />);
+        const labels = getAllByText(/input/);
+        expect(labels.length).toBe(2);
+        expect(labels[0]).toHaveTextContent(/input1/);
+        expect(labels[1]).toHaveTextContent(/input2/);
+    });
+});

src/components/Task/SimpleTaskInterface.tsx

@@ -1,5 +1,6 @@
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import { noneString } from 'common/constants';
+import { sortedObjectKeys } from 'common/utils';
 import { DetailsGroup } from 'components/common';
 import { useCommonStyles } from 'components/common/styles';
 import {
@@ -30,11 +31,11 @@ const VariablesList: React.FC<{ variables: Record<string, Variable> }> = ({
 }) => {
     const commonStyles = useCommonStyles();
     const styles = useStyles();
-    const output = Object.keys(variables).reduce<React.ReactNode[]>(
+    const output = sortedObjectKeys(variables).reduce<React.ReactNode[]>(
         (out, name, idx) => {
             const variable = variables[name];
             out.push(
-                <span>
+                <span key={`${name}-label`}>
                     {idx > 0 ? ', ' : ''}
                     {name}
                 </span>
@@ -44,7 +45,10 @@ const VariablesList: React.FC<{ variables: Record<string, Variable> }> = ({
             );
             if (typeString.length > 0) {
                 out.push(
-                    <span className={styles.typeAnnotationContainer}>
+                    <span
+                        key={`${name}-type`}
+                        className={styles.typeAnnotationContainer}
+                    >
                         (<span className={styles.typeAnnotation}>
                             {typeString}
                         </span>)

src/components/Task/test/SimpleTaskInterface.test.tsx

@@ -0,0 +1,45 @@
+import { render } from '@testing-library/react';
+import { set } from 'lodash';
+import * as React from 'react';
+
+import { SimpleType, Task, TypedInterface, Variable } from 'models';
+import { SimpleTaskInterface } from '../SimpleTaskInterface';
+
+function setTaskInterface(task: Task, values: TypedInterface): Task {
+    return set(task, 'closure.compiledTask.template.interface', values);
+}
+
+describe('SimpleTaskInterface', () => {
+    const values: Record<string, Variable> = {
+        value2: { type: { simple: SimpleType.INTEGER } },
+        value1: { type: { simple: SimpleType.INTEGER } }
+    };
+
+    it('renders sorted inputs', () => {
+        const task = setTaskInterface({} as Task, {
+            inputs: { variables: { ...values } }
+        });
+
+        const { getAllByText } = render(
+            <SimpleTaskInterface task={task as Task} />
+        );
+        const labels = getAllByText(/value/);
+        expect(labels.length).toBe(2);
+        expect(labels[0]).toHaveTextContent(/value1/);
+        expect(labels[1]).toHaveTextContent(/value2/);
+    });
+
+    it('renders sorted outputs', () => {
+        const task = setTaskInterface({} as Task, {
+            outputs: { variables: { ...values } }
+        });
+
+        const { getAllByText } = render(
+            <SimpleTaskInterface task={task as Task} />
+        );
+        const labels = getAllByText(/value/);
+        expect(labels.length).toBe(2);
+        expect(labels[0]).toHaveTextContent(/value1/);
+        expect(labels[1]).toHaveTextContent(/value2/);
+    });
+});