DFD: new node and link related properties added, that will enable a b…

…etter sec control selection in a later phase (#14)
cds-snc · Oct 19, 2023 · 5e525f6 · 5e525f6
1 parent 44398c2
commit 5e525f6
Show file tree

Hide file tree

Showing 11 changed files with 1,213 additions and 53 deletions.
diff --git a/src/components/generic/DiagramCanvas/flowDiagram/components/Canvas/Canvas.wrapper.tsx b/src/components/generic/DiagramCanvas/flowDiagram/components/Canvas/Canvas.wrapper.tsx
@@ -61,6 +61,9 @@ export class CanvasWrapper extends React.Component<ICanvasWrapperProps, IState>
   private ref = React.createRef<HTMLElement>();
 
   public componentDidMount () {
+    window.addEventListener('error', function (e) {
+      console.error(e);
+    });
     this.updateSize();
 
     if (this.ref.current) {

diff --git a/src/components/generic/DiagramCanvas/flowDiagram/components/Canvas/CanvasOuter.default.tsx b/src/components/generic/DiagramCanvas/flowDiagram/components/Canvas/CanvasOuter.default.tsx
@@ -25,6 +25,7 @@ export interface ICanvasOuterDefaultProps {
 
 export const CanvasOuterDefault = styled.div<ICanvasOuterDefaultProps>`
   position: relative;
+  border-radius: 15px;
   background-size: 20px 20px;
   background-color: rgba(0,0,0,0.08);
   background-image:

diff --git a/...s/generic/DiagramCanvas/flowDiagram/components/Canvas/PropertiesPanel/PropertiesPanel.tsx b/...s/generic/DiagramCanvas/flowDiagram/components/Canvas/PropertiesPanel/PropertiesPanel.tsx
@@ -15,14 +15,11 @@
  ******************************************************************************************************************** */
 
 //import * as React from 'react';
-import ColumnLayout from '@cloudscape-design/components/column-layout';
-import Form from '@cloudscape-design/components/form';
-import FormField from '@cloudscape-design/components/form-field';
-import Textarea from '@cloudscape-design/components/textarea';
-import Checkbox from '@cloudscape-design/components/checkbox';
+import { ColumnLayout, Form, FormField, Textarea, Checkbox, TagEditor, ExpandableSection, Multiselect } from '@cloudscape-design/components';
+import { dataFeaturesOptions, securityFeaturesOptions, techFeaturesOptions } from './panel-config';
+//import { OptionDefinition } from '@cloudscape-design/components/internal/components/option/interfaces';
 
 export default function PropertiesPanel(props) {
-  //console.log('clickedObjectProperties ', props);
   function handleNameChange(event) {
     props.onChangeName(event.detail.value);
   };
@@ -35,6 +32,18 @@ export default function PropertiesPanel(props) {
   function handleOutOfScopeReasonChange(event) {
     props.onChangeOutOfScopeReason(event.detail.value);
   };
+  function handleTagsChange(event) {
+    props.onChangeTags(event.detail.tags);
+  };
+  function handleDataFeaturesChange(event) {
+    props.onChangeDataFeatures(event.detail.selectedOptions);
+  };
+  function handleTechFeaturesChange(event) {
+    props.onChangeTechFeatures(event.detail.selectedOptions);
+  };
+  function handleSecurityFeaturesChange(event) {
+    props.onChangeSecurityFeatures(event.detail.selectedOptions);
+  };
 
   return (
     <form onSubmit={e => e.preventDefault()} >
@@ -74,10 +83,66 @@ export default function PropertiesPanel(props) {
             <Textarea
               value={props.outOfScopeReason}
               onChange={handleOutOfScopeReasonChange}
-              placeholder="reason for out of scope"
+              placeholder="a kind reminder for future-you"
               rows={2} />
           </FormField>
         </ColumnLayout>
+        <ColumnLayout
+          borders="vertical"
+          columns={3}
+          variant="text-grid" >
+          <Multiselect
+            selectedOptions={props.dataFeatures}
+            onChange={handleDataFeaturesChange}
+            placeholder='Data features that apply to selected component'
+            tokenLimit={3} // number of visible selected options
+            disabled={props.outOfScope}
+            options={dataFeaturesOptions(props.type)}
+          />
+          <Multiselect
+            selectedOptions={props.techFeatures}
+            onChange={handleTechFeaturesChange}
+            placeholder='Tech features that apply to selected component'
+            tokenLimit={3} // number of visible selected options
+            disabled={props.outOfScope}
+            options={techFeaturesOptions(props.type)}
+          />
+          <Multiselect
+            selectedOptions={props.securityFeatures}
+            onChange={handleSecurityFeaturesChange}
+            placeholder='Security features that apply to selected component'
+            tokenLimit={3} // number of visible selected options
+            disabled={props.outOfScope}
+            options={securityFeaturesOptions(props.type)}
+          />
+        </ColumnLayout>
+        <ColumnLayout
+          borders="vertical"
+          columns={1}
+          variant="text-grid" >
+          <ExpandableSection headerText={`Tags (${props.tags?.length || 0})`}>
+            <TagEditor
+              i18nStrings={{
+                tagLimit: (availableTags, tagLimit) =>
+                  availableTags === tagLimit
+                    ? 'You can add up to ' + tagLimit + ' tags.'
+                    : availableTags === 1
+                      ? 'You can add up to 1 more tag.'
+                      : 'You can add up to ' + availableTags + ' more tags.',
+                keyHeader: 'Key',
+                valueHeader: 'Value (optional)',
+                addButton: 'Add new tag',
+                removeButton: 'Remove',
+                keyPlaceholder: 'Enter key',
+                valuePlaceholder: 'Enter value',
+                emptyKeyError: 'You must specify a tag key',
+              }}
+              tags={props.tags}
+              onChange={handleTagsChange}
+              tagLimit={5}
+            />
+          </ExpandableSection>
+        </ColumnLayout>
       </Form>
     </form>
   );