From 8a8b280497ae3d17e0b7baed40578545d4a9d035 Mon Sep 17 00:00:00 2001
From: Jan-Marius Vatle <48485965+janmarius@users.noreply.github.com>
Date: Mon, 18 Mar 2024 12:48:40 +0100
Subject: [PATCH] FIX-2296 Add generic Button component (#2309)
---
.../ContentViews/CurveValuesView.tsx | 13 ++--
.../components/ContentViews/EditNumber.tsx | 15 ++---
.../ContentViews/EditSelectedLogCurveInfo.tsx | 39 ++---------
.../components/ContentViews/JobsView.tsx | 6 +-
.../components/ContentViews/QueryView.tsx | 3 +-
.../components/ContentViews/ServerManager.tsx | 30 ++++-----
.../WellboresListView.tests.tsx.snap | 64 +++++++++----------
.../ContentViews/table/ColumnOptionsMenu.tsx | 12 ++--
.../components/ContentViews/table/Panel.tsx | 20 ++----
.../components/JobsButton.tsx | 44 -------------
.../components/Modals/ConfirmModal.tsx | 2 +-
.../Modals/LogCurvePriorityModal.tsx | 3 +-
.../Modals/MissingDataAgentModal.tsx | 15 ++---
.../components/Modals/ModalDialog.tsx | 36 +++--------
.../components/Modals/ObjectPickerModal.tsx | 3 +-
.../components/Modals/ServerModal.tsx | 21 ++----
.../components/Modals/SettingsModal.tsx | 3 +-
.../Modals/UserCredentialsModal.tsx | 8 +--
.../LogCurveInfoPropertiesModal.test.tsx | 13 ++--
.../components/PageLayout.tsx | 9 ++-
.../components/ServerManagerButton.tsx | 47 --------------
.../components/Sidebar/SearchFilter.tsx | 3 +-
.../components/StyledComponents/Button.tsx | 56 ++++++++++++++++
.../components/TopRightCornerMenu.tsx | 58 +++++++++--------
24 files changed, 211 insertions(+), 312 deletions(-)
delete mode 100644 Src/WitsmlExplorer.Frontend/components/JobsButton.tsx
delete mode 100644 Src/WitsmlExplorer.Frontend/components/ServerManagerButton.tsx
create mode 100644 Src/WitsmlExplorer.Frontend/components/StyledComponents/Button.tsx
diff --git a/Src/WitsmlExplorer.Frontend/components/ContentViews/CurveValuesView.tsx b/Src/WitsmlExplorer.Frontend/components/ContentViews/CurveValuesView.tsx
index 078519e65..f9444c921 100644
--- a/Src/WitsmlExplorer.Frontend/components/ContentViews/CurveValuesView.tsx
+++ b/Src/WitsmlExplorer.Frontend/components/ContentViews/CurveValuesView.tsx
@@ -1,4 +1,4 @@
-import { Button, Radio, Switch, Typography } from "@equinor/eds-core-react";
+import { Radio, Switch, Typography } from "@equinor/eds-core-react";
import { CSSProperties } from "@material-ui/core/styles/withStyles";
import {
MILLIS_IN_SECOND,
@@ -24,6 +24,7 @@ import ConfirmModal from "components/Modals/ConfirmModal";
import { ReportModal } from "components/Modals/ReportModal";
import { ShowLogDataOnServerModal } from "components/Modals/ShowLogDataOnServerModal";
import ProgressSpinner from "components/ProgressSpinner";
+import { Button } from "components/StyledComponents/Button";
import { useConnectedServer } from "contexts/connectedServerContext";
import OperationContext from "contexts/operationContext";
import { DispatchOperation } from "contexts/operationStateReducer";
@@ -62,7 +63,6 @@ import { truncateAbortHandler } from "services/apiClient";
import JobService, { JobType } from "services/jobService";
import LogObjectService from "services/logObjectService";
import styled from "styled-components";
-import { Colors } from "styles/Colors";
import Icon from "styles/Icons";
import { formatIndexValue } from "tools/IndexHelpers";
import {
@@ -559,15 +559,14 @@ export const CurveValuesView = (): React.ReactElement => {
const panelElements = useMemo(
() => [
- displayConfirmation(dispatchOperation)}
- colors={colors}
>
- ,
+ ,
{
}
};
-const StyledButton = styled(Button)<{ colors: Colors }>`
- color: ${(props) => props.colors.infographic.primaryMossGreen};
-`;
-
const alignLayout: CSSProperties = {
display: "flex",
alignItems: "center"
diff --git a/Src/WitsmlExplorer.Frontend/components/ContentViews/EditNumber.tsx b/Src/WitsmlExplorer.Frontend/components/ContentViews/EditNumber.tsx
index 44a026ebe..4da13c55d 100644
--- a/Src/WitsmlExplorer.Frontend/components/ContentViews/EditNumber.tsx
+++ b/Src/WitsmlExplorer.Frontend/components/ContentViews/EditNumber.tsx
@@ -1,10 +1,10 @@
import { Icon, Label, TextField } from "@equinor/eds-core-react";
import { Tooltip } from "@material-ui/core";
-import { StyledButton } from "components/ContentViews/EditSelectedLogCurveInfo";
-import { TooltipLayout } from "../StyledComponents/Tooltip";
+import { Button } from "components/StyledComponents/Button";
import OperationContext from "contexts/operationContext";
import { ChangeEvent, ReactElement, useContext, useState } from "react";
import styled from "styled-components";
+import { TooltipLayout } from "../StyledComponents/Tooltip";
interface EditNumberProps {
label: string;
@@ -60,14 +60,9 @@ const EditNumber = (props: EditNumberProps): ReactElement => {
) : null
}
/>
-
-
-
+
+
+
);
};
diff --git a/Src/WitsmlExplorer.Frontend/components/ContentViews/EditSelectedLogCurveInfo.tsx b/Src/WitsmlExplorer.Frontend/components/ContentViews/EditSelectedLogCurveInfo.tsx
index 424a2c7b9..44e1e4a48 100644
--- a/Src/WitsmlExplorer.Frontend/components/ContentViews/EditSelectedLogCurveInfo.tsx
+++ b/Src/WitsmlExplorer.Frontend/components/ContentViews/EditSelectedLogCurveInfo.tsx
@@ -1,12 +1,12 @@
import {
Autocomplete,
- Button,
EdsProvider,
Icon,
Label,
TextField,
Typography
} from "@equinor/eds-core-react";
+import { Button } from "components/StyledComponents/Button";
import { useConnectedServer } from "contexts/connectedServerContext";
import OperationContext from "contexts/operationContext";
import { isValid, parse } from "date-fns";
@@ -31,7 +31,7 @@ import {
import { RouterLogType } from "routes/routerConstants";
import { checkIsUrlTooLong } from "routes/utils/checkIsUrlTooLong";
import styled from "styled-components";
-import { Colors, colors, dark } from "styles/Colors";
+import { Colors, dark } from "styles/Colors";
import { createLogCurveValuesSearchParams } from "../../routes/utils/createLogCurveValuesSearchParams";
interface EditSelectedLogCurveInfoProps {
@@ -213,9 +213,8 @@ const EditSelectedLogCurveInfo = (
dropdownHeight={600}
/>
-
-
-
+
+
)
@@ -272,32 +271,4 @@ const StyledTextField = styled(TextField)`
min-width: 220px;
`;
-export const StyledButton = styled(Button)`
- ${(props) =>
- props.disabled
- ? `
- &:hover{
- border:2px solid ${colors.interactive.disabledBorder};
- border-radius: 50%;
- }
- &&{
- border:2px solid ${colors.interactive.disabledBorder};
- }`
- : `
- &:hover{
- border-radius: 50%;
- }
- &&{
- border:2px solid ${colors.interactive.primaryResting};
- }`}
- display:flex;
- height: 2rem;
- width: 2rem;
- min-height: 2rem;
- min-width: 2rem;
- padding: 0;
- border-radius: 50%;
- align-items: center;
- justify-content: center;
-`;
export default EditSelectedLogCurveInfo;
diff --git a/Src/WitsmlExplorer.Frontend/components/ContentViews/JobsView.tsx b/Src/WitsmlExplorer.Frontend/components/ContentViews/JobsView.tsx
index 476b04cb3..bb11fd2f2 100644
--- a/Src/WitsmlExplorer.Frontend/components/ContentViews/JobsView.tsx
+++ b/Src/WitsmlExplorer.Frontend/components/ContentViews/JobsView.tsx
@@ -1,4 +1,4 @@
-import { Button, Icon, Switch, Typography } from "@equinor/eds-core-react";
+import { Icon, Switch, Typography } from "@equinor/eds-core-react";
import { useQueryClient } from "@tanstack/react-query";
import {
ContentTable,
@@ -11,6 +11,7 @@ import JobInfoContextMenu, {
} from "components/ContextMenus/JobInfoContextMenu";
import formatDateString from "components/DateFormatter";
import { ReportModal } from "components/Modals/ReportModal";
+import { Button } from "components/StyledComponents/Button";
import OperationContext from "contexts/operationContext";
import OperationType from "contexts/operationType";
import { refreshJobInfoQuery } from "hooks/query/queryRefreshHelpers";
@@ -146,15 +147,14 @@ export const JobsView = (): React.ReactElement => {
const panelElements = [
refreshJobInfoQuery(queryClient)}
disabled={isFetching}
- colors={colors}
>
- Refresh
,
msalEnabled &&
(getUserAppRoles().includes(adminRole) ||
diff --git a/Src/WitsmlExplorer.Frontend/components/ContentViews/QueryView.tsx b/Src/WitsmlExplorer.Frontend/components/ContentViews/QueryView.tsx
index 7f41d7f6a..3b82d3315 100644
--- a/Src/WitsmlExplorer.Frontend/components/ContentViews/QueryView.tsx
+++ b/Src/WitsmlExplorer.Frontend/components/ContentViews/QueryView.tsx
@@ -1,4 +1,4 @@
-import { Button, Menu, Tabs, TextField } from "@equinor/eds-core-react";
+import { Menu, Tabs, TextField } from "@equinor/eds-core-react";
import {
ReturnElements,
StoreFunction,
@@ -11,6 +11,7 @@ import ConfirmModal from "components/Modals/ConfirmModal";
import { QueryEditor } from "components/QueryEditor";
import { getTag } from "components/QueryEditorUtils";
import { StyledNativeSelect } from "components/Select";
+import { Button } from "components/StyledComponents/Button";
import OperationContext from "contexts/operationContext";
import { DispatchOperation } from "contexts/operationStateReducer";
import OperationType from "contexts/operationType";
diff --git a/Src/WitsmlExplorer.Frontend/components/ContentViews/ServerManager.tsx b/Src/WitsmlExplorer.Frontend/components/ContentViews/ServerManager.tsx
index 46cf0d725..0724d6887 100644
--- a/Src/WitsmlExplorer.Frontend/components/ContentViews/ServerManager.tsx
+++ b/Src/WitsmlExplorer.Frontend/components/ContentViews/ServerManager.tsx
@@ -1,10 +1,5 @@
import { useIsAuthenticated } from "@azure/msal-react";
-import {
- Button,
- ButtonProps,
- Table,
- Typography
-} from "@equinor/eds-core-react";
+import { ButtonProps, Table, Typography } from "@equinor/eds-core-react";
import { useQueryClient } from "@tanstack/react-query";
import ServerModal, {
showDeleteServerModal
@@ -13,6 +8,7 @@ import UserCredentialsModal, {
UserCredentialsModalProps
} from "components/Modals/UserCredentialsModal";
import ProgressSpinner from "components/ProgressSpinner";
+import { Button } from "components/StyledComponents/Button";
import { useConnectedServer } from "contexts/connectedServerContext";
import { useLoggedInUsernames } from "contexts/loggedInUsernamesContext";
import { LoggedInUsernamesActionType } from "contexts/loggedInUsernamesReducer";
@@ -108,8 +104,7 @@ const ServerManager = (): React.ReactElement => {
>
Manage Connections
- {
>
New server
-
+
@@ -175,7 +170,11 @@ const ServerManager = (): React.ReactElement => {
onEditItem(server)}>
-
+
@@ -192,7 +191,11 @@ const ServerManager = (): React.ReactElement => {
)
}
>
-
+
@@ -279,9 +282,4 @@ const StyledLink = styled.a`
}
`;
-const StyledButton = styled(Button)<{ colors?: Colors }>`
- white-space: nowrap;
- color: ${(props) => props.colors.infographic.primaryMossGreen};
-`;
-
export default ServerManager;
diff --git a/Src/WitsmlExplorer.Frontend/components/ContentViews/__tests__/__snapshots__/WellboresListView.tests.tsx.snap b/Src/WitsmlExplorer.Frontend/components/ContentViews/__tests__/__snapshots__/WellboresListView.tests.tsx.snap
index 63d12144e..5b412e11a 100644
--- a/Src/WitsmlExplorer.Frontend/components/ContentViews/__tests__/__snapshots__/WellboresListView.tests.tsx.snap
+++ b/Src/WitsmlExplorer.Frontend/components/ContentViews/__tests__/__snapshots__/WellboresListView.tests.tsx.snap
@@ -7,7 +7,7 @@ exports[`Should render when selected well is not set 1`] = `
class="contentTableStyles__TableContainer-sc-rul7fz-0 MhSaI"
>
@@ -80,7 +80,7 @@ exports[`Should render when selected well is not set 1`] = `
@@ -267,7 +267,7 @@ exports[`Should render when selected well is not set 1`] = `
id=":r1:"
>
@@ -325,7 +325,7 @@ exports[`Should render when selected well is not set 1`] = `
style="padding: 0.125rem 0px 0.25rem 0px;"
>
@@ -413,14 +413,14 @@ exports[`Should render when selected well is not set 1`] = `
draggable="true"
>
name
@@ -476,7 +476,7 @@ exports[`Should render when selected well is not set 1`] = `
@@ -507,14 +507,14 @@ exports[`Should render when selected well is not set 1`] = `
draggable="true"
>
typeWellbore
@@ -570,7 +570,7 @@ exports[`Should render when selected well is not set 1`] = `
@@ -601,14 +601,14 @@ exports[`Should render when selected well is not set 1`] = `
draggable="true"
>
statusWellbore
@@ -664,7 +664,7 @@ exports[`Should render when selected well is not set 1`] = `
@@ -695,14 +695,14 @@ exports[`Should render when selected well is not set 1`] = `
draggable="true"
>
uid
@@ -758,7 +758,7 @@ exports[`Should render when selected well is not set 1`] = `
@@ -789,14 +789,14 @@ exports[`Should render when selected well is not set 1`] = `
draggable="true"
>
commonData.dTimCreation
@@ -852,7 +852,7 @@ exports[`Should render when selected well is not set 1`] = `
commonData.dTimLastChange
@@ -900,10 +900,10 @@ exports[`Should render when selected well is not set 1`] = `
@@ -914,7 +914,7 @@ exports[`Should render when selected well is not set 1`] = `
diff --git a/Src/WitsmlExplorer.Frontend/components/ContentViews/table/ColumnOptionsMenu.tsx b/Src/WitsmlExplorer.Frontend/components/ContentViews/table/ColumnOptionsMenu.tsx
index e92110b61..67d63fd1e 100644
--- a/Src/WitsmlExplorer.Frontend/components/ContentViews/table/ColumnOptionsMenu.tsx
+++ b/Src/WitsmlExplorer.Frontend/components/ContentViews/table/ColumnOptionsMenu.tsx
@@ -1,4 +1,4 @@
-import { Button, Icon, Menu, Typography } from "@equinor/eds-core-react";
+import { Icon, Menu, Typography } from "@equinor/eds-core-react";
import { Checkbox, useTheme } from "@material-ui/core";
import { Table } from "@tanstack/react-table";
import {
@@ -10,6 +10,7 @@ import {
ContentTableColumn,
ContentType
} from "components/ContentViews/table/tableParts";
+import { Button } from "components/StyledComponents/Button";
import OperationContext from "contexts/operationContext";
import { useLocalStorageState } from "hooks/useLocalStorageState";
import { useContext, useState } from "react";
@@ -119,7 +120,7 @@ export const ColumnOptionsMenu = (props: {
return (
<>
- setIsMenuOpen(!isMenuOpen)}
- colors={colors}
>
-
+