sartography
/
spiff-arena
mirror of https://github.com/sartography/spiff-arena.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

many things have been switched to carbon and the home page loads w/ burnettk

This commit is contained in:
jasquat 2022-10-31 15:09:21 -04:00
parent 80744018ec
commit c90992b03c
22 changed files with 185 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
spiffworkflow-frontend/src/App.tsx
View File

@ -1,5 +1,6 @@
import { useMemo, useState } from 'react'; 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 { BrowserRouter, Routes, Route } from 'react-router-dom';
import ErrorContext from './contexts/ErrorContext'; import ErrorContext from './contexts/ErrorContext';
@ -48,7 +49,7 @@ export default function App() {
return ( return (
<ErrorContext.Provider value={errorContextValueArray}> <ErrorContext.Provider value={errorContextValueArray}>
<NavigationBar /> <NavigationBar />
<Container> <div>
{errorTag} {errorTag}
<ErrorBoundary> <ErrorBoundary>
<BrowserRouter> <BrowserRouter>
@ -70,7 +71,7 @@ export default function App() {
</main> </main>
</BrowserRouter> </BrowserRouter>
</ErrorBoundary> </ErrorBoundary>
</Container> </div>
</ErrorContext.Provider> </ErrorContext.Provider>
); );
} }

3
spiffworkflow-frontend/src/components/ButtonWithConfirmation.tsx
View File

@ -1,5 +1,6 @@
import { useState } from 'react'; import { useState } from 'react';
import { Button, Modal } from 'react-bootstrap'; // @ts-ignore
import { Button, Modal } from '@carbon/react';
type OwnProps = { type OwnProps = {
description?: string; description?: string;

4
spiffworkflow-frontend/src/components/NavigationBar.tsx
View File

@ -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 // @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 logo from '../logo.svg';
import UserService from '../services/UserService'; import UserService from '../services/UserService';

274
spiffworkflow-frontend/src/components/PaginationForTable.tsx
View File

@ -1,7 +1,8 @@
import React from 'react'; import React from 'react';
import { Link } from 'react-router-dom'; 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_PER_PAGE = 50;
export const DEFAULT_PAGE = 1; export const DEFAULT_PAGE = 1;
@ -29,139 +30,140 @@ export default function PaginationForTable({
}: OwnProps) { }: OwnProps) {
const PER_PAGE_OPTIONS = [2, 10, 50, 100]; const PER_PAGE_OPTIONS = [2, 10, 50, 100];
const buildPerPageDropdown = () => { // const buildPerPageDropdown = () => {
const perPageDropdownRows = (perPageOptions || PER_PAGE_OPTIONS).map( // const perPageDropdownRows = (perPageOptions || PER_PAGE_OPTIONS).map(
(perPageOption) => { // (perPageOption) => {
if (perPageOption === perPage) { // if (perPageOption === perPage) {
return ( // return (
<Dropdown.Item // <Dropdown.Item
key={perPageOption} // key={perPageOption}
href={`${path}?page=1&per_page=${perPageOption}`} // href={`${path}?page=1&per_page=${perPageOption}`}
active // active
> // >
{perPageOption} // {perPageOption}
</Dropdown.Item> // </Dropdown.Item>
); // );
} // }
return ( // return (
<Dropdown.Item // <Dropdown.Item
key={perPageOption} // key={perPageOption}
href={`${path}?page=1&per_page=${perPageOption}`} // href={`${path}?page=1&per_page=${perPageOption}`}
> // >
{perPageOption} // {perPageOption}
</Dropdown.Item> // </Dropdown.Item>
); // );
} // }
); // );
return ( // return (
<Stack direction="horizontal" gap={3}> // <Stack direction="horizontal" gap={3}>
<Dropdown className="ms-auto" id="pagination-page-dropdown"> // <Dropdown className="ms-auto" id="pagination-page-dropdown">
<Dropdown.Toggle // <Dropdown.Toggle
id="process-instances-per-page" // id="process-instances-per-page"
variant="light border" // variant="light border"
> // >
Number to show: {perPage} // Number to show: {perPage}
</Dropdown.Toggle> // </Dropdown.Toggle>
//
<Dropdown.Menu variant="light">{perPageDropdownRows}</Dropdown.Menu> // <Dropdown.Menu variant="light">{perPageDropdownRows}</Dropdown.Menu>
</Dropdown> // </Dropdown>
</Stack> // </Stack>
); // );
}; // };
//
const buildPaginationNav = () => { // const buildPaginationNav = () => {
let previousPageTag = null; // let previousPageTag = null;
if (page === 1) { // if (page === 1) {
previousPageTag = ( // previousPageTag = (
<li // <li
data-qa="pagination-previous-button-inactive" // data-qa="pagination-previous-button-inactive"
className="page-item disabled" // className="page-item disabled"
key="previous" // key="previous"
> // >
<span style={{ fontSize: '1.5em' }} className="page-link"> // <span style={{ fontSize: '1.5em' }} className="page-link">
&laquo; // &laquo;
</span> // </span>
</li> // </li>
); // );
} else { // } else {
previousPageTag = ( // previousPageTag = (
<li className="page-item" key="previous"> // <li className="page-item" key="previous">
<Link // <Link
data-qa="pagination-previous-button" // data-qa="pagination-previous-button"
className="page-link" // className="page-link"
style={{ fontSize: '1.5em' }} // style={{ fontSize: '1.5em' }}
to={`${path}?page=${ // to={`${path}?page=${
page - 1 // page - 1
}&per_page=${perPage}${queryParamString}`} // }&per_page=${perPage}${queryParamString}`}
> // >
&laquo; // &laquo;
</Link> // </Link>
</li> // </li>
); // );
} // }
//
let nextPageTag = null; // let nextPageTag = null;
if (page >= pagination.pages) { // if (page >= pagination.pages) {
nextPageTag = ( // nextPageTag = (
<li // <li
data-qa="pagination-next-button-inactive" // data-qa="pagination-next-button-inactive"
className="page-item disabled" // className="page-item disabled"
key="next" // key="next"
> // >
<span style={{ fontSize: '1.5em' }} className="page-link"> // <span style={{ fontSize: '1.5em' }} className="page-link">
&raquo; // &raquo;
</span> // </span>
</li> // </li>
); // );
} else { // } else {
nextPageTag = ( // nextPageTag = (
<li className="page-item" key="next"> // <li className="page-item" key="next">
<Link // <Link
data-qa="pagination-next-button" // data-qa="pagination-next-button"
className="page-link" // className="page-link"
style={{ fontSize: '1.5em' }} // style={{ fontSize: '1.5em' }}
to={`${path}?page=${ // to={`${path}?page=${
page + 1 // page + 1
}&per_page=${perPage}${queryParamString}`} // }&per_page=${perPage}${queryParamString}`}
> // >
&raquo; // &raquo;
</Link> // </Link>
</li> // </li>
); // );
} // }
//
let startingNumber = (page - 1) * perPage + 1; // let startingNumber = (page - 1) * perPage + 1;
let endingNumber = page * perPage; // let endingNumber = page * perPage;
if (endingNumber > pagination.total) { // if (endingNumber > pagination.total) {
endingNumber = pagination.total; // endingNumber = pagination.total;
} // }
if (startingNumber > pagination.total) { // if (startingNumber > pagination.total) {
startingNumber = pagination.total; // startingNumber = pagination.total;
} // }
//
return ( // return (
<Stack direction="horizontal" gap={3}> // <Stack direction="horizontal" gap={3}>
<p className="ms-auto"> // <p className="ms-auto">
{startingNumber}-{endingNumber} of{' '} // {startingNumber}-{endingNumber} of{' '}
<span data-qa="total-paginated-items">{pagination.total}</span> // <span data-qa="total-paginated-items">{pagination.total}</span>
</p> // </p>
<nav aria-label="Page navigation"> // <nav aria-label="Page navigation">
<div> // <div>
<ul className="pagination"> // <ul className="pagination">
{previousPageTag} // {previousPageTag}
{nextPageTag} // {nextPageTag}
</ul> // </ul>
</div> // </div>
</nav> // </nav>
</Stack> // </Stack>
); // );
}; // };
//
return ( // return (
<main> // <main>
{buildPaginationNav()} // {buildPaginationNav()}
{tableToDisplay} // {tableToDisplay}
{buildPerPageDropdown()} // {buildPerPageDropdown()}
</main> // </main>
); // );
return null;
} }

3
spiffworkflow-frontend/src/routes/AuthenticationList.tsx
View File

@ -1,5 +1,6 @@
import { useContext, useEffect, useState } from 'react'; import { useContext, useEffect, useState } from 'react';
import { Table } from 'react-bootstrap'; // @ts-ignore
import { Table } from '@carbon/react';
import ErrorContext from '../contexts/ErrorContext'; import ErrorContext from '../contexts/ErrorContext';
import { AuthenticationItem } from '../interfaces'; import { AuthenticationItem } from '../interfaces';
import HttpService from '../services/HttpService'; import HttpService from '../services/HttpService';

3
spiffworkflow-frontend/src/routes/MessageInstanceList.tsx
View File

@ -1,5 +1,6 @@
import { useEffect, useState } from 'react'; 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 { Link, useParams, useSearchParams } from 'react-router-dom';
import PaginationForTable from '../components/PaginationForTable'; import PaginationForTable from '../components/PaginationForTable';
import ProcessBreadcrumb from '../components/ProcessBreadcrumb'; import ProcessBreadcrumb from '../components/ProcessBreadcrumb';

3
spiffworkflow-frontend/src/routes/ProcessGroupEdit.tsx
View File

@ -1,6 +1,7 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom'; 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 ProcessBreadcrumb from '../components/ProcessBreadcrumb';
import HttpService from '../services/HttpService'; import HttpService from '../services/HttpService';
import ButtonWithConfirmation from '../components/ButtonWithConfirmation'; import ButtonWithConfirmation from '../components/ButtonWithConfirmation';

4
spiffworkflow-frontend/src/routes/ProcessGroupList.tsx
View File

@ -1,6 +1,8 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { Link, useNavigate, useSearchParams } from 'react-router-dom'; 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 { Typeahead } from 'react-bootstrap-typeahead';
import { Option } from 'react-bootstrap-typeahead/types/types'; import { Option } from 'react-bootstrap-typeahead/types/types';
import ProcessBreadcrumb from '../components/ProcessBreadcrumb'; import ProcessBreadcrumb from '../components/ProcessBreadcrumb';

3
spiffworkflow-frontend/src/routes/ProcessGroupShow.tsx
View File

@ -1,6 +1,7 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { Link, useSearchParams, useParams } from 'react-router-dom'; 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 ProcessBreadcrumb from '../components/ProcessBreadcrumb';
import PaginationForTable from '../components/PaginationForTable'; import PaginationForTable from '../components/PaginationForTable';
import HttpService from '../services/HttpService'; import HttpService from '../services/HttpService';

4
spiffworkflow-frontend/src/routes/ProcessInstanceList.tsx
View File

@ -6,7 +6,9 @@ import {
useSearchParams, useSearchParams,
} from 'react-router-dom'; } 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 // @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 DatePicker from 'react-datepicker';
import { Typeahead } from 'react-bootstrap-typeahead'; import { Typeahead } from 'react-bootstrap-typeahead';

3
spiffworkflow-frontend/src/routes/ProcessInstanceLogList.tsx
View File

@ -1,5 +1,6 @@
import { useEffect, useState } from 'react'; 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 { useParams, useSearchParams } from 'react-router-dom';
import PaginationForTable from '../components/PaginationForTable'; import PaginationForTable from '../components/PaginationForTable';
import ProcessBreadcrumb from '../components/ProcessBreadcrumb'; import ProcessBreadcrumb from '../components/ProcessBreadcrumb';

3
spiffworkflow-frontend/src/routes/ProcessInstanceReportList.tsx
View File

@ -1,5 +1,6 @@
import { useEffect, useState } from 'react'; 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 { useParams, Link } from 'react-router-dom';
import ProcessBreadcrumb from '../components/ProcessBreadcrumb'; import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
import HttpService from '../services/HttpService'; import HttpService from '../services/HttpService';

3
spiffworkflow-frontend/src/routes/ProcessInstanceReportShow.tsx
View File

@ -1,7 +1,8 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { useParams, useSearchParams } from 'react-router-dom'; 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 ProcessBreadcrumb from '../components/ProcessBreadcrumb';
import PaginationForTable from '../components/PaginationForTable'; import PaginationForTable from '../components/PaginationForTable';

3
spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx
View File

@ -1,7 +1,8 @@
import { useContext, useEffect, useState } from 'react'; import { useContext, useEffect, useState } from 'react';
import Editor from '@monaco-editor/react'; import Editor from '@monaco-editor/react';
import { useParams, useNavigate, Link } from 'react-router-dom'; 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 ProcessBreadcrumb from '../components/ProcessBreadcrumb';
import HttpService from '../services/HttpService'; import HttpService from '../services/HttpService';
import ReactDiagramEditor from '../components/ReactDiagramEditor'; import ReactDiagramEditor from '../components/ReactDiagramEditor';

3
spiffworkflow-frontend/src/routes/ProcessModelEdit.tsx
View File

@ -1,6 +1,7 @@
import { useState, useEffect, useContext } from 'react'; import { useState, useEffect, useContext } from 'react';
import { useParams, useNavigate } from 'react-router-dom'; 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 ProcessBreadcrumb from '../components/ProcessBreadcrumb';
import HttpService from '../services/HttpService'; import HttpService from '../services/HttpService';
import ButtonWithConfirmation from '../components/ButtonWithConfirmation'; import ButtonWithConfirmation from '../components/ButtonWithConfirmation';

3
spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx
View File

@ -1,6 +1,7 @@
import { useContext, useEffect, useRef, useState } from 'react'; import { useContext, useEffect, useRef, useState } from 'react';
import { useNavigate, useParams, useSearchParams } from 'react-router-dom'; 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 Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row'; import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col'; import Col from 'react-bootstrap/Col';

3
spiffworkflow-frontend/src/routes/ProcessModelShow.tsx
View File

@ -1,6 +1,7 @@
import { useContext, useEffect, useState } from 'react'; import { useContext, useEffect, useState } from 'react';
import { Link, useParams } from 'react-router-dom'; 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 ProcessBreadcrumb from '../components/ProcessBreadcrumb';
import FileInput from '../components/FileInput'; import FileInput from '../components/FileInput';
import HttpService from '../services/HttpService'; import HttpService from '../services/HttpService';

3
spiffworkflow-frontend/src/routes/ReactFormEditor.tsx
View File

@ -1,7 +1,8 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import Editor from '@monaco-editor/react'; import Editor from '@monaco-editor/react';
import { useNavigate, useParams, useSearchParams } from 'react-router-dom'; 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 ProcessBreadcrumb from '../components/ProcessBreadcrumb';
import HttpService from '../services/HttpService'; import HttpService from '../services/HttpService';
import ButtonWithConfirmation from '../components/ButtonWithConfirmation'; import ButtonWithConfirmation from '../components/ButtonWithConfirmation';

3
spiffworkflow-frontend/src/routes/SecretList.tsx
View File

@ -1,6 +1,7 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { Link, useSearchParams } from 'react-router-dom'; 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 { MdDelete } from 'react-icons/md';
import PaginationForTable from '../components/PaginationForTable'; import PaginationForTable from '../components/PaginationForTable';
import HttpService from '../services/HttpService'; import HttpService from '../services/HttpService';

3
spiffworkflow-frontend/src/routes/SecretNew.tsx
View File

@ -1,6 +1,7 @@
import { useState } from 'react'; import { useState } from 'react';
import { useNavigate } from 'react-router-dom'; 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 Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form'; import Form from 'react-bootstrap/Form';
import HttpService from '../services/HttpService'; import HttpService from '../services/HttpService';

3
spiffworkflow-frontend/src/routes/SecretShow.tsx
View File

@ -1,6 +1,7 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom'; 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 HttpService from '../services/HttpService';
import { Secret } from '../interfaces'; import { Secret } from '../interfaces';
import ButtonWithConfirmation from '../components/ButtonWithConfirmation'; import ButtonWithConfirmation from '../components/ButtonWithConfirmation';

3
spiffworkflow-frontend/src/routes/TaskShow.tsx
View File

@ -1,7 +1,8 @@
import { useContext, useEffect, useState } from 'react'; import { useContext, useEffect, useState } from 'react';
import { Link, useNavigate, useParams } from 'react-router-dom'; import { Link, useNavigate, useParams } from 'react-router-dom';
import Form from '@rjsf/core'; 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 ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm'; import remarkGfm from 'remark-gfm';