Merge branch 'develop' into FWF-4180/translation-edit

forms-flow-components/package.json

@@ -34,11 +34,17 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-ts-react-important-stuff": "^3.0.0",
     "eslint-plugin-prettier": "^3.4.1",
+    "i18next-browser-languagedetector": "^7.0.1",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^27.0.6",
     "jest-cli": "^27.0.6",
     "prettier": "^2.3.2",
     "pretty-quick": "^3.1.1",
+    "react": "^17.0.2",
+    "react-bootstrap": "^1.6.0",
+    "react-dom": "^17.0.2",
+    "react-i18next": "^12.1.4",
+    "react-js-pagination": "^3.0.3",
     "sass": "^1.57.1",
     "sass-loader": "^13.2.0",
     "ts-config-single-spa": "^3.0.0",
@@ -49,19 +55,14 @@
     "webpack-config-single-spa-react-ts": "^4.0.0",
     "webpack-config-single-spa-ts": "^4.0.0",
     "webpack-dev-server": "^4.0.0",
-    "webpack-merge": "^5.8.0",
-    "react": "^17.0.2",
-    "react-bootstrap": "^1.6.0",
-    "react-dom": "^17.0.2",
-    "i18next-browser-languagedetector": "^7.0.1",
-    "react-i18next": "^12.1.4",
-    "react-js-pagination": "^3.0.3"
+    "webpack-merge": "^5.8.0"
   },
   "dependencies": {
     "@types/react": "^17.0.19",
     "@types/react-dom": "^17.0.9",
     "@types/systemjs": "^6.1.1",
     "@types/webpack-env": "^1.16.2",
+    "multiselect-react-dropdown": "^2.0.25",
     "single-spa": "^5.9.3",
     "single-spa-react": "^4.3.1"
   },

forms-flow-components/src/components/CustomComponents/InputDropdown.tsx

@@ -49,7 +49,7 @@ export const InputDropdown: React.FC<InputDropdownProps> = ({
   onBlurDropDown
 }) => {
   const { t } = useTranslation();
-  const primaryColor = StyleServices.getCSSVariable('primary');
+  const primaryColor = StyleServices.getCSSVariable('--ff-primary');
   const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false);
   const [inputValue, setInputValue] = useState<string>(selectedOption || ''); 
   const [filteredItems, setFilteredItems] = useState<DropdownItem[]>([]);

forms-flow-components/src/components/CustomComponents/MultiSelect.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import Multiselect from 'multiselect-react-dropdown';
+
+
+interface MultiSelectInterface {
+  options: Array<any>; 
+  selectedValues?: Array<any>; 
+  onSelect?: (selected: any) => void; 
+  onRemove?: (removed: any) => void; 
+  displayValue?: string;  
+  avoidHighlightFirstOption?: boolean;  
+}
+
+export const MultipleSelect: React.FC<MultiSelectInterface> = ({
+    options = [],
+    selectedValues = [],
+    onSelect = ()=> {},
+    onRemove = ()=> {},
+    displayValue= "",
+    avoidHighlightFirstOption = true
+
+})=>{
+    return <Multiselect
+    options={options}  
+    selectedValues={selectedValues} 
+    onSelect={onSelect}  
+    onRemove={onRemove}  
+    displayValue={displayValue}
+    avoidHighlightFirstOption={avoidHighlightFirstOption}
+    />
+}

forms-flow-components/src/components/CustomComponents/NoDataFound.tsx

@@ -8,7 +8,7 @@ export const NoDataFound: React.FC = () => {
     <tbody className="no-data-body">
       <tr>
         <td colSpan={2} className="no-data-container">
-          <span className="no-data-text" data-testid="no-data-found">{t("Nothing is found. Please try again.")}</span>
+          <span className="no-data-text" data-testid="no-data-found">{t("Nothing is found based on your search query. Please try again.")}</span>
         </td>
       </tr>
     </tbody>

forms-flow-components/src/components/CustomComponents/ReusableProcessTableRow.tsx

@@ -22,7 +22,7 @@ export const ReusableProcessTableRow: React.FC<ProcessTableRowProps> = ({ item,
   return (
     <tr>
       <td className="w-25 text-ellipsis text-nowrap">
-        <span className="ms-4">{item.name}</span>
+        <span>{item.name}</span>
       </td>
       <td className="w-20 text-ellipsis text-nowrap">
         <span>{item.processKey}</span>

forms-flow-components/src/components/CustomComponents/TableFooter.tsx

@@ -2,8 +2,7 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import Pagination from "react-js-pagination";
 import { Dropdown } from "react-bootstrap";
-import { DownArrowIcon } from "../SvgIcons/index";
-
+import { DownArrowIcon, AngleLeftIcon, AngleRightIcon } from "../SvgIcons/index";
 interface PageOption {
   value: number;
   text: string;
@@ -32,10 +31,10 @@ export const TableFooter: React.FC<TableFooterProps> = ({
     <tr>
       <td colSpan={3}>
         <div className="d-flex justify-content-between align-items-center flex-column flex-md-row">
-          <span className="ms-2">
+          <span>
             {t("Showing")} {limit * activePage - (limit - 1)} {t("to")}&nbsp;
             {Math.min(limit * activePage, totalCount)} {t("of")}&nbsp;
-            {totalCount} {t("results")}
+            {totalCount}
           </span>
         </div>
       </td>
@@ -51,6 +50,12 @@ export const TableFooter: React.FC<TableFooterProps> = ({
                 itemClass="page-item"
                 linkClass="page-link"
                 onChange={handlePageChange}
+                prevPageText={
+                  <span><AngleLeftIcon onClick={() => {}}/></span>
+                }
+                nextPageText={
+                  <span><AngleRightIcon onClick={() => {}} /></span>
+                }
               />
             </div>
           </td>
@@ -66,6 +71,7 @@ export const TableFooter: React.FC<TableFooterProps> = ({
                     data-testid="page-limit-dropdown-toggle"
                   >
                     {limit}
+                    <DownArrowIcon />
                   </Dropdown.Toggle>
                   <Dropdown.Menu>
                     {pageOptions.map((option) => (
@@ -80,7 +86,6 @@ export const TableFooter: React.FC<TableFooterProps> = ({
                     ))}
                   </Dropdown.Menu>
                 </Dropdown>
-                <DownArrowIcon />
               </div>
             </div>
           </td>

forms-flow-components/src/components/SvgIcons/index.tsx

@@ -372,21 +372,20 @@ export const IButton = ({ color = grayColor, ...props }) => (
   </svg>
 );
 
-export const DownArrowIcon = ({ color = grayColor, ...props }) => (
+export const DownArrowIcon = ({ color = baseColor, ...props }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="10"
+    width="16"
     height="10"
-    viewBox="0 0 16 16"
-    fill={color}
+    viewBox="0 0 16 10"
+    fill="none"
   >
     <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M1.64599 4.64604C1.69244 4.59948 1.74761 4.56253 1.80836 4.53733C1.86911 4.51212 1.93423 4.49915 1.99999 4.49915C2.06576 4.49915 2.13088 4.51212 2.19163 4.53733C2.25237 4.56253 2.30755 4.59948 2.35399 4.64604L7.99999 10.293L13.646 4.64604C13.6925 4.59955 13.7477 4.56267 13.8084 4.53752C13.8691 4.51236 13.9342 4.49941 14 4.49941C14.0657 4.49941 14.1308 4.51236 14.1916 4.53752C14.2523 4.56267 14.3075 4.59955 14.354 4.64604C14.4005 4.69253 14.4374 4.74772 14.4625 4.80846C14.4877 4.86919 14.5006 4.9343 14.5006 5.00004C14.5006 5.06578 14.4877 5.13088 14.4625 5.19162C14.4374 5.25236 14.4005 5.30755 14.354 5.35404L8.35399 11.354C8.30755 11.4006 8.25237 11.4375 8.19163 11.4628C8.13088 11.488 8.06576 11.5009 7.99999 11.5009C7.93423 11.5009 7.86911 11.488 7.80836 11.4628C7.74761 11.4375 7.69244 11.4006 7.64599 11.354L1.64599 5.35404C1.59943 5.30759 1.56249 5.25242 1.53728 5.19167C1.51207 5.13093 1.4991 5.06581 1.4991 5.00004C1.4991 4.93427 1.51207 4.86915 1.53728 4.80841C1.56249 4.74766 1.59943 4.69248 1.64599 4.64604Z"
-      fill="#000000"
-      stroke="#000000"
+      d="M1.49969 1.74976L8.00028 8.25034L14.5003 1.75034"
+      stroke={color}
       strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
     />
   </svg>
 );
@@ -453,6 +452,26 @@ export const AngleRightIcon = ({ color = baseColor, onClick, ...props }) => (
   </svg>
 );
 
+export const AngleLeftIcon = ({ color = baseColor, onClick, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="10"
+    height="15"
+    viewBox="0 0 10 15"
+    fill="none"
+    onClick={onClick}
+  >
+    <path
+      d="M8.2501 14.0005L1.74951 7.4999L8.24951 0.999901"
+      stroke={props.disabled ? grayColor : color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+
 export const UploadIcon = ({ color = baseColor, ...props }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -668,3 +687,20 @@ export const StarPremiumIcon = ({ color = baseColor,...props }) => (
   </svg>
 );
 
+export const SortIcon = ({ color = grayColor, ...props }) => (
+  <svg
+    width="12"
+    height="17"
+    viewBox="0 0 12 17"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M6 15.5L6 1.5M6 1.5L11 5.5M6 1.5L1 5.5"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

forms-flow-components/src/components/index.ts

@@ -20,4 +20,4 @@ export * from "./CustomComponents/ErrorModal";
 export * from "./CustomComponents/ImportModal";
 export * from "./CustomComponents/NoDataFound";
 export * from "./CustomComponents/ShowPremiumIcon";
-
+export * from "./CustomComponents/MultiSelect";

forms-flow-service/src/formsflow-services.ts

@@ -3,6 +3,7 @@ import StorageService from "./storage/storageService";
 import RequestService from "./request/requestService";
 import i18nService from "./resourceBundles/i18n";
 import HelperServices from "./helpers/helperServices";
-import StyleServices from "./helpers/styleService"
+import StyleServices from "./helpers/styleService";
+import formioResourceBundle from "./resourceBundles/formioResourceBundle";
 
-export { KeycloakService, StorageService, RequestService, i18nService, HelperServices, StyleServices };
+export { KeycloakService, StorageService, RequestService, i18nService, HelperServices, StyleServices, formioResourceBundle };

forms-flow-service/src/resourceBundles/bg/resourceBundles.ts

@@ -1276,5 +1276,35 @@ export const RESOURCE_BUNDLES_BG = {
   "No, Keep This Form": "Не, запазете тази форма",
   "Yes, Delete the Form": "Да, изтрийте формата",
   "Importing and deleting is not available when the form is published. You must unpublish the form first if you wish to make any changes.": "Импортирането и изтриването не са налични, когато формата е публикувана. Трябва първо да я оттеглите, ако искате да направите промени.",
-
+  "Search Form Name and Description": "Търсене на име и описание на формуляра",
+  "New Form": "Нова форма",
+  "Add Form": "Добави форма",
+  "Build": "Изграждане",
+  "Import": "Импортиране",
+  "Create the form from scratch": "Създайте формуляр от нулата",
+  "Upload form from a file": "Качете формуляр от файл",
+  "Live": "На живо",
+  "Draft": "Чернова",
+  "Last Edited": "Последно редактирано",
+  "ID": "ИД",
+  "New BPMN": "Нов BPMN",
+  "Create the BPMN from scratch": "Създайте BPMN от нулата",
+  "Upload BPMN from a file": "Качете BPMN от файл",
+  "Search BPMN Name": "Търсене на име на BPMN",
+  "New DMN": "Ново DMN",
+  "Search Decision Table": "Търсене на таблица за решения",
+  "Create the DMN from scratch": "Създайте DMN от нулата",
+  "Upload DMN from a file": "Качете DMN от файл",
+  "Create And Edit BPMN": "Създаване и редактиране на BPMN",
+  "Create And Edit DMN": "Създаване и редактиране на DMN",
+  "Import New Form": "Импортиране на нова форма",
+  "Confirm and Edit form": "Потвърдете и редактирайте формата",
+  "Click or drag a file to this area to import": "Щракнете или плъзнете файл в тази област, за да го импортирате",
+  "Import New": "Импортиране на ново",
+  "Search DMN Name": "Търсене на име DMN",
+  "cancel": "Отмени",
+  "previous": "Предишна",
+  "next": "Следваща", 
+  "Month": "Месец", 
+  "Year": "Година",
 }

forms-flow-service/src/resourceBundles/de/resourceBundles.ts

@@ -1281,7 +1281,35 @@ export const RESOURCE_BUNDLES_DE = {
   "No, Keep This Form": "Nein, dieses Formular behalten",
   "Yes, Delete the Form": "Ja, Formular löschen",
   "Importing and deleting is not available when the form is published. You must unpublish the form first if you wish to make any changes.": "Importieren und Löschen ist nicht verfügbar, wenn das Formular veröffentlicht ist. Sie müssen das Formular zuerst zurückziehen, wenn Sie Änderungen vornehmen möchten.",
-
-
-
+  "Search Form Name and Description": "Suchformularname und Beschreibung",
+  "New Form": "Neues Formular",
+  "Add Form": "Formular hinzufügen",
+  "Build": "bauen",
+  "Import": "Importieren",
+  "Create the form from scratch": "Erstellen Sie das Formular von Grund auf",
+  "Upload form from a file": "Formular aus einer Datei hochladen",
+  "Live": "Live",
+  "Draft": "Entwurf",
+  "Last Edited": "Zuletzt bearbeitet",
+  "ID": "ID",
+  "New BPMN": "Neues BPMN",
+  "Create the BPMN from scratch": "Erstellen Sie das BPMN von Grund auf",
+  "Import New Form": "Neues Formular importieren",
+  "Confirm and Edit form": "Formular bestätigen und bearbeiten",
+  "Click or drag a file to this area to import": "Klicken oder ziehen Sie eine Datei in diesen Bereich, um sie zu importieren",
+  "Upload BPMN from a file": "BPMN aus einer Datei hochladen",
+  "Search BPMN Name": "BPMN-Namen suchen",
+  "New DMN": "Neue DMN",
+  "Search Decision Table": "Entscheidungstabelle suchen",
+  "Create the DMN from scratch": "Erstellen Sie das DMN von Grund auf",
+  "Upload DMN from a file": "DMN aus einer Datei hochladen",
+  "Create And Edit BPMN": "Erstellen und Bearbeiten von BPMN",
+  "Create And Edit DMN": "Erstellen und Bearbeiten von DMN",
+  "Import New": "Neu importieren",
+  "Search DMN Name": "DMN-Namen suchen",
+  "cancel": "abbrechen",
+  "previous": "vorherige",
+  "next": "nächste", 
+  "Month": "Monat", 
+  "Year": "Jahr",
 }

forms-flow-service/src/resourceBundles/en/resourceBundles.ts

@@ -771,7 +771,8 @@ export const RESOURCE_BUNDLES_EN ={
   "No, Keep This Form": "No, Keep This Form",
   "Yes, Delete the Form": "Yes, Delete the Form",
   "Importing and deleting is not available when the form is published. You must unpublish the form first if you wish to make any changes.": "Importing and deleting is not available when the form is published. You must unpublish the form first if you wish to make any changes.",
-
-
-
+  "Date / Time": "Date / Time",
+  "Month": "Month",
+  "Day": "Day",
+  "Year": "Year",
 }