@abgov/jsonforms-components 1.21.0 → 1.22.0

package/index.esm.js

@@ -4,7 +4,7 @@ import { GoAFormItem, GoAInput, GoATextArea, GoACallout, GoAInputDate, GoAInputD
 import styled from 'styled-components';
 import axios from 'axios';
 import get$1 from 'lodash/get';
-import { rankWith, isStringControl, and, optionIs, uiTypeIs, isDateControl, isNumberControl, isIntegerControl, isDateTimeControl, isTimeControl, isEnumControl, isBooleanControl, getAjv, isVisible, isEnabled, deriveLabelForUISchemaElement, schemaTypeIs, formatIs, createDefaultValue, Paths, or, isObjectArrayControl, isPrimitiveArrayControl, withIncreasedRank, hasType, isControl, isCategorization, isLayout } from '@jsonforms/core';
+import { rankWith, isStringControl, and, optionIs, uiTypeIs, isDateControl, isNumberControl, isIntegerControl, isDateTimeControl, isTimeControl, isEnumControl, isBooleanControl, getAjv, isVisible, isEnabled, deriveLabelForUISchemaElement, schemaTypeIs, formatIs, createDefaultValue, Paths, or, isObjectArrayControl, isPrimitiveArrayControl, scopeEndsWith, withIncreasedRank, hasType, isControl as isControl$1, isCategorization, isLayout as isLayout$1 } from '@jsonforms/core';
 import { withJsonFormsControlProps, withJsonFormsRendererProps, withJsonFormsEnumProps, withTranslateProps, useJsonForms, JsonFormsDispatch, withJsonFormsLayoutProps, withJsonFormsArrayLayoutProps, withJsonFormsCellProps } from '@jsonforms/react';
 import merge from 'lodash/merge';
 import isEmpty$1 from 'lodash/isEmpty';
@@ -2871,6 +2871,20 @@ const fetchRegister = props => __awaiter(void 0, void 0, void 0, function* () {
   }
   return undefined;
 });
+const validateUrl = props => __awaiter(void 0, void 0, void 0, function* () {
+  const {
+    url
+  } = props;
+  if (url) {
+    try {
+      yield axios.get(url);
+      return true;
+    } catch (err) {
+      console.warn(`Error in fetching data from remote: ${err}`);
+      return false;
+    }
+  } else return false;
+});
 
 const JsonFormsRegisterContext = /*#__PURE__*/createContext(undefined);
 const JsonFormRegisterProvider = ({
@@ -4595,7 +4609,6 @@ const flatten = arr => {
       const flatter = flatten(val[1]);
       return acc.concat(flatter);
     }
-    // If the current value is a string, add it to the accumulator
     if (isNameValuePair(val)) {
       return acc.concat([[String(val[0]), getValue(val[1]) || '']]);
     }
@@ -4613,7 +4626,7 @@ const flatten = arr => {
  * However, we need to decide how to handle these sorts of nested data in the summary
  * page before messing with it.
  */
-const getFormFieldValue = (scope, data) => {
+const getFormFieldValue = (schema, scope, data) => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   let currentValue = data;
   if (scope) {
@@ -4660,7 +4673,7 @@ const renderFileLink = (fileUploaderElement, downloadFile) => {
     children: fileUploaderElement === null || fileUploaderElement === void 0 ? void 0 : fileUploaderElement.filename
   });
 };
-const renderReviewControl = (data, element, requiredFields, index,
+const renderReviewControl = (schema, data, element, requiredFields, index,
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 fileList, downloadFile) => {
   const fieldName = element.scope.split('/').pop() || '';
@@ -4668,21 +4681,21 @@ fileList, downloadFile) => {
   if (!fieldName || !label) return null;
   const isFileUploader = element.scope.includes('fileUploader');
   const fileUploaderElement = isFileUploader ? fileList && fileList[fieldName] : null;
-  const fieldValues = getFormFieldValue(element.scope, data ? data : {});
+  const fieldValues = getFormFieldValue(schema, element.scope, data ? data : {});
   const isRequired = requiredFields.includes(fieldName);
   const asterisk = isRequired ? ' *' : '';
   const values = fieldValues.value;
   return jsxs(React.Fragment, {
     children: [fieldValues.type === 'primitive' && renderValue(`${label}${asterisk}: `, `${index}`, fieldValues.value, fileUploaderElement, downloadFile), fieldValues.type === 'object' && values && values.length > 0 && values.map((v, i) => {
       return renderValue(`${v[0]}: `, `${index}:${i}`, v[1]);
-    }), fieldValues.type === 'array' && values && values.length > 0 && renderListDetails(values)]
+    }), fieldValues.type === 'array' && values && values.length > 0 && renderList(values)]
   }, index);
 };
-const renderListDetails = items => {
+const renderList = items => {
   return jsx(React.Fragment, {
     children: items.map((item, itemIndex) => {
       const details = Array.isArray(item) ? item : [undefined, [undefined, undefined]];
-      return jsxs(Fragment, {
+      return jsxs("div", {
         children: [jsx(Grid, {
           children: details[1].map((detail, detailIndex) => {
             const safeDetail = Array.isArray(detail) ? detail : [undefined, undefined];
@@ -4696,32 +4709,44 @@ const renderListDetails = items => {
   });
 };
 
-const renderReviewListWithDetail = (element,
+const renderReviewListWithDetail = (schema, elements,
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 data, field, index, requiredFields) => {
   const listData = data[field];
+  const detailData = [];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  listData.forEach((elementData, i) => {
+    const itemData = [];
+    elements.forEach((element, j) => {
+      const fieldName = element.scope.split('/').pop() || '';
+      const label = resolveLabelFromScope(element.scope);
+      const value = String(elementData[fieldName]);
+      itemData.push([label, value]);
+    });
+    detailData.push([`${i}`, itemData]);
+  });
   return jsxs(ListWithDetail, {
     children: [jsxs(ListWithDetailHeading, {
       children: [field, listData.length > 1 && 's']
-    }), jsx(Grid, {
-      children: listData.map((childData, childIndex) => {
-        var _a, _b;
-        return jsx(React.Fragment, {
-          children: jsx(RenderFormReviewFields, {
-            elements: ((_b = (_a = element === null || element === void 0 ? void 0 : element.options) === null || _a === void 0 ? void 0 : _a.detail) === null || _b === void 0 ? void 0 : _b.elements) || [],
-            data: childData,
-            requiredFields: requiredFields
-          })
-        }, `${index}-${childIndex}`);
-      })
-    })]
+    }), renderList(detailData)]
   }, `${index}-${field}`);
 };
 
+const isControl = type => {
+  return type === 'Control';
+};
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const isListWithDetail$1 = (type, data, fieldName) => {
+  return type === 'ListWithDetail' && typeof data === 'object' && data !== null && fieldName in data && Array.isArray(data[fieldName]) && data[fieldName].length > 0;
+};
+const isLayout = schema => {
+  return typeof schema === 'object' && schema !== null && 'elements' in schema;
+};
 const RenderFormReviewFields = ({
   elements,
   data,
-  requiredFields
+  requiredFields,
+  schema
 }) => {
   var _a, _b;
   const enumerators = useContext(JsonFormContext);
@@ -4736,25 +4761,38 @@ const RenderFormReviewFields = ({
     }
   };
   return elements.map((element, index) => {
-    var _a;
+    var _a, _b, _c;
     const clonedElement = JSON.parse(JSON.stringify(element));
     const fieldName = (_a = clonedElement.scope) === null || _a === void 0 ? void 0 : _a.split('/').pop();
-    if (clonedElement.type === 'Control' && clonedElement.scope) {
-      return renderReviewControl(data, clonedElement, requiredFields, index, fileList, downloadFile);
-    } else if (clonedElement.type !== 'ListWithDetail' && (clonedElement === null || clonedElement === void 0 ? void 0 : clonedElement.elements)) {
+    if (isControl(clonedElement.type)) {
+      return renderReviewControl(schema, data, clonedElement, requiredFields, index, fileList, downloadFile);
+    } else if (isListWithDetail$1(clonedElement.type, data, fieldName)) {
+      const elements = removeLayouts((_c = (_b = clonedElement === null || clonedElement === void 0 ? void 0 : clonedElement.options) === null || _b === void 0 ? void 0 : _b.detail) === null || _c === void 0 ? void 0 : _c.elements) || [];
+      return renderReviewListWithDetail(schema, elements, data, fieldName, index);
+    } else if (isLayout(clonedElement)) {
       return jsx(React.Fragment, {
         children: jsx(RenderFormReviewFields, {
           elements: clonedElement.elements,
           data: data,
-          requiredFields: requiredFields
+          requiredFields: requiredFields,
+          schema: schema
         })
       }, index);
-    } else if (clonedElement.type === 'ListWithDetail' && data && data[fieldName] && data[fieldName].length > 0) {
-      return renderReviewListWithDetail(clonedElement, data, fieldName, index, requiredFields);
     }
     return null;
   });
 };
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const removeLayouts = elements => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return elements.reduce((acc, item) => {
+    if (isLayout(item)) {
+      return acc.concat(removeLayouts(item.elements));
+    } else {
+      return acc.concat(item);
+    }
+  }, []);
+};
 
 const RenderStepElements = props => {
   return (
@@ -5001,7 +5039,8 @@ const FormStepper = props => {
                     children: jsx(RenderFormReviewFields, {
                       elements: category === null || category === void 0 ? void 0 : category.elements,
                       data: data,
-                      requiredFields: requiredFields
+                      requiredFields: requiredFields,
+                      schema: schema
                     })
                   })]
                 }, index);
@@ -5724,6 +5763,72 @@ const GoAArrayControlTester = rankWith(3, or(isObjectArrayControl, isPrimitiveAr
 const GoAArrayControlRenderer = withJsonFormsArrayLayoutProps(ArrayControl);
 const GoAListWithDetailsTester = rankWith(3, and(uiTypeIs('ListWithDetail')));
 
+const linkLength = 40;
+const invalidExtensions = ['exe'];
+const LinkSelect = props => {
+  var _a, _b;
+  const componentProps = (_b = (_a = props === null || props === void 0 ? void 0 : props.uischema) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.componentProps;
+  const {
+    link,
+    label,
+    heading,
+    description
+  } = componentProps;
+  const [linkValid, setLinkValid] = useState(null);
+  let error = undefined;
+  let linkLabel = (link === null || link === void 0 ? void 0 : link.length) > linkLength ? `${link === null || link === void 0 ? void 0 : link.slice(0, linkLength)}...` : link;
+  let linkUrl = link;
+  if (label) {
+    linkLabel = label;
+  }
+  const count = link === null || link === void 0 ? void 0 : link.split('.').length;
+  const extension = link === null || link === void 0 ? void 0 : link.split('.')[count - 1];
+  if (invalidExtensions.includes(extension)) {
+    linkUrl = null;
+    linkLabel = '';
+    error = `Invalid extension: ${extension}`;
+  }
+  useEffect(() => {
+    function validateLink(linkUrl) {
+      return __awaiter(this, void 0, void 0, function* () {
+        if (linkUrl) {
+          const response = yield validateUrl({
+            url: linkUrl
+          });
+          setLinkValid(response);
+        }
+      });
+    }
+    validateLink(linkUrl);
+  }, [linkUrl]);
+  if (!linkLabel && !error) {
+    linkLabel = 'Link';
+  }
+  if (linkValid === false) {
+    linkLabel = '';
+    error = 'Invalid Link';
+  }
+  return jsx(GoAFormItem, {
+    error: error,
+    label: heading,
+    children: jsxs("div", {
+      "data-testid": "link-jsonform",
+      children: [description && jsx("div", {
+        children: description
+      }), linkUrl && linkValid ? jsx("a", {
+        href: link,
+        target: "_blank",
+        rel: "noreferrer",
+        children: linkLabel
+      }) : linkLabel]
+    })
+  });
+};
+const linkControl = props => {
+  return jsx(LinkSelect, Object.assign({}, props));
+};
+const GoALinkControlTester = rankWith(2, scopeEndsWith('link'));
+
 const GoATextCell = props => jsx(GoAInputText, Object.assign({}, props));
 const GoATextCellTester = rankWith(1, isStringControl);
 withJsonFormsCellProps(GoATextCell);
@@ -6046,7 +6151,7 @@ const getUISchemaErrors = (uiSchema, schema) => {
     return '';
   }
   // Check control elements
-  if (isControl(uiSchema) && hasType(uiSchema, 'Control')) {
+  if (isControl$1(uiSchema) && hasType(uiSchema, 'Control')) {
     if (!isScopedPrefixed(uiSchema.scope)) {
       return errMalformedScope(uiSchema.scope);
     }
@@ -6080,7 +6185,7 @@ const getUISchemaErrors = (uiSchema, schema) => {
     }
     // ensure each element has type Category, and that each category
     // has elements
-    if (isLayout(uiSchema)) {
+    if (isLayout$1(uiSchema)) {
       const invalidCategorizations = [];
       const invalidCategories = [];
       uiSchema.elements.forEach(e => {
@@ -6155,6 +6260,9 @@ const GoABaseRenderers = [
 {
   tester: GoAEnumControlTester,
   renderer: GoAEnumControl
+}, {
+  tester: GoALinkControlTester,
+  renderer: linkControl
 }, {
   tester: GoAIntegerControlTester,
   renderer: GoAInputIntegerControl

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "1.21.0",
+  "version": "1.22.0",
   "license": "Apache-2.0",
   "description": "Government of Alberta - React renderers for JSON Forms based on the design system.",
   "repository": "https://github.com/GovAlta/adsp-monorepo",

package/src/lib/Context/register/util.d.ts

@@ -1,2 +1,7 @@
 import { RegisterConfig } from './actions';
 export declare const fetchRegister: (props: RegisterConfig) => Promise<any[] | undefined>;
+interface Validate {
+    url?: string;
+}
+export declare const validateUrl: (props: Validate) => Promise<boolean>;
+export {};

package/src/lib/Controls/FormStepper/util/GenerateFormFields.d.ts

@@ -1,10 +1,11 @@
-import { LabelDescription } from '@jsonforms/core';
+import { JsonSchema, LabelDescription } from '@jsonforms/core';
 type jsonformsLabel = string | boolean | LabelDescription | undefined;
 export declare const labelToString: (label: jsonformsLabel, scope: string) => string;
+export declare const resolveLabelFromScope: (scope: string) => string;
 export interface InputValue {
     type: 'primitive' | 'object' | 'array';
     value?: string | NestedStringArray;
 }
 export type NestedStringArray = (string | undefined | NestedStringArray)[];
-export declare const getFormFieldValue: (scope: string, data: unknown) => InputValue;
+export declare const getFormFieldValue: (schema: JsonSchema, scope: string, data: unknown) => InputValue;
 export {};

package/src/lib/Controls/FormStepper/util/RenderFormReviewFields.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
-import { Categorization, Category, UISchemaElement } from '@jsonforms/core';
+import { Categorization, Category, JsonSchema, UISchemaElement } from '@jsonforms/core';
 interface RenderFormReviewFieldsProps {
     elements: UISchemaElement[] | (Category | Categorization)[];
     data: any;
     requiredFields: string[];
+    schema: JsonSchema;
 }
 export declare const RenderFormReviewFields: React.FC<RenderFormReviewFieldsProps>;
 export {};

package/src/lib/Controls/FormStepper/util/renderReviewControl.d.ts

@@ -1,6 +1,8 @@
-import { ControlElement } from '@jsonforms/core';
+import { ControlElement, JsonSchema } from '@jsonforms/core';
+import { NestedStringArray } from './GenerateFormFields';
 export interface FileElement extends File {
     filename: string;
     propertyId: string;
 }
-export declare const renderReviewControl: (data: unknown, element: ControlElement, requiredFields: string[], index: number, fileList: Record<string, any>, downloadFile: (file: File, propertyId: string) => void) => JSX.Element | null;
+export declare const renderReviewControl: (schema: JsonSchema, data: unknown, element: ControlElement, requiredFields: string[], index: number, fileList: Record<string, any>, downloadFile: (file: File, propertyId: string) => void) => JSX.Element | null;
+export declare const renderList: (items: NestedStringArray) => JSX.Element;

package/src/lib/Controls/FormStepper/util/renderReviewLIstWithDetail.d.ts

@@ -1,2 +1,2 @@
-import { ControlElement } from '@jsonforms/core';
-export declare const renderReviewListWithDetail: (element: ControlElement, data: any, field: string, index: number, requiredFields: string[]) => JSX.Element;
+import { ControlElement, JsonSchema } from '@jsonforms/core';
+export declare const renderReviewListWithDetail: (schema: JsonSchema, elements: ControlElement[], data: any, field: string, index: number, requiredFields: string[]) => JSX.Element;

package/src/lib/Controls/Link/LinkControl.d.ts

@@ -0,0 +1,9 @@
+import { ControlProps, RankedTester } from '@jsonforms/core';
+import { TranslateProps } from '@jsonforms/react';
+import { WithInputProps } from '../Inputs/type';
+import { WithOptionLabel } from '../../util';
+import { WithClassname } from '@jsonforms/core';
+export type LinkSelectProps = WithClassname & TranslateProps & WithInputProps & ControlProps;
+export declare const LinkSelect: (props: LinkSelectProps) => JSX.Element;
+export declare const linkControl: (props: ControlProps & WithOptionLabel & TranslateProps) => import("react/jsx-runtime").JSX.Element;
+export declare const GoALinkControlTester: RankedTester;