{
- setDeleteUUID(changeGroup.uuid);
- setDeleteFromStaging(true);
- }}
- >
-
+
setUuidToBeDeleted(changeGroup.uuid)}>
+
{
- setDeleteUUID(changeGroup.uuid);
- setDeleteFromStaging(true);
- }}
+ onDeleteChangeGroup={() =>
+ setUuidToBeDeleted(changeGroup.uuid)
+ }
/>
)}
@@ -432,7 +451,7 @@ const StagingDataGroups = withTheme(
}
/>
)}
- {deleteFromStaging && (
+ {uuidToBeDeleted && (
setDeleteFromStaging(false)}
- onOk={onDeleteStaging(deleteUUID)}
+ onClose={() => setUuidToBeDeleted(null)}
+ onOk={onDeleteStaging(uuidToBeDeleted)}
+ />
+ )}
+ {changeGroupToBeEdited && (
+ setChangeGroupToBeEdited(null)}
+ modalSizeAndPosition={modalSizeAndPosition}
/>
)}
diff --git a/src/components/blocks/StagingDataTable.js b/src/components/blocks/StagingDataTable.js
deleted file mode 100644
index 674dc603..00000000
--- a/src/components/blocks/StagingDataTable.js
+++ /dev/null
@@ -1,311 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { useSelector } from 'react-redux';
-import { useIntl } from 'react-intl';
-import styled, { withTheme } from 'styled-components';
-import { TableCellHeaderText, TableCellText } from '../typography';
-import { convertPascalCaseToSentenceCase } from '../../utils/stringUtils';
-import { Modal, MinusIcon, modalTypeEnum } from '..';
-import { TableDrawer } from './';
-import { useWindowSize } from '../hooks/useWindowSize';
-
-const Table = styled('table')`
- background-color: white;
- display: table;
- border-spacing: 0;
- border-collapse: collapse;
- margin: 0px 0px 50px 0px;
- width: 100%;
-`;
-
-const THead = styled('thead')`
- font-weight: 500;
- background-color: ${props =>
- props.theme.colors[props.selectedTheme].secondary};
-`;
-
-const Th = styled('th')`
- padding: 1rem;
- color: ${props => props.theme.colors[props.selectedTheme].onSurface};
- display: table-cell;
- text-align: center;
- letter-spacing: 0.01071em;
- vertical-align: inherit;
- max-width: 80px;
- min-width: 80px;
-`;
-
-const Tr = styled('tr')`
- ${props => {
- if (props.color === 'green') {
- return `
- border: 1px solid ${props.theme.colors.default.status.ok.primary};
- background: ${props.theme.colors.default.status.ok.secondary};
- p, span {
- color: ${props.theme.colors.default.status.ok.primary} !important;
- };
- `;
- } else if (props.color === 'red') {
- return `
- background: ${props.theme.colors.default.status.error.secondary};
- border: 1px solid ${props.theme.colors.default.status.error.primary}
- p, span {
- color: ${props.theme.colors.default.status.error.primary} !important;
- };
- `;
- } else if (props.color === 'gray') {
- return `border: 1px solid ${props.theme.colors.default.secondary};`;
- }
- }};
- th:last-child {
- text-align: center;
- max-width: 50px;
- min-width: 50px;
- }
-`;
-
-const Td = styled('td')`
- display: table-cell;
- padding: 1rem;
- text-align: center;
- letter-spacing: 0.01071em;
- vertical-align: inherit;
- max-width: 80px;
- min-width: 80px;
-`;
-
-const StagingDataTableContainer = styled('div')`
- height: 100%;
-`;
-
-const ChangeGroupHeader = ({ headings, appStore }) => {
- return (
-