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} > - , + , ); }; 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 = [ , 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 => { @@ -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" >
` - color: ${(props) => props.colors.infographic.primaryMossGreen}; -`; - const OrderingRow = styled.div` display: grid; grid-template-columns: 20px 25px 25px 1fr; diff --git a/Src/WitsmlExplorer.Frontend/components/ContentViews/table/Panel.tsx b/Src/WitsmlExplorer.Frontend/components/ContentViews/table/Panel.tsx index c7e41550c..e09d98ef0 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContentViews/table/Panel.tsx +++ b/Src/WitsmlExplorer.Frontend/components/ContentViews/table/Panel.tsx @@ -1,7 +1,8 @@ -import { Button, EdsProvider, Typography } from "@equinor/eds-core-react"; +import { EdsProvider, Typography } from "@equinor/eds-core-react"; import { useQueryClient } from "@tanstack/react-query"; import { Table } from "@tanstack/react-table"; import { ColumnOptionsMenu } from "components/ContentViews/table/ColumnOptionsMenu"; +import { Button } from "components/StyledComponents/Button"; import OperationContext from "contexts/operationContext"; import { refreshObjectQuery, @@ -14,7 +15,6 @@ import { ObjectType } from "models/objectType"; import React, { useCallback, useContext, useEffect } from "react"; import { useParams } from "react-router-dom"; import styled from "styled-components"; -import { Colors } from "styles/Colors"; import Icon from "styles/Icons"; import { ContentTableColumn } from "."; @@ -49,7 +49,7 @@ const Panel = (props: PanelProps) => { stickyLeftColumns } = props; const { - operationState: { theme, colors } + operationState: { theme } } = useContext(OperationContext); const { exportData, exportOptions } = useExport(); const abortRefreshControllerRef = React.useRef(); @@ -136,26 +136,24 @@ const Panel = (props: PanelProps) => { firstToggleableIndex={firstToggleableIndex} /> {showRefresh && ( - - + )} {downloadToCsvFileName != null && ( - - + )} {panelElements} @@ -163,10 +161,6 @@ const Panel = (props: PanelProps) => { ); }; -const StyledButton = styled(Button)<{ colors: Colors }>` - color: ${(props) => props.colors.infographic.primaryMossGreen}; -`; - const PanelContainer = styled.div` display: flex; flex-wrap: wrap; diff --git a/Src/WitsmlExplorer.Frontend/components/JobsButton.tsx b/Src/WitsmlExplorer.Frontend/components/JobsButton.tsx deleted file mode 100644 index 90d42a45b..000000000 --- a/Src/WitsmlExplorer.Frontend/components/JobsButton.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import { Button } from "@equinor/eds-core-react"; -import { useConnectedServer } from "contexts/connectedServerContext"; -import OperationContext from "contexts/operationContext"; -import React, { useContext } from "react"; -import { useNavigate } from "react-router-dom"; -import { getJobsViewPath } from "routes/utils/pathBuilder"; -import styled from "styled-components"; -import { Colors } from "styles/Colors"; -import Icon from "styles/Icons"; - -export interface JobsButtonProps { - showLabels: boolean; -} - -const JobsButton = (props: JobsButtonProps): React.ReactElement => { - const { - operationState: { colors } - } = useContext(OperationContext); - const { connectedServer } = useConnectedServer(); - const navigate = useNavigate(); - - const onClick = () => { - navigate(getJobsViewPath(connectedServer?.url)); - }; - - return ( - - - {props.showLabels && "Jobs"} - - ); -}; - -const StyledButton = styled(Button)<{ colors: Colors }>` - white-space: nowrap; - color: ${(props) => props.colors.infographic.primaryMossGreen}; -`; - -export default JobsButton; diff --git a/Src/WitsmlExplorer.Frontend/components/Modals/ConfirmModal.tsx b/Src/WitsmlExplorer.Frontend/components/Modals/ConfirmModal.tsx index bf3959c53..2d277c36d 100644 --- a/Src/WitsmlExplorer.Frontend/components/Modals/ConfirmModal.tsx +++ b/Src/WitsmlExplorer.Frontend/components/Modals/ConfirmModal.tsx @@ -5,7 +5,7 @@ interface ConfirmProps { heading: string; content: ReactElement; onConfirm: () => void; - confirmColor?: "default" | "inherit" | "primary" | "secondary" | "danger"; + confirmColor?: "primary" | "secondary" | "danger"; confirmText?: string; switchButtonPlaces?: boolean; showCancelButton?: boolean; diff --git a/Src/WitsmlExplorer.Frontend/components/Modals/LogCurvePriorityModal.tsx b/Src/WitsmlExplorer.Frontend/components/Modals/LogCurvePriorityModal.tsx index 33ab478db..dd2958693 100644 --- a/Src/WitsmlExplorer.Frontend/components/Modals/LogCurvePriorityModal.tsx +++ b/Src/WitsmlExplorer.Frontend/components/Modals/LogCurvePriorityModal.tsx @@ -1,4 +1,5 @@ -import { Button, Icon, TextField } from "@equinor/eds-core-react"; +import { Icon, TextField } from "@equinor/eds-core-react"; +import { Button } from "components/StyledComponents/Button"; import React, { ChangeEvent, useContext, useState } from "react"; import styled from "styled-components"; import OperationContext from "../../contexts/operationContext"; diff --git a/Src/WitsmlExplorer.Frontend/components/Modals/MissingDataAgentModal.tsx b/Src/WitsmlExplorer.Frontend/components/Modals/MissingDataAgentModal.tsx index 73846673c..ce5692af8 100644 --- a/Src/WitsmlExplorer.Frontend/components/Modals/MissingDataAgentModal.tsx +++ b/Src/WitsmlExplorer.Frontend/components/Modals/MissingDataAgentModal.tsx @@ -1,7 +1,6 @@ import { Accordion, Autocomplete, - Button, Icon, Typography } from "@equinor/eds-core-react"; @@ -16,6 +15,7 @@ import ModalDialog, { ModalWidth } from "components/Modals/ModalDialog"; import { ReportModal } from "components/Modals/ReportModal"; +import { Button } from "components/StyledComponents/Button"; import OperationContext from "contexts/operationContext"; import OperationType from "contexts/operationType"; import useExport from "hooks/useExport"; @@ -27,7 +27,6 @@ import { ObjectType } from "models/objectType"; import { useContext, useRef, useState } from "react"; import JobService, { JobType } from "services/jobService"; import styled from "styled-components"; -import { Colors } from "styles/Colors"; import { STORAGE_MISSING_DATA_AGENT_CHECKS_KEY } from "tools/localStorageHelpers"; import { v4 as uuid } from "uuid"; @@ -302,9 +301,13 @@ const MissingDataAgentModal = ( ))} - +
` - align-self: center; -`; diff --git a/Src/WitsmlExplorer.Frontend/components/Modals/ModalDialog.tsx b/Src/WitsmlExplorer.Frontend/components/Modals/ModalDialog.tsx index bc6f2fab6..da023bf0e 100644 --- a/Src/WitsmlExplorer.Frontend/components/Modals/ModalDialog.tsx +++ b/Src/WitsmlExplorer.Frontend/components/Modals/ModalDialog.tsx @@ -1,4 +1,5 @@ -import { Button, Dialog, Progress, Typography } from "@equinor/eds-core-react"; +import { Dialog, Progress, Typography } from "@equinor/eds-core-react"; +import { Button } from "components/StyledComponents/Button"; import OperationContext from "contexts/operationContext"; import OperationType from "contexts/operationType"; import React, { ReactElement, useState } from "react"; @@ -13,7 +14,7 @@ interface ModalDialogProps { content: ReactElement; onSubmit: () => void; isLoading: boolean; - confirmColor?: "default" | "inherit" | "primary" | "secondary" | "danger"; + confirmColor?: "primary" | "secondary" | "danger"; confirmText?: string; confirmDisabled?: boolean; switchButtonPlaces?: boolean; @@ -80,8 +81,6 @@ const ModalDialog = (props: ModalDialogProps): React.ReactElement => { onClick={onSubmit} color={confirmColor ?? "primary"} variant="contained" - confirmButtonIsDisabled={confirmButtonIsDisabled} - colors={colors} > {ButtonPosition == ControlButtonPosition.TOP ? ( @@ -96,7 +95,6 @@ const ModalDialog = (props: ModalDialogProps): React.ReactElement => { ), showCancelButton ? ( ` : ""}; `; -const StyledButton = styled(Button)<{ - align?: string; - colors?: Colors; - confirmButtonIsDisabled: boolean; -}>` - ${(props) => (props.colors === dark ? `color:white` : "")}; - ${(props) => - props.confirmButtonIsDisabled && props.colors === dark - ? ` - &&:disabled { - background: #565656; - border:1px solid #565656; - color:#9CA6AC; - }` - : ""}; - &&& { - ${({ align }) => - align === "right" ? `margin-left: auto;` : "margin: 0.5em;"}; - } -`; - const DialogHeader = styled(Dialog.Header)<{ colors: Colors }>` hr { background-color: ${(props) => props.colors.interactive.disabledBorder}; } `; +const StyledButton = styled(Button)<{ align?: string }>` + &&& { + ${({ align }) => + align === "right" ? `margin-left: auto;` : "margin: 0.5em;"}; + } +`; + export default ModalDialog; diff --git a/Src/WitsmlExplorer.Frontend/components/Modals/ObjectPickerModal.tsx b/Src/WitsmlExplorer.Frontend/components/Modals/ObjectPickerModal.tsx index 3e8293bf5..5649e9403 100644 --- a/Src/WitsmlExplorer.Frontend/components/Modals/ObjectPickerModal.tsx +++ b/Src/WitsmlExplorer.Frontend/components/Modals/ObjectPickerModal.tsx @@ -1,10 +1,11 @@ -import { Autocomplete, Button, TextField } from "@equinor/eds-core-react"; +import { Autocomplete, TextField } from "@equinor/eds-core-react"; import { useClipboardReferencesOfType } from "components/ContextMenus/UseClipboardReferences"; import ModalDialog, { ModalContentLayout, ModalWidth } from "components/Modals/ModalDialog"; import { Banner } from "components/StyledComponents/Banner"; +import { Button } from "components/StyledComponents/Button"; import { Checkbox } from "components/StyledComponents/Checkbox"; import OperationContext from "contexts/operationContext"; import OperationType from "contexts/operationType"; diff --git a/Src/WitsmlExplorer.Frontend/components/Modals/ServerModal.tsx b/Src/WitsmlExplorer.Frontend/components/Modals/ServerModal.tsx index 9a2c785be..9d562187f 100644 --- a/Src/WitsmlExplorer.Frontend/components/Modals/ServerModal.tsx +++ b/Src/WitsmlExplorer.Frontend/components/Modals/ServerModal.tsx @@ -1,10 +1,4 @@ -import { - Button, - Icon, - Label, - TextField, - Tooltip -} from "@equinor/eds-core-react"; +import { Icon, Label, TextField, Tooltip } from "@equinor/eds-core-react"; import { CSSProperties } from "@material-ui/core/styles/withStyles"; import { QueryClient, useQueryClient } from "@tanstack/react-query"; import ModalDialog, { @@ -14,6 +8,7 @@ import ModalDialog, { import UserCredentialsModal, { UserCredentialsModalProps } from "components/Modals/UserCredentialsModal"; +import { Button } from "components/StyledComponents/Button"; import { useConnectedServer } from "contexts/connectedServerContext"; import OperationContext from "contexts/operationContext"; import { @@ -35,7 +30,6 @@ import AuthorizationService from "services/authorizationService"; import NotificationService from "services/notificationService"; import ServerService from "services/serverService"; import styled from "styled-components"; -import { Colors } from "styles/Colors"; import Icons from "styles/Icons"; export interface ServerModalProps { @@ -266,15 +260,13 @@ const ServerModal = (props: ServerModalProps): React.ReactElement => { size={32} /> )} - {"Test connection"} - + @@ -359,9 +351,4 @@ const ButtonWrapper = styled.div` justify-content: flex-end; `; -const StyledButton = styled(Button)<{ colors: Colors }>` - white-space: nowrap; - color: ${(props) => props.colors.infographic.primaryMossGreen}; -`; - export default ServerModal; diff --git a/Src/WitsmlExplorer.Frontend/components/Modals/SettingsModal.tsx b/Src/WitsmlExplorer.Frontend/components/Modals/SettingsModal.tsx index b1f8ab2b1..400987d11 100644 --- a/Src/WitsmlExplorer.Frontend/components/Modals/SettingsModal.tsx +++ b/Src/WitsmlExplorer.Frontend/components/Modals/SettingsModal.tsx @@ -1,8 +1,9 @@ -import { Button, Radio, TextField } from "@equinor/eds-core-react"; +import { Radio, TextField } from "@equinor/eds-core-react"; import { Typography } from "@material-ui/core"; import { getOffsetFromTimeZone } from "components/DateFormatter"; import ModalDialog from "components/Modals/ModalDialog"; import { StyledNativeSelect } from "components/Select"; +import { Button } from "components/StyledComponents/Button"; import OperationContext from "contexts/operationContext"; import { DateTimeFormat, diff --git a/Src/WitsmlExplorer.Frontend/components/Modals/UserCredentialsModal.tsx b/Src/WitsmlExplorer.Frontend/components/Modals/UserCredentialsModal.tsx index 269141540..d02ac9be0 100644 --- a/Src/WitsmlExplorer.Frontend/components/Modals/UserCredentialsModal.tsx +++ b/Src/WitsmlExplorer.Frontend/components/Modals/UserCredentialsModal.tsx @@ -1,11 +1,7 @@ -import { - Autocomplete, - Button, - TextField, - Typography -} from "@equinor/eds-core-react"; +import { Autocomplete, TextField, Typography } from "@equinor/eds-core-react"; import ModalDialog, { ModalWidth } from "components/Modals/ModalDialog"; import { validText } from "components/Modals/ModalParts"; +import { Button } from "components/StyledComponents/Button"; import { Checkbox } from "components/StyledComponents/Checkbox"; import OperationContext from "contexts/operationContext"; import OperationType from "contexts/operationType"; diff --git a/Src/WitsmlExplorer.Frontend/components/Modals/__tests__/LogCurveInfoPropertiesModal.test.tsx b/Src/WitsmlExplorer.Frontend/components/Modals/__tests__/LogCurveInfoPropertiesModal.test.tsx index bfd337bed..5a5dd9c08 100644 --- a/Src/WitsmlExplorer.Frontend/components/Modals/__tests__/LogCurveInfoPropertiesModal.test.tsx +++ b/Src/WitsmlExplorer.Frontend/components/Modals/__tests__/LogCurveInfoPropertiesModal.test.tsx @@ -1,11 +1,12 @@ import "@testing-library/jest-dom"; -import { render, screen } from "@testing-library/react"; +import { screen } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { mockEdsCoreReact } from "__testUtils__/mocks/EDSMocks"; import { getAxisDefinition, getLogCurveInfo, - getLogObject + getLogObject, + renderWithContexts } from "__testUtils__/testUtils"; import LogCurveInfoPropertiesModal, { LogCurveInfoPropertiesModalProps @@ -31,7 +32,7 @@ const propsWithAxisDefinition: LogCurveInfoPropertiesModalProps = { it("Properties of a LogCurve should be shown in the modal", async () => { const expectedLogCurveInfo = simpleProps.logCurveInfo; - render(); + renderWithContexts(); const uidInput = screen.getByRole("textbox", { name: /uid/i }); const mnemonicInput = screen.getByRole("textbox", { name: /mnemonic/i }); @@ -47,7 +48,9 @@ it("AxisDefinition should be shown readonly in the LogCurveInfo modal when inclu const expectedLogCurveInfo = propsWithAxisDefinition.logCurveInfo; const expectedAxisDefinition = expectedLogCurveInfo.axisDefinitions[0]; - render(); + renderWithContexts( + + ); const uidInput = screen.getByRole("textbox", { name: /uid/i }); const mnemonicInput = screen.getByRole("textbox", { name: /mnemonic/i }); @@ -78,7 +81,7 @@ it("Saving edited properties of a LogCurve should result in the order of a job", const user = userEvent.setup(); - render(); + renderWithContexts(); const mnemonicInput = screen.getByRole("textbox", { name: /mnemonic/i }); const saveButton = screen.getByRole("button", { name: /save/i }); diff --git a/Src/WitsmlExplorer.Frontend/components/PageLayout.tsx b/Src/WitsmlExplorer.Frontend/components/PageLayout.tsx index b500a0cbc..1b6720335 100644 --- a/Src/WitsmlExplorer.Frontend/components/PageLayout.tsx +++ b/Src/WitsmlExplorer.Frontend/components/PageLayout.tsx @@ -1,11 +1,12 @@ import { useIsAuthenticated } from "@azure/msal-react"; -import { Button, Icon, Typography } from "@equinor/eds-core-react"; +import { Icon, Typography } from "@equinor/eds-core-react"; import Alerts from "components/Alerts"; import ContentView from "components/ContentView"; import { preventContextMenuPropagation } from "components/ContextMenus/ContextMenu"; import Nav from "components/Nav"; import PropertiesPanel from "components/PropertiesPanel"; import Sidebar from "components/Sidebar/Sidebar"; +import { Button } from "components/StyledComponents/Button"; import OperationContext from "contexts/operationContext"; import useDocumentDimensions from "hooks/useDocumentDimensions"; import { msalEnabled } from "msal/MsalAuthProvider"; @@ -115,12 +116,14 @@ const PageLayout = (): ReactElement => { diff --git a/Src/WitsmlExplorer.Frontend/components/ServerManagerButton.tsx b/Src/WitsmlExplorer.Frontend/components/ServerManagerButton.tsx deleted file mode 100644 index 342b7b13e..000000000 --- a/Src/WitsmlExplorer.Frontend/components/ServerManagerButton.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { Button } from "@equinor/eds-core-react"; -import { useConnectedServer } from "contexts/connectedServerContext"; -import OperationContext from "contexts/operationContext"; -import React, { useContext } from "react"; -import { useNavigate } from "react-router-dom"; -import styled from "styled-components"; -import { Colors } from "styles/Colors"; -import Icon from "styles/Icons"; - -export interface ServerManagerButtonProps { - showLabels: boolean; -} - -const ServerManagerButton = ( - props: ServerManagerButtonProps -): React.ReactElement => { - const { connectedServer } = useConnectedServer(); - const { - operationState: { colors } - } = useContext(OperationContext); - const navigate = useNavigate(); - - const onClick = () => { - navigate("/"); - }; - - const isConnected = !!connectedServer; - return ( - - - {props.showLabels && - (isConnected ? "Server Connections" : "No Connection")} - - ); -}; - -const StyledButton = styled(Button)<{ colors: Colors }>` - white-space: nowrap; - color: ${(props) => props.colors.infographic.primaryMossGreen}; -`; - -export default ServerManagerButton; diff --git a/Src/WitsmlExplorer.Frontend/components/Sidebar/SearchFilter.tsx b/Src/WitsmlExplorer.Frontend/components/Sidebar/SearchFilter.tsx index 6ba024872..402461ca6 100644 --- a/Src/WitsmlExplorer.Frontend/components/Sidebar/SearchFilter.tsx +++ b/Src/WitsmlExplorer.Frontend/components/Sidebar/SearchFilter.tsx @@ -1,10 +1,11 @@ -import { Button, EdsProvider, Icon } from "@equinor/eds-core-react"; +import { EdsProvider, Icon } from "@equinor/eds-core-react"; import { Divider, TextField } from "@material-ui/core"; import { pluralize } from "components/ContextMenus/ContextMenuUtils"; import OptionsContextMenu, { OptionsContextMenuProps } from "components/ContextMenus/OptionsContextMenu"; import FilterPanel from "components/Sidebar/FilterPanel"; +import { Button } from "components/StyledComponents/Button"; import { useConnectedServer } from "contexts/connectedServerContext"; import { FilterContext, diff --git a/Src/WitsmlExplorer.Frontend/components/StyledComponents/Button.tsx b/Src/WitsmlExplorer.Frontend/components/StyledComponents/Button.tsx new file mode 100644 index 000000000..1177694db --- /dev/null +++ b/Src/WitsmlExplorer.Frontend/components/StyledComponents/Button.tsx @@ -0,0 +1,56 @@ +import { ButtonProps, Button as EdsButton } from "@equinor/eds-core-react"; +import OperationContext from "contexts/operationContext"; +import React, { useContext } from "react"; +import styled from "styled-components"; +import { Colors } from "styles/Colors"; + +export type Ref = HTMLButtonElement; + +export const Button = React.forwardRef((props, ref) => { + const { + operationState: { colors } + } = useContext(OperationContext); + + if (!props.variant || props.variant === "contained") { + return ; + } else if (props.variant === "contained_icon") { + return ; + } else if (props.variant === "outlined") { + return ; + } else if (props.variant === "ghost") { + return ; + } else if (props.variant === "ghost_icon") { + return ; + } else { + throw Error(`Button variant ${props.variant} is not supported!`); + } +}); + +Button.displayName = "WitsmlExplorerButton"; + +const ContainedButton = styled(EdsButton)<{ colors: Colors }>` + ${(props) => + props?.colors?.mode === "dark" + ? ` + &&:disabled { + background: #565656; + border:1px solid #565656; + color:#9CA6AC; + }` + : ""}; +`; + +const GhostButton = styled(EdsButton)<{ colors: Colors }>` + white-space: nowrap; + color: ${(props) => props.colors.infographic.primaryMossGreen}; +`; + +const GhostIconButton = styled(EdsButton)<{ colors: Colors }>` + white-space: nowrap; + color: ${(props) => props.colors.infographic.primaryMossGreen}; +`; + +const OutlinedButton = styled(EdsButton)<{ colors: Colors }>` + white-space: nowrap; + color: ${(props) => props.colors.infographic.primaryMossGreen}; +`; diff --git a/Src/WitsmlExplorer.Frontend/components/TopRightCornerMenu.tsx b/Src/WitsmlExplorer.Frontend/components/TopRightCornerMenu.tsx index b7f35d4d8..603bcfa8f 100644 --- a/Src/WitsmlExplorer.Frontend/components/TopRightCornerMenu.tsx +++ b/Src/WitsmlExplorer.Frontend/components/TopRightCornerMenu.tsx @@ -1,10 +1,8 @@ -import { Button } from "@equinor/eds-core-react"; -import JobsButton from "components/JobsButton"; import { SettingsModal } from "components/Modals/SettingsModal"; import UserCredentialsModal, { UserCredentialsModalProps } from "components/Modals/UserCredentialsModal"; -import ServerManagerButton from "components/ServerManagerButton"; +import { Button } from "components/StyledComponents/Button"; import { useConnectedServer } from "contexts/connectedServerContext"; import { useLoggedInUsernames } from "contexts/loggedInUsernamesContext"; import { LoggedInUsernamesActionType } from "contexts/loggedInUsernamesReducer"; @@ -13,17 +11,13 @@ import OperationType from "contexts/operationType"; import useDocumentDimensions from "hooks/useDocumentDimensions"; import { useContext } from "react"; import { useNavigate } from "react-router-dom"; -import { getQueryViewPath } from "routes/utils/pathBuilder"; +import { getJobsViewPath, getQueryViewPath } from "routes/utils/pathBuilder"; import AuthorizationService from "services/authorizationService"; import styled from "styled-components"; -import { Colors } from "styles/Colors"; import Icon from "styles/Icons"; export default function TopRightCornerMenu() { - const { - operationState: { colors }, - dispatchOperation - } = useContext(OperationContext); + const { dispatchOperation } = useContext(OperationContext); const { width: documentWidth } = useDocumentDimensions(); const showLabels = documentWidth > 1180; const { connectedServer } = useConnectedServer(); @@ -55,6 +49,14 @@ export default function TopRightCornerMenu() { }); }; + const openServerManagerView = () => { + navigate("/"); + }; + + const openJobsView = () => { + navigate(getJobsViewPath(connectedServer?.url)); + }; + const openQueryView = () => { navigate(getQueryViewPath(connectedServer?.url)); }; @@ -63,34 +65,45 @@ export default function TopRightCornerMenu() { return ( {isConnected && ( - {showLabels && connectedServer?.currentUsername} - + )} - - - + + {showLabels && (isConnected ? "Server Connections" : "No Connection")} + + + ); } @@ -102,8 +115,3 @@ const Layout = styled.div` padding-right: 1rem; width: auto; `; - -const StyledButton = styled(Button)<{ colors: Colors }>` - color: ${(props) => props.colors.infographic.primaryMossGreen}; - white-space: nowrap; -`;