@@ -219,9 +219,11 @@ export function RenderActions({
}
export function RenderFixedInputs({ product }: { product?: Product }) {
+ const { theme } = useContext(ApplicationContext);
if (!product || !product.fixed_inputs.length) {
return null;
}
+
return (
}
@@ -233,7 +235,7 @@ export function RenderFixedInputs({ product }: { product?: Product }) {
{product.fixed_inputs
.sort((a, b) => a.name.localeCompare(b.name))
.map((fi, index) => (
-
+
{fi.name} |
{fi.value} |
@@ -245,9 +247,11 @@ export function RenderFixedInputs({ product }: { product?: Product }) {
}
export function RenderProduct({ product }: { product?: Product }) {
+ const { theme } = useContext(ApplicationContext);
if (!product) {
return null;
}
+
return (
}
@@ -256,7 +260,7 @@ export function RenderProduct({ product }: { product?: Product }) {
-
+
|
@@ -270,37 +274,37 @@ export function RenderProduct({ product }: { product?: Product }) {
-
+
|
{product.description} |
-
+
|
{product.product_type} |
-
+
|
{product.tag || ""} |
-
+
|
{product.status || ""} |
-
+
|
{renderDateTime(product.created_at)} |
-
+
|
@@ -313,6 +317,7 @@ export function RenderProduct({ product }: { product?: Product }) {
}
export function RenderProcesses({ subscriptionProcesses }: { subscriptionProcesses: SubscriptionProcesses[] }) {
+ const { theme } = useContext(ApplicationContext);
const columns = ["target", "name", "id", "status", "started_at", "modified_at"];
const th = (index: number) => {
@@ -339,7 +344,7 @@ export function RenderProcesses({ subscriptionProcesses }: { subscriptionProcess
{subscriptionProcesses.map((ps, index) => (
-
+
{ps.workflow_target} |
{ps.process.workflow} |
@@ -353,7 +358,7 @@ export function RenderProcesses({ subscriptionProcesses }: { subscriptionProcess
|
))}
{isEmpty(subscriptionProcesses) && (
-
+
@@ -368,6 +373,7 @@ export function RenderProcesses({ subscriptionProcesses }: { subscriptionProcess
}
export function RenderSubscriptions({ inUseBySubscriptions }: { inUseBySubscriptions?: SubscriptionWithDetails[] }) {
+ const { theme } = useContext(ApplicationContext);
const intl = useIntl();
const [filterTerminated, setFilterTerminated] = useState(true);
@@ -425,7 +431,7 @@ export function RenderSubscriptions({ inUseBySubscriptions }: { inUseBySubscript
{filteredSubscriptions.map((subscription: SubscriptionWithDetails, index: number) => (
-
+
();
const [notFound, setNotFound] = useState(false);
const [workflows, setWorkflows] = useState();
+ const [inUseBySubscriptions, setInUseBySubscriptions] = useState({});
const [enrichedInUseBySubscriptions, setEnrichedInUseBySubscriptions] = useState();
const [viewTypes, setViewTypes] = useStorageState(
localStorage,
@@ -115,9 +116,9 @@ function SubscriptionDetail({ subscriptionId, confirmation }: IProps) {
useEffect(() => {
if (loadedSubscriptionModel && subscription) {
async function loadViews() {
- if (plugins.hasOwnProperty("subscriptionDetailPlugins")) {
+ if (manifest.plugins.hasOwnProperty("subscriptionDetailPlugins")) {
// @ts-ignore
- const componentPromises = plugins["subscriptionDetailPlugins"].map(async (plugin) => {
+ const componentPromises = manifest.plugins["subscriptionDetailPlugins"].map(async (plugin) => {
const View = await importPlugin(plugin);
return (
{
+ if (loadedSubscriptionModel && subscription) {
+ const inUseByIds = findObjects(subscription, "in_use_by_ids");
+ apiClient.subscriptionsByInUsedByIds(inUseByIds).then((i) => setInUseBySubscriptions(i));
+ }
+ }, [loadedSubscriptionModel, subscription, apiClient]);
+
if (notFound) {
return (
@@ -208,11 +216,8 @@ function SubscriptionDetail({ subscriptionId, confirmation }: IProps) {
const renderedSubscriptionDetails = (
-
- {plugins.hasOwnProperty("subscriptionDetailPlugins") && (
+
+ {manifest.plugins.hasOwnProperty("subscriptionDetailPlugins") && (
{loadedPlugins}
)}
@@ -313,6 +318,7 @@ function SubscriptionDetail({ subscriptionId, confirmation }: IProps) {
key={index}
subscription_instance={entry[1]}
field_name={entry[0]}
+ inUseBySubscriptions={inUseBySubscriptions}
/>
))}
@@ -323,6 +329,7 @@ function SubscriptionDetail({ subscriptionId, confirmation }: IProps) {
)}
diff --git a/src/components/subscriptionDetail/SubscriptionDetails.tsx b/src/components/subscriptionDetail/SubscriptionDetails.tsx
index 62930307..38e8cd98 100644
--- a/src/components/subscriptionDetail/SubscriptionDetails.tsx
+++ b/src/components/subscriptionDetail/SubscriptionDetails.tsx
@@ -1,5 +1,5 @@
/*
- * Copyright 2019-2020 SURF.
+ * Copyright 2019-2022 SURF.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
@@ -53,7 +53,7 @@ interface IProps {
}
export default function SubscriptionDetails({ subscription, className = "", subscriptionProcesses = [] }: IProps) {
- const { organisations, allowed } = useContext(ApplicationContext);
+ const { allowed, organisations, theme } = useContext(ApplicationContext);
// handle global errors
const [errorMessage, setErrorMessage] = useState("");
const closeErrorModal = () => {
@@ -140,7 +140,7 @@ export default function SubscriptionDetails({ subscription, className = "", subs
-
+
|
@@ -202,37 +202,37 @@ export default function SubscriptionDetails({ subscription, className = "", subs
-
+
|
{subscription.product?.name} |
-
+
|
{subscription.description} |
-
+
|
{renderDate(subscription.start_date)} |
-
+
|
{renderDate(subscription.end_date)} |
-
+
|
{subscription.status} |
-
+
|
@@ -268,21 +268,21 @@ export default function SubscriptionDetails({ subscription, className = "", subs
{customer_name && customer_name !== subscription.customer_id && (
-
+
|
{customer_name} |
)}
-
+
|
{subscription.customer_id} |
{subscription.customer_descriptions && (
-
+
|
@@ -298,7 +298,7 @@ export default function SubscriptionDetails({ subscription, className = "", subs
)}
-
+
|
diff --git a/src/components/subscriptionDetail/SubscriptionInfo.tsx b/src/components/subscriptionDetail/SubscriptionInfo.tsx
new file mode 100644
index 00000000..4a274579
--- /dev/null
+++ b/src/components/subscriptionDetail/SubscriptionInfo.tsx
@@ -0,0 +1,68 @@
+/*
+ * Copyright 2019-2022 SURF.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import {
+ EuiDescriptionList,
+ EuiDescriptionListDescription,
+ EuiDescriptionListTitle,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiLink,
+} from "@elastic/eui";
+import React, { useContext } from "react";
+import ApplicationContext from "utils/ApplicationContext";
+
+interface IProps {
+ label: string;
+ value: any;
+}
+
+export default function SubscriptionInfo({ label, value }: IProps) {
+ const { theme } = useContext(ApplicationContext);
+
+ return (
+
+
+ {label.toUpperCase()} |
+
+
+
+
+ Description
+ {value.description}
+ Product
+
+ {value.product?.description}
+
+
+
+
+
+ Status
+ {value.status}
+ Subscription ID
+
+
+ {value.subscription_id?.slice(0, 8)}
+
+
+
+
+
+ |
+
+
+ );
+}
diff --git a/src/components/subscriptionDetail/SubscriptionInstance.tsx b/src/components/subscriptionDetail/SubscriptionInstance.tsx
index aeea6451..bec66097 100644
--- a/src/components/subscriptionDetail/SubscriptionInstance.tsx
+++ b/src/components/subscriptionDetail/SubscriptionInstance.tsx
@@ -1,5 +1,5 @@
/*
- * Copyright 2019-2020 SURF.
+ * Copyright 2019-2022 SURF.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
@@ -13,21 +13,30 @@
*
*/
+import { EuiButton } from "@elastic/eui";
+import SubscriptionInfo from "components/subscriptionDetail/SubscriptionInfo";
import SubscriptionInstanceValue from "custom/components/subscriptionDetail/SubscriptionInstanceValue";
import { isArray, partition } from "lodash";
+import React, { useContext, useState } from "react";
import { FormattedMessage } from "react-intl";
+import ApplicationContext from "utils/ApplicationContext";
import { ISubscriptionInstance } from "utils/types";
interface IProps {
subscription_instance: ISubscriptionInstance;
field_name?: string;
+ inUseBySubscriptions: {};
}
-export default function SubscriptionInstance({ subscription_instance, field_name }: IProps) {
+export default function SubscriptionInstance({ subscription_instance, field_name, inUseBySubscriptions }: IProps) {
+ const { theme } = useContext(ApplicationContext);
+ const [subscriptionInfoExpanded, setSubscriptionInfoExpanded] = useState(false);
+
if (!subscription_instance) {
return null;
}
-
+ let isSubscriptionInfoSection = false;
+ const subscriptionInstanceId = subscription_instance.subscription_instance_id;
const fields = Object.entries(subscription_instance)
.filter((entry) => !["label", "subscription_instance_id", "name"].includes(entry[0]))
.map<[string, any]>((entry) => (isArray(entry[1]) ? entry : [entry[0], [entry[1]]]));
@@ -49,9 +58,57 @@ export default function SubscriptionInstance({ subscription_instance, field_name
{value_fields
.sort((entryA, entryB) => entryA[0].localeCompare(entryB[0]))
.flatMap((entry) => entry[1].map((value: any) => [entry[0], value]))
- .map((entry, i) => (
-
- ))}
+ .map((entry, i) => {
+ if (entry[0] === "in_use_by_ids") {
+ let SubscriptionInfoExpandButton = <>>;
+ if (!isSubscriptionInfoSection) {
+ // render button once per product block
+ SubscriptionInfoExpandButton = (
+
+
+ USED_BY_SUBSCRIPTIONS |
+ Show info about subscriptions that use this product block |
+
+
+ setSubscriptionInfoExpanded(!subscriptionInfoExpanded)
+ }
+ >
+ {subscriptionInfoExpanded ? "collapse" : "expand"}
+
+ |
+
+
+ );
+ isSubscriptionInfoSection = true;
+ }
+ // @ts-ignore
+ const value = inUseBySubscriptions.hasOwnProperty(entry[1])
+ ? // @ts-ignore
+ inUseBySubscriptions[entry[1]]
+ : entry[1];
+ return (
+ <>
+ {SubscriptionInfoExpandButton}
+ {subscriptionInfoExpanded && (
+
+ )}
+ >
+ );
+ }
+ return (
+
+ );
+ })}
{instance_fields
.flatMap((entry) => entry[1].map((value: any) => [entry[0], value]))
@@ -60,6 +117,7 @@ export default function SubscriptionInstance({ subscription_instance, field_name
key={i}
subscription_instance={entry[1]}
field_name={field_name ? `${field_name}.${entry[0]}` : entry[0]}
+ inUseBySubscriptions={inUseBySubscriptions}
/>
))}
diff --git a/src/components/subscriptionDetail/templates/ServiceConfiguration.tsx b/src/components/subscriptionDetail/templates/ServiceConfiguration.tsx
index 4ff41057..5b020472 100644
--- a/src/components/subscriptionDetail/templates/ServiceConfiguration.tsx
+++ b/src/components/subscriptionDetail/templates/ServiceConfiguration.tsx
@@ -1,20 +1,39 @@
+import { EuiButton } from "@elastic/eui";
+import SubscriptionInfo from "components/subscriptionDetail/SubscriptionInfo";
import { TabbedSection } from "components/subscriptionDetail/TabbedSection";
import SubscriptionInstanceValue from "custom/components/subscriptionDetail/SubscriptionInstanceValue";
import { isArray, partition } from "lodash";
+import React, { useContext, useState } from "react";
+import ApplicationContext from "utils/ApplicationContext";
import { ISubscriptionInstance, TabView } from "utils/types";
interface IProps {
subscriptionInstances: any[][];
viewType?: string;
subscription_id: string;
+ inUseBySubscriptions: {};
}
-export function RenderServiceConfiguration({ subscriptionInstances, viewType, subscription_id }: IProps) {
+export function RenderServiceConfiguration({
+ subscriptionInstances,
+ viewType,
+ subscription_id,
+ inUseBySubscriptions,
+}: IProps) {
+ // Todo: remove surf specific code
const tabOrder = ["ip_gw_endpoint", "l3_endpoints", "l2_endpoints"];
+ const { theme } = useContext(ApplicationContext);
+ const [subscriptionInfoExpanded, setSubscriptionInfoExpanded] = useState ([]);
- const splitValueAndInstanceFields = (instance: ISubscriptionInstance) => {
- if (instance === null) debugger;
+ const toggleExpand = (id: string) => {
+ if (subscriptionInfoExpanded.includes(id)) {
+ setSubscriptionInfoExpanded(subscriptionInfoExpanded.filter((i) => i !== id));
+ } else {
+ setSubscriptionInfoExpanded(subscriptionInfoExpanded.concat(id));
+ }
+ };
+ const splitValueAndInstanceFields = (instance: ISubscriptionInstance) => {
const fields = Object.entries(instance)
.filter(([key]) => !["label", "subscription_instance_id", "name"].includes(key))
.filter(([key, value]) => (key === "owner_subscription_id" ? value !== subscription_id : true))
@@ -41,6 +60,8 @@ export function RenderServiceConfiguration({ subscriptionInstances, viewType, su
instances.forEach((inst: ISubscriptionInstance) => {
const splitFields = splitValueAndInstanceFields(inst);
const subTabs: TabView[] = level < 4 ? parseToTabs(splitFields.instance_fields, level + 1) : [];
+ let isSubscriptionInfoSection = false;
+ const subscriptionInstanceId = inst.subscription_instance_id;
tabs.push({
id: `${field}-${inst.subscription_instance_id}`,
name: splitFields.tabName,
@@ -58,13 +79,66 @@ export function RenderServiceConfiguration({ subscriptionInstances, viewType, su
.flatMap((entry) =>
entry[1].map((value: any) => [entry[0], value !== null ? value : "NULL"])
)
- .map((entry, i) => (
-
- ))}
+ .map((entry, i) => {
+ if (entry[0] === "in_use_by_ids") {
+ const isExpanded = subscriptionInfoExpanded.includes(
+ subscriptionInstanceId
+ );
+ let SubscriptionInfoExpandButton = <>>;
+ if (!isSubscriptionInfoSection) {
+ // render button once per product block
+ SubscriptionInfoExpandButton = (
+
+
+ USED_BY_SUBSCRIPTIONS |
+
+ Show info about subscriptions that use this product
+ block
+ |
+
+
+ toggleExpand(subscriptionInstanceId)
+ }
+ >
+ {isExpanded ? "collapse" : "expand"}
+
+ |
+
+
+ );
+ isSubscriptionInfoSection = true;
+ }
+ // @ts-ignore
+ const value = inUseBySubscriptions.hasOwnProperty(entry[1])
+ ? // @ts-ignore
+ inUseBySubscriptions[entry[1]]
+ : entry[1];
+
+ return (
+ <>
+ {SubscriptionInfoExpandButton}
+ {isExpanded && (
+
+ )}
+ >
+ );
+ }
+ return (
+
+ );
+ })}
| |
{subTabs.length > 0 && (
diff --git a/src/components/tables/AdvancedSearch.tsx b/src/components/tables/AdvancedSearch.tsx
index d7a153c1..74250111 100644
--- a/src/components/tables/AdvancedSearch.tsx
+++ b/src/components/tables/AdvancedSearch.tsx
@@ -1,5 +1,5 @@
/*
- * Copyright 2019-2020 SURF.
+ * Copyright 2019-2022 SURF.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
diff --git a/src/components/tables/DropDownContainer.scss b/src/components/tables/DropDownContainer.scss
index 182069af..71689037 100644
--- a/src/components/tables/DropDownContainer.scss
+++ b/src/components/tables/DropDownContainer.scss
@@ -1,5 +1,5 @@
/*!
- * Copyright 2019-2020 SURF.
+ * Copyright 2019-2022 SURF.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
diff --git a/src/components/tables/DropDownContainer.tsx b/src/components/tables/DropDownContainer.tsx
index e8e9ec1c..cdf9cb6e 100644
--- a/src/components/tables/DropDownContainer.tsx
+++ b/src/components/tables/DropDownContainer.tsx
@@ -1,5 +1,5 @@
/*
- * Copyright 2019-2020 SURF.
+ * Copyright 2019-2022 SURF.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
diff --git a/src/components/tables/MiniPaginator.tsx b/src/components/tables/MiniPaginator.tsx
index f7a98693..5294bc53 100644
--- a/src/components/tables/MiniPaginator.tsx
+++ b/src/components/tables/MiniPaginator.tsx
@@ -1,5 +1,5 @@
/*
- * Copyright 2019-2020 SURF.
+ * Copyright 2019-2022 SURF.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
diff --git a/src/components/tables/NwaTable.scss b/src/components/tables/NwaTable.scss
index da2bf96b..1de6bdd3 100644
--- a/src/components/tables/NwaTable.scss
+++ b/src/components/tables/NwaTable.scss
@@ -1,5 +1,5 @@
/*!
- * Copyright 2019-2020 SURF.
+ * Copyright 2019-2022 SURF.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
@@ -22,9 +22,6 @@
padding: 20px 0 5px 0;
margin: 0 0 5px 0;
font-size: larger;
- &.minimized {
- background-color: white;
- }
.icon-right {
float: right;
}
@@ -44,7 +41,7 @@
}
}
div.advanced-search-container {
- padding: 0px 0px 10px 0px;
+ padding: 0 0 10px 0;
}
.preferences {
@@ -82,6 +79,7 @@ table.nwa-table {
th {
text-align: left;
vertical-align: middle;
+ color: white;
}
th:first-child {
border-radius: 10px 0 0 0;
@@ -91,20 +89,6 @@ table.nwa-table {
border-right: none;
}
tr {
- border-bottom: 1px solid vars.$light-grey;
- background-color: white;
- &.suspended {
- background-color: vars.$lightest-gold;
- }
- &.running {
- background-color: vars.$lightest-success;
- }
- &.api_unavailable {
- background-color: vars.$lightest-primary;
- }
- &.inconsistent_data {
- background-color: vars.$lightest-danger;
- }
&.highlighted {
border: 2px solid vars.$primary;
}
@@ -114,20 +98,17 @@ table.nwa-table {
th {
padding: 5px 5px 10px 5px;
background-color: vars.$primary;
- color: white;
}
}
span {
font-weight: bold;
font-size: larger;
- color: vars.$medium-grey;
padding: 7px 2px 7px 0;
}
input {
font-size: 14px;
}
tr.filters {
- background-color: white;
th {
border-right: none;
border-left: none;
@@ -146,7 +127,6 @@ table.nwa-table {
i.fa {
margin-top: 6px;
- color: vars.$primary;
float: left;
font-size: 18px;
&.active {
@@ -158,26 +138,6 @@ table.nwa-table {
}
}
tbody {
- tr {
- &:hover {
- background-color: vars.$hover;
- &.suspended {
- background-color: color.adjust(vars.$lightest-gold, $lightness: -3%);
- }
- &.running {
- background-color: color.adjust(vars.$lightest-success, $lightness: -3%);
- }
- &.api_unavailable {
- background-color: color.adjust(vars.$lightest-primary, $lightness: -3%);
- }
- &.inconsistent_data {
- background-color: color.adjust(vars.$lightest-danger, $lightness: -3%);
- }
- td.actions i.fa-ellipsis-h {
- color: vars.$primary;
- }
- }
- }
td {
i.fa-info-circle {
@include mixins.info-icon;
@@ -231,7 +191,6 @@ table.nwa-table {
}
}
td.assignee {
- color: vars.$primary;
font-weight: bold;
padding-right: 15px;
}
diff --git a/src/components/tables/NwaTable.tsx b/src/components/tables/NwaTable.tsx
index b5e857a8..e89d4a18 100644
--- a/src/components/tables/NwaTable.tsx
+++ b/src/components/tables/NwaTable.tsx
@@ -1,5 +1,5 @@
/*
- * Copyright 2019-2020 SURF.
+ * Copyright 2019-2022 SURF.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
@@ -16,8 +16,9 @@
import "stylesheets/buttons.scss";
import "components/tables/NwaTable.scss";
-import { EuiFlexGroup, EuiFlexItem } from "@elastic/eui";
+import { EuiFlexGroup, EuiFlexItem, EuiPanel } from "@elastic/eui";
import AdvancedSearch from "components/tables/AdvancedSearch";
+import MiniPaginator from "components/tables/MiniPaginator";
import Paginator from "components/tables/Paginator";
import Preferences from "components/tables/Preferences";
import { TableRenderer } from "components/tables/TableRenderer";
@@ -43,8 +44,6 @@ import {
} from "react-table";
import useHttpIntervalFallback from "utils/useHttpIntervalFallback";
-import MiniPaginator from "./MiniPaginator";
-
/*
* Reusable NWA table implementation using react-table 7.
*
@@ -323,7 +322,7 @@ export function NwaTable ({
}, [runningProcesses]); // eslint-disable-line react-hooks/exhaustive-deps
return (
-
+
{...preferencesProps} />
@@ -342,6 +341,6 @@ export function NwaTable({
)}
{!minimized && showPaginator && }
-
+
);
}
diff --git a/src/components/tables/Paginator.scss b/src/components/tables/Paginator.scss
index a8ed30b7..b1629053 100644
--- a/src/components/tables/Paginator.scss
+++ b/src/components/tables/Paginator.scss
@@ -1,5 +1,5 @@
/*!
- * Copyright 2019-2020 SURF.
+ * Copyright 2019-2022 SURF.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
@@ -31,5 +31,5 @@
}
.mini-paginator {
- margin-top: 8px;
+ margin-top: 5px !important;
}
diff --git a/src/components/tables/Paginator.tsx b/src/components/tables/Paginator.tsx
index b382b3ea..6a4d7a19 100644
--- a/src/components/tables/Paginator.tsx
+++ b/src/components/tables/Paginator.tsx
@@ -1,5 +1,5 @@
/*
- * Copyright 2019-2020 SURF.
+ * Copyright 2019-2022 SURF.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
diff --git a/src/components/tables/Preferences.scss b/src/components/tables/Preferences.scss
index 594ae287..c9725d21 100644
--- a/src/components/tables/Preferences.scss
+++ b/src/components/tables/Preferences.scss
@@ -1,5 +1,5 @@
/*!
- * Copyright 2019-2020 SURF.
+ * Copyright 2019-2022 SURF.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
diff --git a/src/components/tables/Preferences.tsx b/src/components/tables/Preferences.tsx
index 1bc3ec6f..718a172c 100644
--- a/src/components/tables/Preferences.tsx
+++ b/src/components/tables/Preferences.tsx
@@ -1,5 +1,5 @@
/*
- * Copyright 2019-2020 SURF.
+ * Copyright 2019-2022 SURF.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
@@ -77,7 +77,6 @@ function Preferences({
dispatch({ type: ActionType.OVERRIDE, settings: initialTableSettings })}
- color="warning"
iconType="refresh"
>
diff --git a/src/components/tables/Processes.tsx b/src/components/tables/Processes.tsx
index 269d0b9a..f59d7e8d 100644
--- a/src/components/tables/Processes.tsx
+++ b/src/components/tables/Processes.tsx
@@ -1,5 +1,5 @@
/*
- * Copyright 2019-2020 SURF.
+ * Copyright 2019-2022 SURF.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
diff --git a/src/components/tables/Subscriptions.tsx b/src/components/tables/Subscriptions.tsx
index 82f741bb..a9f9ae8c 100644
--- a/src/components/tables/Subscriptions.tsx
+++ b/src/components/tables/Subscriptions.tsx
@@ -1,3 +1,18 @@
+/*
+ * Copyright 2019-2022 SURF.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
import SubscriptionDetail from "components/subscriptionDetail/SubscriptionDetail";
import {
renderInsyncCell,
@@ -36,20 +51,6 @@ import { useQueryParam } from "use-query-params";
import ApplicationContext from "utils/ApplicationContext";
import { CommaSeparatedNumericArrayParam, CommaSeparatedStringArrayParam } from "utils/QueryParameters";
import { Subscription } from "utils/types";
-/*
- * Copyright 2019-2020 SURF.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- */
export function initialSubscriptionsFilterAndSort(showTasks: boolean, statuses: string[]) {
const initialFilterBy = [{ id: "status", values: statuses }];
diff --git a/src/components/tables/TableRenderer.tsx b/src/components/tables/TableRenderer.tsx
index 01f3851d..05a94da3 100644
--- a/src/components/tables/TableRenderer.tsx
+++ b/src/components/tables/TableRenderer.tsx
@@ -1,5 +1,5 @@
/*
- * Copyright 2019-2020 SURF.
+ * Copyright 2019-2022 SURF.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
@@ -15,8 +15,10 @@
import "stylesheets/buttons.scss";
-import React from "react";
+import React, { useContext } from "react";
import { ColumnInstance, HeaderGroup, Row, TableBodyProps, TableProps } from "react-table";
+import ApplicationContext from "utils/ApplicationContext";
+import { DARK_ROW_BORDER_COLOR, LIGHT_ROW_BORDER_COLOR } from "utils/Colors";
interface ITableRendererProps {
renderSubComponent: ({ row }: { row: Row }) => JSX.Element;
@@ -37,6 +39,8 @@ export function TableRenderer({
page,
visibleColumns,
}: ITableRendererProps) {
+ const { theme } = useContext(ApplicationContext);
+
const sortIcon = (col: ColumnInstance) => {
if (!col.canSort) {
return "";
@@ -51,6 +55,7 @@ export function TableRenderer({
return ;
}
};
+ const rowBorderColor = theme === "light" ? LIGHT_ROW_BORDER_COLOR : DARK_ROW_BORDER_COLOR;
return (
@@ -64,7 +69,7 @@ export function TableRenderer({
))}
-
+
{headerGroup.headers.map((column) => (
{column.canFilter && column.render("Filter")}
@@ -79,7 +84,7 @@ export function TableRenderer({
prepareRow(row);
return (
-
+
{row.cells.map((cell) => {
return (
diff --git a/src/components/tables/cellRenderers.tsx b/src/components/tables/cellRenderers.tsx
index e45881c5..6134c373 100644
--- a/src/components/tables/cellRenderers.tsx
+++ b/src/components/tables/cellRenderers.tsx
@@ -1,5 +1,5 @@
/*
- * Copyright 2019-2020 SURF.
+ * Copyright 2019-2022 SURF.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
diff --git a/src/components/tables/filterRenderers.tsx b/src/components/tables/filterRenderers.tsx
index c7038ebf..35547aa6 100644
--- a/src/components/tables/filterRenderers.tsx
+++ b/src/components/tables/filterRenderers.tsx
@@ -1,5 +1,5 @@
/*
- * Copyright 2019-2020 SURF.
+ * Copyright 2019-2022 SURF.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
@@ -13,12 +13,13 @@
*
*/
+import { EuiFieldText } from "@elastic/eui";
import DropDownContainer from "components/tables/DropDownContainer";
import { ActionType, TableSettingsAction } from "components/tables/NwaTable";
import { intl } from "locale/i18n";
import debounce from "lodash/debounce";
import React, { Dispatch, useContext } from "react";
-import Select, { ActionMeta, ValueType } from "react-select";
+import ReactSelect, { ActionMeta, ValueType } from "react-select";
import { ColumnInstance, TableState } from "react-table";
import ApplicationContext from "utils/ApplicationContext";
import { Option, Organization, ProcessV2 } from "utils/types";
@@ -77,7 +78,7 @@ function CustomersFilter({
title={column.id}
renderButtonContent={renderFilterIcon(filtering)}
renderContent={(disabled: boolean, reset) => (
- | | |