status-im
/
spiff-arena
mirror of https://github.com/status-im/spiff-arena.git
2
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 1ac7191588
commit 32716b2980
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 { 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 (
<ErrorContext.Provider value={errorContextValueArray}>
<NavigationBar />
<Container>
<div>
{errorTag}
<ErrorBoundary>
<BrowserRouter>
@ -70,7 +71,7 @@ export default function App() {
</main>
</BrowserRouter>
</ErrorBoundary>
</Container>
</div>
</ErrorContext.Provider>
);
}

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

@ -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;

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

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

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

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

@ -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';

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

@ -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';

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

@ -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';

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

@ -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';

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

@ -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';

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

@ -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';

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

@ -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';

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

@ -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';

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

@ -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';

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

@ -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';

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

@ -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';

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

@ -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';

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

@ -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';

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

@ -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';

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

@ -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';

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

@ -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';

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

@ -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';

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

@ -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';