feature/rjsf-array-under-array-fix (#1068)

* removed the carbon grid and instead using display flex to get the items in an rjsf array field to line up w/ burnettk

* removed unused imports w/ burnettk

* updated python dependencies in docs dir w/ burnettk

---------

Co-authored-by: jasquat <jasquat@users.noreply.github.com>

docs/requirements.txt

@@ -18,11 +18,11 @@ Jinja2==3.1.2
 lazy-object-proxy==1.10.0
 livereload==2.6.3
 lsprotocol==2023.0.0a1
-markdown-it-py==2.2.0
+markdown-it-py==3.0.0
 MarkupSafe==2.1.2
-mdit-py-plugins==0.3.5
+mdit-py-plugins==0.4.0
 mdurl==0.1.2
-myst-parser==1.0.0
+myst-parser==2.0.0
 packaging==23.1
 pygls==1.0.2
 Pygments==2.17.2
@@ -32,7 +32,7 @@ requests==2.30.0
 six==1.16.0
 snowballstemmer==2.2.0
 soupsieve==2.4.1
-Sphinx==5.3.0
+Sphinx==7.2.6
 sphinx-autoapi==2.1.0
 sphinx-autobuild==2021.3.14
 sphinx-basic-ng==1.0.0b1
@@ -44,7 +44,7 @@ sphinxcontrib-htmlhelp==2.0.1
 sphinxcontrib-jquery==4.1
 sphinxcontrib-jsmath==1.0.1
 sphinxcontrib-qthelp==1.0.7
-sphinxcontrib-serializinghtml==1.1.5
+sphinxcontrib-serializinghtml==1.1.10
 tornado==6.3.2
 typeguard==3.0.2
 Unidecode==1.3.8

spiffworkflow-frontend/src/rjsf/carbon_theme/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx

@@ -5,11 +5,6 @@ import {
   RJSFSchema,
   StrictRJSFSchema,
 } from '@rjsf/utils';
-import {
-  Grid,
-  Column,
-  // @ts-ignore
-} from '@carbon/react';
 
 /** The `ArrayFieldItemTemplate` component is the template used to render an items of an array.
  *
@@ -43,57 +38,41 @@ export default function ArrayFieldItemTemplate<
   const mainColumnWidthSmall = 2;
   const mainColumnWidthMedium = 3;
   const mainColumnWidthLarge = 6;
+  const allClassNames = `array-field-container ${className}`;
   return (
-    <div className={className}>
-      <Grid condensed fullWidth>
-        <Column sm={1} md={1} lg={1}>
-          { /* This column is empty on purpose, it helps shift the content and overcomes an abundance of effort
-            to keep grid content to be pushed hard to left at all times, and in this we really need a slight
-            indentation, at least, I felt so at the time.  Could change my mind, as likely as not. */ }
-        </Column>
-        <Column
-          sm={mainColumnWidthSmall}
-          md={mainColumnWidthMedium}
-          lg={mainColumnWidthLarge}
-        >
-          {children}
-        </Column>
-        {hasToolbar && (
-          <Column sm={1} md={1} lg={1}>
-            <div className="array-item-toolbox">
-              <div className="NOT-btn-group">
-                {(hasMoveUp || hasMoveDown) && (
-                  <MoveUpButton
-                    style={btnStyle}
-                    disabled={disabled || readonly || !hasMoveUp}
-                    onClick={onReorderClick(index, index - 1)}
-                    uiSchema={uiSchema}
-                    registry={registry}
-                  />
-                )}
-                {(hasMoveUp || hasMoveDown) && (
-                  <MoveDownButton
-                    style={btnStyle}
-                    disabled={disabled || readonly || !hasMoveDown}
-                    onClick={onReorderClick(index, index + 1)}
-                    uiSchema={uiSchema}
-                    registry={registry}
-                  />
-                )}
-                {hasRemove && (
-                  <RemoveButton
-                    style={btnStyle}
-                    disabled={disabled || readonly}
-                    onClick={onDropIndexClick(index)}
-                    uiSchema={uiSchema}
-                    registry={registry}
-                  />
-                )}
-              </div>
-            </div>
-          </Column>
-        )}
-      </Grid>
+    <div className={allClassNames}>
+      <div className="array-field-contents">{children}</div>
+      {hasToolbar && (
+        <div className="array-field-actions">
+          {(hasMoveUp || hasMoveDown) && (
+            <MoveUpButton
+              style={btnStyle}
+              disabled={disabled || readonly || !hasMoveUp}
+              onClick={onReorderClick(index, index - 1)}
+              uiSchema={uiSchema}
+              registry={registry}
+            />
+          )}
+          {(hasMoveUp || hasMoveDown) && (
+            <MoveDownButton
+              style={btnStyle}
+              disabled={disabled || readonly || !hasMoveDown}
+              onClick={onReorderClick(index, index + 1)}
+              uiSchema={uiSchema}
+              registry={registry}
+            />
+          )}
+          {hasRemove && (
+            <RemoveButton
+              style={btnStyle}
+              disabled={disabled || readonly}
+              onClick={onDropIndexClick(index)}
+              uiSchema={uiSchema}
+              registry={registry}
+            />
+          )}
+        </div>
+      )}
     </div>
   );
 }

spiffworkflow-frontend/src/rjsf/carbon_theme/index.css

@@ -27,7 +27,6 @@
   background-color: inherit;
 }
 
-
 /* for some reason it wraps the entire form using FieldTemplate.jsx, which is where we added the rjsf-field thing (which is only intended for fields, not entire forms. hence the double rjsf-field reference, only for rjsf-fields inside rjsf-fields, so we don't get double margin after the last field */
 .rjsf .rjsf-field .rjsf-field {
   margin-bottom: 2rem;
@@ -37,10 +36,6 @@
   margin-bottom: 2rem;
 }
 
-.array-item-toolbox {
-  margin-left: 2rem;
-}
-
 .rjsf .text-input {
   padding-top: 8px;
 }
@@ -73,12 +68,12 @@
   display: none;
 }
 
-.rjsf .array-item  .rjsf-field {
+.rjsf .array-item .rjsf-field {
   margin-bottom: 0;
 }
 
 .rjsf .markdown-field-desc-text .field-description {
-  font-size: .8rem;
+  font-size: 0.8rem;
 }
 
 .rjsf .numeric--range-field-wrapper input {
@@ -110,5 +105,20 @@
 }
 
 .rjsf .side-by-side-column:not(:last-child) {
-    padding-right: 1rem;
+  padding-right: 1rem;
+}
+
+.rjsf .array-field-container {
+  display: flex;
+}
+.rjsf .array-field-contents {
+  flex: 8;
+  margin-left: calc(3%);
+}
+.rjsf .array-field-actions {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  /* justify-content: center; */
+  align-items: center;
 }