Bug 1829385: fix alignment issues with MultiColumnField in Traffic Splitting modal #5229

vikram-raj · 2020-04-29T13:33:34Z

Fixes:
https://issues.redhat.com/browse/ODC-3421

Analysis / Root cause:
MultiColumnField in Traffic Splitting modal is not aligned properly.

Solution Description:
Align the MultiColumnField in Traffic Splitting modal by fixing the width of the field.

Screen shots / Gifs for design review:

Unit test coverage report:

Browser conformance:

Chrome
Firefox
Safari
Edge

vikram-raj · 2020-04-29T13:43:45Z

/retitle Bug 1829385: fix alignment issues with MultiColumnField in Traffic Splitting modal

vikram-raj · 2020-04-29T13:44:03Z

cc: @openshift/team-devconsole-ux

openshift-ci-robot · 2020-04-29T13:44:06Z

@vikram-raj: This pull request references Bugzilla bug 1829385, which is valid. The bug has been moved to the POST state. The bug has been updated to refer to the pull request using the external bug tracker.

3 validation(s) were run on this bug

bug is open, matching expected state (open)
bug target release (4.5.0) matches configured target release for branch (4.5.0)
bug is in the state NEW, which is one of the valid states (NEW, ASSIGNED, ON_DEV, POST, POST)

In response to this:

Bug 1829385: fix alignment issues with MultiColumnField in Traffic Splitting modal

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

andrewballantyne

@openshift/team-devconsole-ux Are we okay with 3 equal columns? I'm thinking the first column could be smaller given it can't really ever be longer than the length of '100'.

andrewballantyne · 2020-04-29T13:55:34Z

frontend/packages/knative-plugin/src/components/traffic-splitting/TrafficSplittingModal.scss

+    flex: auto;
+    width: 30%;


Suggested change

flex: auto;

width: 30%;

flex-grow: 1;

Grow to the same size? I haven't tested this out, not sure if the grow-basis will impact the solution, may need grow: 1 1 0;

I tried flex-grow and it does work in this case as the width of the dropdown varies as per the option length. That is why it is not aligned.

Flex-box in the horizontal direction handles width. You don't need the width property. If it's not working you're conflicting with other styles / indeterminate items. I'll look more into it in a few, haven't checked out the code yet.

EDIT: If you are unsure about what flex can do, this is a good guide.

serenamarie125

Agreed, can we make the first column smaller since it's a 3 char max? and add that space to the dropdown in the last column?

openshift-ci-robot · 2020-04-29T15:10:07Z

@vikram-raj: This pull request references Bugzilla bug 1829385, which is valid.

3 validation(s) were run on this bug

bug is open, matching expected state (open)
bug target release (4.5.0) matches configured target release for branch (4.5.0)
bug is in the state POST, which is one of the valid states (NEW, ASSIGNED, ON_DEV, POST, POST)

In response to this:

Bug 1829385: fix alignment issues with MultiColumnField in Traffic Splitting modal

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

serenamarie125

This is great, thanks for the updates @vikram-raj

andrewballantyne · 2020-04-29T16:06:53Z

frontend/packages/knative-plugin/src/components/traffic-splitting/TrafficSplittingModal.scss

+.odc-traffic-splitting-modal {
+  .odc-multi-column-field__col {
+    flex: none;
+    width: 10%;
+  }
+  .odc-multi-column-field__col:nth-of-type(2) {
+    width: 20%;
+  }
+  .odc-multi-column-field__col:nth-of-type(3) {
+    width: 60%;
+  }
+}


This is not an appropriate solution @vikram-raj - this is a hack at best. For one, your percentages don't equal 100.

I think we need to update the MultiColumnField component to support this logic over "splitting the space equally with everyone". Otherwise we'll end up with this problem on every use of this component moving forward as well.

christianvogt · 2020-04-29T16:21:39Z

@vikram-raj seems to me that this can occur with any usage of the MultiColumnField and therefore would be better off having a solution that can be reused everywhere.
I think what we want is the ability to use the standard 12 column distribution.
Would be good to even support a responsive layout in future.

Why don't we allow the for the children of the component to specify the grid spans?
eg.

<MultiColumnFieldCell span={2}><InputField /></MultiColumnFieldCell>

By default we evenly distribute the spans based on the number of columns.

cc @rohitkrai03 thoughts?

rohitkrai03 · 2020-04-29T18:26:50Z

@vikram-raj seems to me that this can occur with any usage of the MultiColumnField and therefore would be better off having a solution that can be reused everywhere.
I think what we want is the ability to use the standard 12 column distribution.
Would be good to even support a responsive layout in future.

Why don't we allow the for the children of the component to specify the grid spans?
eg.
<MultiColumnFieldCell span={2}><InputField /></MultiColumnFieldCell>
By default we evenly distribute the spans based on the number of columns.

cc @rohitkrai03 thoughts?

I agree with @christianvogt here, we should look at finding the solution which fixes this issue with all the usages of this component. I like the idea of children defining the space they need based on the 12 column grid layout. By default all columns can be divided into equal space.

vikram-raj · 2020-05-01T00:02:26Z

Added pf Grid layout to MultiColumnField component.

christianvogt · 2020-05-01T14:52:40Z

...kages/console-shared/src/components/formik-fields/multi-column-field/MultiColumnFieldRow.tsx

+          <GridItem span={span[key]}>
+            <div key={fieldName} className="odc-multi-column-field__col">


key needs to be on the GridItem

christianvogt · 2020-05-01T14:56:26Z

frontend/packages/console-shared/src/components/formik-fields/field-types.ts

@@ -79,6 +79,7 @@ export interface MultiColumnFieldProps extends FieldProps {
  emptyMessage?: string;
  headers: string[];
  children: React.ReactNode;
+  span: gridItemSpanValueShape[];


Evenly space columns if omitted.

Suggested change

span: gridItemSpanValueShape[];

span?: gridItemSpanValueShape[];

I think we should name this spans instead since the api for headers is also plural.

christianvogt · 2020-05-01T15:08:32Z

...ackages/console-shared/src/components/formik-fields/multi-column-field/MultiColumnField.scss

@@ -1,15 +1,12 @@
 .odc-multi-column-field {
  &__row {
-    display: flex;
-    flex-direction: row;
    position: relative;
    margin-right: var(--pf-global--spacer--lg);
    margin-bottom: var(--pf-global--spacer--lg);
    max-height: var(--pf-global--spacer--xl);


Just saw that we have a max height per row. unsure why that is. @rohitkrai03 ?

Ping @rohitkrai03 ^

I don't exactly remember as to why I added this but I think it was something to do with the UX designs at the moment and rows being bigger than the designs.

christianvogt · 2020-05-01T15:10:18Z

...ackages/console-shared/src/components/formik-fields/multi-column-field/MultiColumnField.scss

@@ -18,6 +15,7 @@
    line-height: var(--pf-global--spacer--xl);
    position: absolute;
    right: -30px;
+    top: 0;


You'll want want to center the button vertically. For a typical row, the result is the same, but gives more flexibility if we start creating rows where the height differs from the button height.

top: 50%; transform: translateY(-50%);

This would enable us to support the same layout as is done here:

Would not just a flex wrapper fix this? There are align center options natively available without going to negative translations.

christianvogt · 2020-05-01T15:11:27Z

...es/console-shared/src/components/formik-fields/multi-column-field/MultiColumnFieldHeader.tsx

-    ))}
-    <div className="odc-multi-column-field__col--button" />
+    <Grid className="odc-multi-column-field__row">
+      {headers.map((header, key) => (


key => i or index

christianvogt · 2020-05-01T15:12:48Z

...kages/console-shared/src/components/formik-fields/multi-column-field/MultiColumnFieldRow.tsx

-      );
-    })}
+    <Grid>
+      {React.Children.map(children, (child: React.ReactElement, key) => {


key => i or index

christianvogt · 2020-05-01T15:15:56Z

frontend/packages/dev-console/src/components/pipelines/detail-page-tabs/PipelineParameters.tsx

@@ -20,6 +20,7 @@ const PipelineParameters: React.FC<PipelineParametersProps> = (props) => {
      emptyValues={{ name: '', description: '', default: '' }}
      emptyMessage={emptyMessage}
      isReadOnly={isReadOnly}
+      span={[4, 4, 4]}


Shouldn't be required and therefore columns should be evenly spaced.
Same comment for all instances where columns should be evenly spaced.

@christianvogt How will we evenly spaced the field in the case of 5, 7 or 9.. fields present in a row?

Not that we will be creating such layout but simply make them all even then add 1 to each column starting from the beginning until you've used up all the spaces.
eg.
5 = [3,3,2,2,2]
7 = [2,2,2,2,2,1,1]
9 = [2,2,2,1,1,1,1,1,1]

christianvogt · 2020-05-01T15:16:39Z

frontend/packages/knative-plugin/src/components/traffic-splitting/TrafficSplittingModal.tsx

@@ -23,7 +23,7 @@ const TrafficSplittingModal: React.FC<Props> = ({
  values,
 }) => {
  return (
-    <form className="modal-content" onSubmit={handleSubmit}>
+    <form className="modal-content odc-traffic-splitting-modal" onSubmit={handleSubmit}>


I don't see odc-traffic-splitting-modal defined.

andrewballantyne · 2020-05-05T15:43:05Z

...packages/console-shared/src/components/formik-fields/multi-column-field/MultiColumnField.tsx

 import { SecondaryStatus, useFormikValidationFix } from '@console/shared';
 import { MultiColumnFieldProps } from '../field-types';
 import MultiColumnFieldHeader from './MultiColumnFieldHeader';
 import MultiColumnFieldRow from './MultiColumnFieldRow';
 import MultiColumnFieldFooter from './MultiColumnFieldFooter';
 import './MultiColumnField.scss';

+const getSpans = (totalFieldCount: number): gridItemSpanValueShape[] => {


This can get tests... can you move it to a utility file and then write a few tests to verify it?

andrewballantyne · 2020-05-05T15:47:39Z

...es/console-shared/src/components/formik-fields/multi-column-field/MultiColumnFieldHeader.tsx

+      <div className="odc-multi-column-field__col--button" />
+    </Grid>
  </div>


The button column is outside of the grid on the MultiColumnFieldRow I think we can do the same here.

Suggested change

<div className="odc-multi-column-field__col--button" />

</Grid>

</div>

</Grid>

<div className="odc-multi-column-field__col--button" />

</div>

andrewballantyne · 2020-05-05T15:59:53Z

...ackages/console-shared/src/components/formik-fields/multi-column-field/MultiColumnField.scss

+    top: 50%;
+    transform: translateY(-50%);
  }


Hmm, wonder if we could make a slight change here.

cursor: pointer; impacts disabled buttons... Moving it to here would make it only cursor when you can click the button:

button:not(:disabled) { cursor: pointer; }

andrewballantyne

/lgtm

/assign @christianvogt

Will need Christian's approval as I do not have power to approve shared package changes.

christianvogt · 2020-05-05T22:03:11Z

...ackages/console-shared/src/components/formik-fields/multi-column-field/MultiColumnField.scss

+    button:not(:disabled) {
+      cursor: pointer;
+    }


Why is this needed when we are using PF Button which already has a pointer cursor?

🤔 good point... I just moved the cursor without testing if it was needed.

christianvogt · 2020-05-05T22:12:24Z

...es/console-shared/src/components/formik-fields/multi-column-field/multicolumn-field-utils.ts

+export const getSpans = (totalFieldCount: number): gridItemSpanValueShape[] => {
+  const spans: gridItemSpanValueShape[] = _.fill(Array(totalFieldCount), 1);
+  if (totalFieldCount === 1) {
+    return [12];
+  }
+  if (totalFieldCount === 12) {
+    return _.fill(Array(12), 1);
+  }
+  while (_.sum(spans) !== 12) {
+    for (let i = 0; i < totalFieldCount; i++) {
+      spans[i]++;
+      if (_.sum(spans) === 12) {
+        break;
+      }
+    }
+  }
+  return spans;
+};


This can be simplified to something like this:

const spans = _.fill(Array(totalFieldCount), Math.trunc(12 / totalFieldCount)); let remainder = 12 % totalFieldCount; while (remainder--) { spans[remainder]++; } return spans;

christianvogt · 2020-05-05T22:12:36Z

...es/console-shared/src/components/formik-fields/multi-column-field/multicolumn-field-utils.ts

+import * as _ from 'lodash';
+import { gridItemSpanValueShape } from '@patternfly/react-core';
+
+export const getSpans = (totalFieldCount: number): gridItemSpanValueShape[] => {


Suggested change

export const getSpans = (totalFieldCount: number): gridItemSpanValueShape[] => {

export const getSpans = (totalFieldCount: gridItemSpanValueShape): gridItemSpanValueShape[] => {

openshift-ci-robot · 2020-05-06T10:45:44Z

@vikram-raj: This pull request references Bugzilla bug 1829385, which is valid.

3 validation(s) were run on this bug

bug is open, matching expected state (open)
bug target release (4.5.0) matches configured target release for branch (4.5.0)
bug is in the state POST, which is one of the valid states (NEW, ASSIGNED, ON_DEV, POST, POST)

In response to this:

Bug 1829385: fix alignment issues with MultiColumnField in Traffic Splitting modal

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

andrewballantyne · 2020-05-06T13:12:13Z

...packages/console-shared/src/components/formik-fields/multi-column-field/MultiColumnField.tsx

+  const totalFieldCount: gridItemSpanValueShape = React.Children.count(
+    children,
+  ) as gridItemSpanValueShape;


Typing and casting should not be needed... did TypeScript yell at you?

yes, after changing the type of totalFieldCount to gridItemSpanValueShape from number in the utils.

Sorry, i caused this because I didn't follow the code while making the suggestion for the input param type.
Don't care that much which approach you take so long as the getSpans function supports a number > 12.

andrewballantyne · 2020-05-06T13:13:26Z

...es/console-shared/src/components/formik-fields/multi-column-field/multicolumn-field-utils.ts

+  const spans: gridItemSpanValueShape[] = _.fill(
+    Array(totalFieldCount),
+    Math.trunc(12 / totalFieldCount),
+  ) as gridItemSpanValueShape[];


Same here, is the type & cast needed by TypeScript?

Yes, I was getting the type error because after adding return type gridItemSpanValueShape[] to this utils.

Ah right... because _.fill has probably a very generic type (if any). Well, it's a nit at this point, but you don't have to type the variable if you're casting. It's always that type.

andrewballantyne · 2020-05-06T14:51:12Z

/lgtm

christianvogt · 2020-05-06T21:35:08Z

/approve

openshift-ci-robot · 2020-05-06T21:35:35Z

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: andrewballantyne, christianvogt, serenamarie125, vikram-raj

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

~~frontend/OWNERS~~ [christianvogt]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

openshift-ci-robot · 2020-05-07T01:43:51Z

@vikram-raj: All pull requests linked via external trackers have merged: openshift/console#5229. Bugzilla bug 1829385 has been moved to the MODIFIED state.

In response to this:

Bug 1829385: fix alignment issues with MultiColumnField in Traffic Splitting modal

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

openshift-ci-robot requested review from divyanshiGupta and sahil143 April 29, 2020 13:33

vikram-raj changed the title ~~Action menu should be 'fix alignment issues with MultiColumnField in Traffic Splitting modal~~ fix alignment issues with MultiColumnField in Traffic Splitting modal Apr 29, 2020

vikram-raj force-pushed the odc-3421 branch from 653cc48 to fab0bdb Compare April 29, 2020 13:36

openshift-ci-robot changed the title ~~fix alignment issues with MultiColumnField in Traffic Splitting modal~~ Bug 1829385: fix alignment issues with MultiColumnField in Traffic Splitting modal Apr 29, 2020

openshift-ci-robot added bugzilla/severity-medium Referenced Bugzilla bug's severity is medium for the branch this PR is targeting. bugzilla/valid-bug Indicates that a referenced Bugzilla bug is valid for the branch this PR is targeting. labels Apr 29, 2020

andrewballantyne suggested changes Apr 29, 2020

View reviewed changes

openshift-ci-robot assigned andrewballantyne Apr 29, 2020

serenamarie125 suggested changes Apr 29, 2020

View reviewed changes

vikram-raj force-pushed the odc-3421 branch from fab0bdb to aaa95db Compare April 29, 2020 15:09

serenamarie125 approved these changes Apr 29, 2020

View reviewed changes

andrewballantyne suggested changes Apr 29, 2020

View reviewed changes

vikram-raj force-pushed the odc-3421 branch from aaa95db to 9ebdbe0 Compare April 30, 2020 23:57

openshift-ci-robot added component/dev-console Related to dev-console component/shared Related to console-shared labels Apr 30, 2020

christianvogt reviewed May 1, 2020

View reviewed changes

vikram-raj force-pushed the odc-3421 branch 2 times, most recently from 358eeb1 to e789885 Compare May 5, 2020 08:02

vikram-raj requested a review from christianvogt May 5, 2020 14:54

andrewballantyne suggested changes May 5, 2020

View reviewed changes

vikram-raj force-pushed the odc-3421 branch from e789885 to 5869b05 Compare May 5, 2020 19:28

vikram-raj requested a review from andrewballantyne May 5, 2020 19:28

andrewballantyne approved these changes May 5, 2020

View reviewed changes

openshift-ci-robot assigned christianvogt May 5, 2020

openshift-ci-robot added the lgtm Indicates that a PR is ready to be merged. label May 5, 2020

christianvogt reviewed May 5, 2020

View reviewed changes

fix alignment issues with MultiColumnField in Traffic Splitting modal

4e98081

vikram-raj force-pushed the odc-3421 branch from 5869b05 to 4e98081 Compare May 6, 2020 06:02

openshift-ci-robot removed the lgtm Indicates that a PR is ready to be merged. label May 6, 2020

vikram-raj requested a review from christianvogt May 6, 2020 06:02

andrewballantyne reviewed May 6, 2020

View reviewed changes

openshift-ci-robot added the lgtm Indicates that a PR is ready to be merged. label May 6, 2020

openshift-ci-robot added the approved Indicates a PR has been approved by an approver from all required OWNERS files. label May 6, 2020

openshift-merge-robot merged commit 2b598b0 into openshift:master May 7, 2020

vikram-raj deleted the odc-3421 branch May 7, 2020 11:25

spadgett added this to the v4.5 milestone May 11, 2020

		<GridItem span={span[key]}>
		<div key={fieldName} className="odc-multi-column-field__col">

	span: gridItemSpanValueShape[];
	span?: gridItemSpanValueShape[];

	export const getSpans = (totalFieldCount: number): gridItemSpanValueShape[] => {
	export const getSpans = (totalFieldCount: gridItemSpanValueShape): gridItemSpanValueShape[] => {

Bug 1829385: fix alignment issues with MultiColumnField in Traffic Splitting modal #5229

Bug 1829385: fix alignment issues with MultiColumnField in Traffic Splitting modal #5229

Conversation

vikram-raj commented Apr 29, 2020 • edited

vikram-raj commented Apr 29, 2020

vikram-raj commented Apr 29, 2020

openshift-ci-robot commented Apr 29, 2020

andrewballantyne left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

andrewballantyne Apr 29, 2020 • edited

Choose a reason for hiding this comment

serenamarie125 left a comment

Choose a reason for hiding this comment

openshift-ci-robot commented Apr 29, 2020

serenamarie125 left a comment

Choose a reason for hiding this comment

andrewballantyne Apr 29, 2020 • edited

Choose a reason for hiding this comment

christianvogt commented Apr 29, 2020

rohitkrai03 commented Apr 29, 2020

vikram-raj commented May 1, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

andrewballantyne left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

openshift-ci-robot commented May 6, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

andrewballantyne commented May 6, 2020

christianvogt commented May 6, 2020

openshift-ci-robot commented May 6, 2020

openshift-ci-robot commented May 7, 2020

vikram-raj commented Apr 29, 2020 •

edited

andrewballantyne Apr 29, 2020 •

edited

andrewballantyne Apr 29, 2020 •

edited