diff --git a/spiffworkflow-frontend/src/App.tsx b/spiffworkflow-frontend/src/App.tsx index 0444f0422..0684465e1 100644 --- a/spiffworkflow-frontend/src/App.tsx +++ b/spiffworkflow-frontend/src/App.tsx @@ -1,5 +1,6 @@ import { useMemo, useState } from 'react'; -import { Container } from 'react-bootstrap'; +// @ts-ignore +// import { Container } from '@carbon/react'; import { BrowserRouter, Routes, Route } from 'react-router-dom'; import ErrorContext from './contexts/ErrorContext'; @@ -48,7 +49,7 @@ export default function App() { return ( - +
{errorTag} @@ -70,7 +71,7 @@ export default function App() { - +
); } diff --git a/spiffworkflow-frontend/src/components/ButtonWithConfirmation.tsx b/spiffworkflow-frontend/src/components/ButtonWithConfirmation.tsx index 6956dadc3..663bae1e2 100644 --- a/spiffworkflow-frontend/src/components/ButtonWithConfirmation.tsx +++ b/spiffworkflow-frontend/src/components/ButtonWithConfirmation.tsx @@ -1,5 +1,6 @@ import { useState } from 'react'; -import { Button, Modal } from 'react-bootstrap'; +// @ts-ignore +import { Button, Modal } from '@carbon/react'; type OwnProps = { description?: string; diff --git a/spiffworkflow-frontend/src/components/NavigationBar.tsx b/spiffworkflow-frontend/src/components/NavigationBar.tsx index 9b070a559..2f70ff0c8 100644 --- a/spiffworkflow-frontend/src/components/NavigationBar.tsx +++ b/spiffworkflow-frontend/src/components/NavigationBar.tsx @@ -1,4 +1,6 @@ -import { Button, Navbar, Nav, Container } from 'react-bootstrap'; +// @ts-ignore +import { Button } from '@carbon/react'; +import { Navbar, Nav, Container } from 'react-bootstrap'; // @ts-expect-error TS(2307) FIXME: Cannot find module '../logo.svg' or its correspond... Remove this comment to see the full error message import logo from '../logo.svg'; import UserService from '../services/UserService'; diff --git a/spiffworkflow-frontend/src/components/PaginationForTable.tsx b/spiffworkflow-frontend/src/components/PaginationForTable.tsx index 2f648f521..c1cde1ab8 100644 --- a/spiffworkflow-frontend/src/components/PaginationForTable.tsx +++ b/spiffworkflow-frontend/src/components/PaginationForTable.tsx @@ -1,7 +1,8 @@ import React from 'react'; import { Link } from 'react-router-dom'; -import { Dropdown, Stack } from 'react-bootstrap'; +// @ts-ignore +import { Dropdown, Stack } from '@carbon/react'; export const DEFAULT_PER_PAGE = 50; export const DEFAULT_PAGE = 1; @@ -29,139 +30,140 @@ export default function PaginationForTable({ }: OwnProps) { const PER_PAGE_OPTIONS = [2, 10, 50, 100]; - const buildPerPageDropdown = () => { - const perPageDropdownRows = (perPageOptions || PER_PAGE_OPTIONS).map( - (perPageOption) => { - if (perPageOption === perPage) { - return ( - - {perPageOption} - - ); - } - return ( - - {perPageOption} - - ); - } - ); - return ( - - - - Number to show: {perPage} - - - {perPageDropdownRows} - - - ); - }; - - const buildPaginationNav = () => { - let previousPageTag = null; - if (page === 1) { - previousPageTag = ( -
  • - - « - -
    • - ); - } else { - previousPageTag = ( -
  • - - « - -
    • - ); - } - - let nextPageTag = null; - if (page >= pagination.pages) { - nextPageTag = ( -
  • - - » - -
    • - ); - } else { - nextPageTag = ( -
  • - - » - -
    • - ); - } - - let startingNumber = (page - 1) * perPage + 1; - let endingNumber = page * perPage; - if (endingNumber > pagination.total) { - endingNumber = pagination.total; - } - if (startingNumber > pagination.total) { - startingNumber = pagination.total; - } - - return ( - -

    - {startingNumber}-{endingNumber} of{' '} - {pagination.total} -

    - -     - ); - }; - - return ( -
    - {buildPaginationNav()} - {tableToDisplay} - {buildPerPageDropdown()} -
    - ); + // const buildPerPageDropdown = () => { + // const perPageDropdownRows = (perPageOptions || PER_PAGE_OPTIONS).map( + // (perPageOption) => { + // if (perPageOption === perPage) { + // return ( + // + // {perPageOption} + // + // ); + // } + // return ( + // + // {perPageOption} + // + // ); + // } + // ); + // return ( + // + // + // + // Number to show: {perPage} + // + // + // {perPageDropdownRows} + // + // + // ); + // }; + // + // const buildPaginationNav = () => { + // let previousPageTag = null; + // if (page === 1) { + // previousPageTag = ( + //
  • + // + // « + // + //
    • + // ); + // } else { + // previousPageTag = ( + //
  • + // + // « + // + //
    • + // ); + // } + // + // let nextPageTag = null; + // if (page >= pagination.pages) { + // nextPageTag = ( + //
  • + // + // » + // + //
    • + // ); + // } else { + // nextPageTag = ( + //
  • + // + // » + // + //
    • + // ); + // } + // + // let startingNumber = (page - 1) * perPage + 1; + // let endingNumber = page * perPage; + // if (endingNumber > pagination.total) { + // endingNumber = pagination.total; + // } + // if (startingNumber > pagination.total) { + // startingNumber = pagination.total; + // } + // + // return ( + // + //

    + // {startingNumber}-{endingNumber} of{' '} + // {pagination.total} + //

    + // + //     + // ); + // }; + // + // return ( + //
    + // {buildPaginationNav()} + // {tableToDisplay} + // {buildPerPageDropdown()} + //
    + // ); + return null; } diff --git a/spiffworkflow-frontend/src/routes/AuthenticationList.tsx b/spiffworkflow-frontend/src/routes/AuthenticationList.tsx index 6be0f0544..a249aa270 100644 --- a/spiffworkflow-frontend/src/routes/AuthenticationList.tsx +++ b/spiffworkflow-frontend/src/routes/AuthenticationList.tsx @@ -1,5 +1,6 @@ import { useContext, useEffect, useState } from 'react'; -import { Table } from 'react-bootstrap'; +// @ts-ignore +import { Table } from '@carbon/react'; import ErrorContext from '../contexts/ErrorContext'; import { AuthenticationItem } from '../interfaces'; import HttpService from '../services/HttpService'; diff --git a/spiffworkflow-frontend/src/routes/MessageInstanceList.tsx b/spiffworkflow-frontend/src/routes/MessageInstanceList.tsx index 90c74c295..6bc0a57d4 100644 --- a/spiffworkflow-frontend/src/routes/MessageInstanceList.tsx +++ b/spiffworkflow-frontend/src/routes/MessageInstanceList.tsx @@ -1,5 +1,6 @@ import { useEffect, useState } from 'react'; -import { Table } from 'react-bootstrap'; +// @ts-ignore +import { Table } from '@carbon/react'; import { Link, useParams, useSearchParams } from 'react-router-dom'; import PaginationForTable from '../components/PaginationForTable'; import ProcessBreadcrumb from '../components/ProcessBreadcrumb'; diff --git a/spiffworkflow-frontend/src/routes/ProcessGroupEdit.tsx b/spiffworkflow-frontend/src/routes/ProcessGroupEdit.tsx index 833799991..05f75fb1f 100644 --- a/spiffworkflow-frontend/src/routes/ProcessGroupEdit.tsx +++ b/spiffworkflow-frontend/src/routes/ProcessGroupEdit.tsx @@ -1,6 +1,7 @@ import { useState, useEffect } from 'react'; import { useParams, useNavigate } from 'react-router-dom'; -import { Button, Stack } from 'react-bootstrap'; +// @ts-ignore +import { Button, Stack } from '@carbon/react'; import ProcessBreadcrumb from '../components/ProcessBreadcrumb'; import HttpService from '../services/HttpService'; import ButtonWithConfirmation from '../components/ButtonWithConfirmation'; diff --git a/spiffworkflow-frontend/src/routes/ProcessGroupList.tsx b/spiffworkflow-frontend/src/routes/ProcessGroupList.tsx index 3c1be15c2..29dc38822 100644 --- a/spiffworkflow-frontend/src/routes/ProcessGroupList.tsx +++ b/spiffworkflow-frontend/src/routes/ProcessGroupList.tsx @@ -1,6 +1,8 @@ import { useEffect, useState } from 'react'; import { Link, useNavigate, useSearchParams } from 'react-router-dom'; -import { Button, Form, InputGroup, Table } from 'react-bootstrap'; +// @ts-ignore +import { Button, Form, Table } from '@carbon/react'; +import { InputGroup } from 'react-bootstrap'; import { Typeahead } from 'react-bootstrap-typeahead'; import { Option } from 'react-bootstrap-typeahead/types/types'; import ProcessBreadcrumb from '../components/ProcessBreadcrumb'; diff --git a/spiffworkflow-frontend/src/routes/ProcessGroupShow.tsx b/spiffworkflow-frontend/src/routes/ProcessGroupShow.tsx index 522058c3d..02625a8fc 100644 --- a/spiffworkflow-frontend/src/routes/ProcessGroupShow.tsx +++ b/spiffworkflow-frontend/src/routes/ProcessGroupShow.tsx @@ -1,6 +1,7 @@ import { useEffect, useState } from 'react'; import { Link, useSearchParams, useParams } from 'react-router-dom'; -import { Button, Table, Stack } from 'react-bootstrap'; +// @ts-ignore +import { Button, Table, Stack } from '@carbon/react'; import ProcessBreadcrumb from '../components/ProcessBreadcrumb'; import PaginationForTable from '../components/PaginationForTable'; import HttpService from '../services/HttpService'; diff --git a/spiffworkflow-frontend/src/routes/ProcessInstanceList.tsx b/spiffworkflow-frontend/src/routes/ProcessInstanceList.tsx index a2e2aca2c..32bf92ba6 100644 --- a/spiffworkflow-frontend/src/routes/ProcessInstanceList.tsx +++ b/spiffworkflow-frontend/src/routes/ProcessInstanceList.tsx @@ -6,7 +6,9 @@ import { useSearchParams, } from 'react-router-dom'; -import { Button, Table, Stack, Form, InputGroup } from 'react-bootstrap'; +// @ts-ignore +import { Button, Table, Stack, Form } from '@carbon/react'; +import { InputGroup } from 'react-bootstrap'; // @ts-expect-error TS(7016) FIXME: Could not find a declaration file for module 'reac... Remove this comment to see the full error message import DatePicker from 'react-datepicker'; import { Typeahead } from 'react-bootstrap-typeahead'; diff --git a/spiffworkflow-frontend/src/routes/ProcessInstanceLogList.tsx b/spiffworkflow-frontend/src/routes/ProcessInstanceLogList.tsx index f2d297f02..43a3ef1d7 100644 --- a/spiffworkflow-frontend/src/routes/ProcessInstanceLogList.tsx +++ b/spiffworkflow-frontend/src/routes/ProcessInstanceLogList.tsx @@ -1,5 +1,6 @@ import { useEffect, useState } from 'react'; -import { Table } from 'react-bootstrap'; +// @ts-ignore +import { Table } from '@carbon/react'; import { useParams, useSearchParams } from 'react-router-dom'; import PaginationForTable from '../components/PaginationForTable'; import ProcessBreadcrumb from '../components/ProcessBreadcrumb'; diff --git a/spiffworkflow-frontend/src/routes/ProcessInstanceReportList.tsx b/spiffworkflow-frontend/src/routes/ProcessInstanceReportList.tsx index 2d1298375..4422b174e 100644 --- a/spiffworkflow-frontend/src/routes/ProcessInstanceReportList.tsx +++ b/spiffworkflow-frontend/src/routes/ProcessInstanceReportList.tsx @@ -1,5 +1,6 @@ import { useEffect, useState } from 'react'; -import { Button, Table } from 'react-bootstrap'; +// @ts-ignore +import { Button, Table } from '@carbon/react'; import { useParams, Link } from 'react-router-dom'; import ProcessBreadcrumb from '../components/ProcessBreadcrumb'; import HttpService from '../services/HttpService'; diff --git a/spiffworkflow-frontend/src/routes/ProcessInstanceReportShow.tsx b/spiffworkflow-frontend/src/routes/ProcessInstanceReportShow.tsx index a006d4b9b..1d26e57fb 100644 --- a/spiffworkflow-frontend/src/routes/ProcessInstanceReportShow.tsx +++ b/spiffworkflow-frontend/src/routes/ProcessInstanceReportShow.tsx @@ -1,7 +1,8 @@ import { useEffect, useState } from 'react'; import { useParams, useSearchParams } from 'react-router-dom'; -import { Button, Table } from 'react-bootstrap'; +// @ts-ignore +import { Button, Table } from '@carbon/react'; import ProcessBreadcrumb from '../components/ProcessBreadcrumb'; import PaginationForTable from '../components/PaginationForTable'; diff --git a/spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx b/spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx index f5336df8f..0d97e6085 100644 --- a/spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx +++ b/spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx @@ -1,7 +1,8 @@ import { useContext, useEffect, useState } from 'react'; import Editor from '@monaco-editor/react'; import { useParams, useNavigate, Link } from 'react-router-dom'; -import { Button, Modal, Stack } from 'react-bootstrap'; +// @ts-ignore +import { Button, Modal, Stack } from '@carbon/react'; import ProcessBreadcrumb from '../components/ProcessBreadcrumb'; import HttpService from '../services/HttpService'; import ReactDiagramEditor from '../components/ReactDiagramEditor'; diff --git a/spiffworkflow-frontend/src/routes/ProcessModelEdit.tsx b/spiffworkflow-frontend/src/routes/ProcessModelEdit.tsx index 4567d14af..45648b1fb 100644 --- a/spiffworkflow-frontend/src/routes/ProcessModelEdit.tsx +++ b/spiffworkflow-frontend/src/routes/ProcessModelEdit.tsx @@ -1,6 +1,7 @@ import { useState, useEffect, useContext } from 'react'; import { useParams, useNavigate } from 'react-router-dom'; -import { Button, Stack } from 'react-bootstrap'; +// @ts-ignore +import { Button, Stack } from '@carbon/react'; import ProcessBreadcrumb from '../components/ProcessBreadcrumb'; import HttpService from '../services/HttpService'; import ButtonWithConfirmation from '../components/ButtonWithConfirmation'; diff --git a/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx b/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx index 2382fce72..aa1eafc69 100644 --- a/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx +++ b/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx @@ -1,6 +1,7 @@ import { useContext, useEffect, useRef, useState } from 'react'; import { useNavigate, useParams, useSearchParams } from 'react-router-dom'; -import { Button, Modal, Stack } from 'react-bootstrap'; +// @ts-ignore +import { Button, Modal, Stack } from '@carbon/react'; import Container from 'react-bootstrap/Container'; import Row from 'react-bootstrap/Row'; import Col from 'react-bootstrap/Col'; diff --git a/spiffworkflow-frontend/src/routes/ProcessModelShow.tsx b/spiffworkflow-frontend/src/routes/ProcessModelShow.tsx index 63217d2d5..b12aee955 100644 --- a/spiffworkflow-frontend/src/routes/ProcessModelShow.tsx +++ b/spiffworkflow-frontend/src/routes/ProcessModelShow.tsx @@ -1,6 +1,7 @@ import { useContext, useEffect, useState } from 'react'; import { Link, useParams } from 'react-router-dom'; -import { Button, Stack } from 'react-bootstrap'; +// @ts-ignore +import { Button, Stack } from '@carbon/react'; import ProcessBreadcrumb from '../components/ProcessBreadcrumb'; import FileInput from '../components/FileInput'; import HttpService from '../services/HttpService'; diff --git a/spiffworkflow-frontend/src/routes/ReactFormEditor.tsx b/spiffworkflow-frontend/src/routes/ReactFormEditor.tsx index 40dd2d89c..2b92ea197 100644 --- a/spiffworkflow-frontend/src/routes/ReactFormEditor.tsx +++ b/spiffworkflow-frontend/src/routes/ReactFormEditor.tsx @@ -1,7 +1,8 @@ import { useEffect, useState } from 'react'; import Editor from '@monaco-editor/react'; import { useNavigate, useParams, useSearchParams } from 'react-router-dom'; -import { Button, Modal } from 'react-bootstrap'; +// @ts-ignore +import { Button, Modal } from '@carbon/react'; import ProcessBreadcrumb from '../components/ProcessBreadcrumb'; import HttpService from '../services/HttpService'; import ButtonWithConfirmation from '../components/ButtonWithConfirmation'; diff --git a/spiffworkflow-frontend/src/routes/SecretList.tsx b/spiffworkflow-frontend/src/routes/SecretList.tsx index 2b9e756ad..7d165c014 100644 --- a/spiffworkflow-frontend/src/routes/SecretList.tsx +++ b/spiffworkflow-frontend/src/routes/SecretList.tsx @@ -1,6 +1,7 @@ import { useEffect, useState } from 'react'; import { Link, useSearchParams } from 'react-router-dom'; -import { Button, Table } from 'react-bootstrap'; +// @ts-ignore +import { Button, Table } from '@carbon/react'; import { MdDelete } from 'react-icons/md'; import PaginationForTable from '../components/PaginationForTable'; import HttpService from '../services/HttpService'; diff --git a/spiffworkflow-frontend/src/routes/SecretNew.tsx b/spiffworkflow-frontend/src/routes/SecretNew.tsx index 7a697a98a..e1f34e894 100644 --- a/spiffworkflow-frontend/src/routes/SecretNew.tsx +++ b/spiffworkflow-frontend/src/routes/SecretNew.tsx @@ -1,6 +1,7 @@ import { useState } from 'react'; import { useNavigate } from 'react-router-dom'; -import { Stack } from 'react-bootstrap'; +// @ts-ignore +import { Stack } from '@carbon/react'; import Button from 'react-bootstrap/Button'; import Form from 'react-bootstrap/Form'; import HttpService from '../services/HttpService'; diff --git a/spiffworkflow-frontend/src/routes/SecretShow.tsx b/spiffworkflow-frontend/src/routes/SecretShow.tsx index 707f0d143..2ee75e198 100644 --- a/spiffworkflow-frontend/src/routes/SecretShow.tsx +++ b/spiffworkflow-frontend/src/routes/SecretShow.tsx @@ -1,6 +1,7 @@ import { useEffect, useState } from 'react'; import { useParams, useNavigate } from 'react-router-dom'; -import { Stack, Table, Button } from 'react-bootstrap'; +// @ts-ignore +import { Stack, Table, Button } from '@carbon/react'; import HttpService from '../services/HttpService'; import { Secret } from '../interfaces'; import ButtonWithConfirmation from '../components/ButtonWithConfirmation'; diff --git a/spiffworkflow-frontend/src/routes/TaskShow.tsx b/spiffworkflow-frontend/src/routes/TaskShow.tsx index 28fc8582a..97bb5d3c4 100644 --- a/spiffworkflow-frontend/src/routes/TaskShow.tsx +++ b/spiffworkflow-frontend/src/routes/TaskShow.tsx @@ -1,7 +1,8 @@ import { useContext, useEffect, useState } from 'react'; import { Link, useNavigate, useParams } from 'react-router-dom'; import Form from '@rjsf/core'; -import { Button, Stack } from 'react-bootstrap'; +// @ts-ignore +import { Button, Stack } from '@carbon/react'; import ReactMarkdown from 'react-markdown'; import remarkGfm from 'remark-gfm';