From 4f1e38ba9675616239318f21036d0ac7d86e2763 Mon Sep 17 00:00:00 2001 From: Sevo Kukol Date: Tue, 12 Sep 2023 13:28:27 +0200 Subject: [PATCH] Use separate StyleConstants We want to have more flexibility with Styles at runtime but Constants depend on ConfigContext and therefore get loaded very early at startup. --- src/Common/Constants.ts | 3 --- src/Common/StyleConstants.ts | 2 ++ src/Controls/Heatmap/Heatmap.ts | 2 +- .../QueriesGridComponent.tsx | 2 +- .../Controls/Settings/SettingsRenderUtils.tsx | 11 ++++++----- src/Explorer/Controls/TreeComponent/TreeComponent.tsx | 3 ++- .../Menus/CommandBar/CommandBarComponentAdapter.tsx | 3 ++- src/Explorer/Menus/CommandBar/CommandBarUtil.tsx | 3 ++- src/Explorer/Notebook/NotebookRenderer/StatusBar.tsx | 2 +- src/Explorer/QueryCopilot/CopilotCarousel.tsx | 3 ++- src/Platform/Hosted/Components/AccountSwitcher.tsx | 2 +- src/SelfServe/SelfServeStyles.tsx | 2 +- 12 files changed, 21 insertions(+), 17 deletions(-) create mode 100644 src/Common/StyleConstants.ts diff --git a/src/Common/Constants.ts b/src/Common/Constants.ts index 51df6e94f..80d665e62 100644 --- a/src/Common/Constants.ts +++ b/src/Common/Constants.ts @@ -365,9 +365,6 @@ export const EmulatorMasterKey = //[SuppressMessage("Microsoft.Security", "CS002:SecretInNextLine", Justification="Well known public masterKey for emulator")] "C2y6yDjf5/R+ob0N8A7Cgv30VRDJIWEHLM+4QDU5DE2nQ9nDuVTqobD4b8mGGyPMbIZnqyMsEcaGQy67XIw/Jw=="; -// A variable @MyVariable defined in Constants.less is accessible as StyleConstants.MyVariable -export const StyleConstants = require("less-vars-loader!../../less/Common/Constants.less"); - export class Notebook { public static readonly defaultBasePath = "./notebooks"; public static readonly heartbeatDelayMs = 60000; diff --git a/src/Common/StyleConstants.ts b/src/Common/StyleConstants.ts new file mode 100644 index 000000000..bc682eb29 --- /dev/null +++ b/src/Common/StyleConstants.ts @@ -0,0 +1,2 @@ +export let StyleConstants = require("less-vars-loader!../../less/Common/Constants.less"); + diff --git a/src/Controls/Heatmap/Heatmap.ts b/src/Controls/Heatmap/Heatmap.ts index 0b9c3b796..6d2fa7bfb 100644 --- a/src/Controls/Heatmap/Heatmap.ts +++ b/src/Controls/Heatmap/Heatmap.ts @@ -1,7 +1,7 @@ import dayjs from "dayjs"; import * as Plotly from "plotly.js-cartesian-dist-min"; -import { StyleConstants } from "../../Common/Constants"; import { sendCachedDataMessage, sendReadyMessage } from "../../Common/MessageHandler"; +import { StyleConstants } from "../../Common/StyleConstants"; import { MessageTypes } from "../../Contracts/ExplorerContracts"; import { isInvalidParentFrameOrigin } from "../../Utils/MessageValidation"; import "./Heatmap.less"; diff --git a/src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponent.tsx b/src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponent.tsx index 236dea5c3..4909e0863 100644 --- a/src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponent.tsx +++ b/src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponent.tsx @@ -23,9 +23,9 @@ import * as React from "react"; import * as _ from "underscore"; import SaveQueryBannerIcon from "../../../../images/save_query_banner.png"; import * as Constants from "../../../Common/Constants"; -import { StyleConstants } from "../../../Common/Constants"; import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils"; import { QueriesClient } from "../../../Common/QueriesClient"; +import { StyleConstants } from "../../../Common/StyleConstants"; import * as DataModels from "../../../Contracts/DataModels"; import { Action } from "../../../Shared/Telemetry/TelemetryConstants"; import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor"; diff --git a/src/Explorer/Controls/Settings/SettingsRenderUtils.tsx b/src/Explorer/Controls/Settings/SettingsRenderUtils.tsx index b2c5c7c73..961ed8db8 100644 --- a/src/Explorer/Controls/Settings/SettingsRenderUtils.tsx +++ b/src/Explorer/Controls/Settings/SettingsRenderUtils.tsx @@ -23,7 +23,8 @@ import { Text, } from "@fluentui/react"; import * as React from "react"; -import { StyleConstants, Urls } from "../../../Common/Constants"; +import { Urls } from "../../../Common/Constants"; +import { StyleConstants } from "../../../Common/StyleConstants"; import { hoursInAMonth } from "../../../Shared/Constants"; import { computeRUUsagePriceHourly, @@ -338,10 +339,10 @@ const getCurrentThroughput = ( if (throughput) { return isAutoscale ? `, Current autoscale throughput: ${Math.round( - throughput / 10 - )} - ${throughput} ${throughputUnit}, Target autoscale throughput: ${Math.round( - targetThroughput / 10 - )} - ${targetThroughput} ${throughputUnit}` + throughput / 10 + )} - ${throughput} ${throughputUnit}, Target autoscale throughput: ${Math.round( + targetThroughput / 10 + )} - ${targetThroughput} ${throughputUnit}` : `, Current manual throughput: ${throughput} ${throughputUnit}, Target manual throughput: ${targetThroughput}`; } else { return isAutoscale diff --git a/src/Explorer/Controls/TreeComponent/TreeComponent.tsx b/src/Explorer/Controls/TreeComponent/TreeComponent.tsx index 135f390f9..5a9d45cfe 100644 --- a/src/Explorer/Controls/TreeComponent/TreeComponent.tsx +++ b/src/Explorer/Controls/TreeComponent/TreeComponent.tsx @@ -18,6 +18,7 @@ import LoadingIndicator_3Squares from "../../../../images/LoadingIndicator_3Squa import TriangleDownIcon from "../../../../images/Triangle-down.svg"; import TriangleRightIcon from "../../../../images/Triangle-right.svg"; import * as Constants from "../../../Common/Constants"; +import { StyleConstants } from "../../../Common/StyleConstants"; import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants"; import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor"; @@ -237,7 +238,7 @@ export class TreeNodeComponent extends React.Component = { - rootFocused: { outline: `1px dashed ${Constants.StyleConstants.FocusColor}` }, + rootFocused: { outline: `1px dashed ${StyleConstants.FocusColor}` }, }; return ( diff --git a/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx b/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx index 3eaf0507b..1fcdb8ceb 100644 --- a/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx +++ b/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx @@ -8,7 +8,8 @@ import { useNotebook } from "Explorer/Notebook/useNotebook"; import { userContext } from "UserContext"; import * as React from "react"; import create, { UseStore } from "zustand"; -import { ConnectionStatusType, PoolIdType, StyleConstants } from "../../../Common/Constants"; +import { ConnectionStatusType, PoolIdType } from "../../../Common/Constants"; +import { StyleConstants } from "../../../Common/StyleConstants"; import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent"; import Explorer from "../../Explorer"; import { useSelectedNode } from "../../useSelectedNode"; diff --git a/src/Explorer/Menus/CommandBar/CommandBarUtil.tsx b/src/Explorer/Menus/CommandBar/CommandBarUtil.tsx index c3172da63..220b19397 100644 --- a/src/Explorer/Menus/CommandBar/CommandBarUtil.tsx +++ b/src/Explorer/Menus/CommandBar/CommandBarUtil.tsx @@ -9,7 +9,8 @@ import { import * as React from "react"; import _ from "underscore"; import ChevronDownIcon from "../../../../images/Chevron_down.svg"; -import { PoolIdType, StyleConstants } from "../../../Common/Constants"; +import { PoolIdType } from "../../../Common/Constants"; +import { StyleConstants } from "../../../Common/StyleConstants"; import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants"; import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor"; import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent"; diff --git a/src/Explorer/Notebook/NotebookRenderer/StatusBar.tsx b/src/Explorer/Notebook/NotebookRenderer/StatusBar.tsx index 3b00a20a0..3beacfda0 100644 --- a/src/Explorer/Notebook/NotebookRenderer/StatusBar.tsx +++ b/src/Explorer/Notebook/NotebookRenderer/StatusBar.tsx @@ -3,7 +3,7 @@ import distanceInWordsToNow from "date-fns/distance_in_words_to_now"; import React from "react"; import { connect } from "react-redux"; import styled from "styled-components"; -import { StyleConstants } from "../../../Common/Constants"; +import { StyleConstants } from "../../../Common/StyleConstants"; interface Props { lastSaved?: Date | null; diff --git a/src/Explorer/QueryCopilot/CopilotCarousel.tsx b/src/Explorer/QueryCopilot/CopilotCarousel.tsx index 990f79c36..d61924faf 100644 --- a/src/Explorer/QueryCopilot/CopilotCarousel.tsx +++ b/src/Explorer/QueryCopilot/CopilotCarousel.tsx @@ -11,8 +11,9 @@ import { Stack, Text, } from "@fluentui/react"; -import { QueryCopilotSampleDatabaseId, StyleConstants } from "Common/Constants"; +import { QueryCopilotSampleDatabaseId } from "Common/Constants"; import { handleError } from "Common/ErrorHandlingUtils"; +import { StyleConstants } from "Common/StyleConstants"; import { createCollection } from "Common/dataAccess/createCollection"; import * as DataModels from "Contracts/DataModels"; import { ContainerSampleGenerator } from "Explorer/DataSamples/ContainerSampleGenerator"; diff --git a/src/Platform/Hosted/Components/AccountSwitcher.tsx b/src/Platform/Hosted/Components/AccountSwitcher.tsx index c1085e0fc..d5690e848 100644 --- a/src/Platform/Hosted/Components/AccountSwitcher.tsx +++ b/src/Platform/Hosted/Components/AccountSwitcher.tsx @@ -4,7 +4,7 @@ import { DefaultButton, IButtonStyles, IContextualMenuItem } from "@fluentui/react"; import * as React from "react"; import { FunctionComponent, useEffect, useState } from "react"; -import { StyleConstants } from "../../../Common/Constants"; +import { StyleConstants } from "../../../Common/StyleConstants"; import { DatabaseAccount } from "../../../Contracts/DataModels"; import { useDatabaseAccounts } from "../../../hooks/useDatabaseAccounts"; import { useSubscriptions } from "../../../hooks/useSubscriptions"; diff --git a/src/SelfServe/SelfServeStyles.tsx b/src/SelfServe/SelfServeStyles.tsx index 58688b505..5563286a5 100644 --- a/src/SelfServe/SelfServeStyles.tsx +++ b/src/SelfServe/SelfServeStyles.tsx @@ -1,5 +1,5 @@ import { IButtonStyles, ICommandBarStyles, ISeparatorStyles, IStackTokens } from "@fluentui/react"; -import { StyleConstants } from "../Common/Constants"; +import { StyleConstants } from "../Common/StyleConstants"; export const commandBarItemStyles: IButtonStyles = { root: { paddingLeft: 20 } };