UIE-120 Replace colors with useThemeFromContext in ErrorView and depe…

…ndants. (#4611)
DataBiosphere · Mar 15, 2024 · 9b5d671 · 9b5d671
1 parent fa90f41
commit 9b5d671
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 11 deletions.
diff --git a/src/components/ErrorView.js b/src/components/ErrorView.js
@@ -1,11 +1,11 @@
+import { useThemeFromContext } from '@terra-ui-packages/components';
 import { cond, maybeParseJSON } from '@terra-ui-packages/core-utils';
 import _ from 'lodash/fp';
 import { Fragment } from 'react';
 import { div, h, iframe } from 'react-hyperscript-helpers';
-import colors from 'src/libs/colors';
 import * as Style from 'src/libs/style';
 
-export const styles = {
+export const getStyles = (colors) => ({
   htmlFrame: {
     width: '100%',
     border: Style.standardLine,
@@ -22,9 +22,12 @@ export const styles = {
     fontFamily: 'Menlo, monospace',
     maxHeight: 400,
   },
-};
+});
 
 const ErrorView = ({ error }) => {
+  const { colors } = useThemeFromContext();
+  const styles = getStyles(colors);
+
   return div({ style: { marginTop: '1rem' } }, [
     cond(
       [_.isError(error), () => error.message],

diff --git a/src/workflows-app/components/ImportWorkflowModal.ts b/src/workflows-app/components/ImportWorkflowModal.ts
@@ -1,10 +1,10 @@
+import { useThemeFromContext } from '@terra-ui-packages/components';
 import { Modal } from '@terra-ui-packages/components';
 import { CSSProperties } from 'react';
 import { div, h } from 'react-hyperscript-helpers';
 import { ButtonPrimary, ButtonSecondary, Link } from 'src/components/common';
-import { styles as errorStyles } from 'src/components/ErrorView';
+import { getStyles as getErrorStyles } from 'src/components/ErrorView';
 import { centeredSpinner, icon } from 'src/components/icons';
-import colors from 'src/libs/colors';
 import * as Nav from 'src/libs/nav';
 import * as Utils from 'src/libs/utils';
 import { WorkspaceWrapper } from 'src/workspaces/utils';
@@ -32,6 +32,8 @@ export const ImportWorkflowModal = ({
   successfulImport,
   errorMessage,
 }: ImportWorkflowModalProps) => {
+  const { colors } = useThemeFromContext();
+  const errorStyles = getErrorStyles(colors);
   const successBody = () => {
     return div({}, [
       div({ style: { paddingBottom: '1.5rem', display: 'flex', flex: 'none' } }, [
@@ -101,9 +103,12 @@ export const ImportWorkflowModal = ({
             ),
         ]),
       ]),
-      div({ style: { ...(errorStyles.jsonFrame as CSSProperties), overflowY: 'scroll', maxHeight: 150 } }, [
-        errorMessage,
-      ]),
+      div(
+        {
+          style: { ...(errorStyles.jsonFrame as CSSProperties), overflowY: 'scroll', maxHeight: 150 },
+        },
+        [errorMessage]
+      ),
     ]);
   };
 

diff --git a/src/workflows-app/components/SubmitWorkflowModal.ts b/src/workflows-app/components/SubmitWorkflowModal.ts
@@ -1,18 +1,17 @@
-import { Modal, Spinner } from '@terra-ui-packages/components';
+import { Modal, Spinner, useThemeFromContext } from '@terra-ui-packages/components';
 import _ from 'lodash/fp';
 import { CSSProperties, Fragment, useState } from 'react';
 import { div, h, span } from 'react-hyperscript-helpers';
 import { generateAppName, getCurrentApp } from 'src/analysis/utils/app-utils';
 import { appAccessScopes, appToolLabels } from 'src/analysis/utils/tool-utils';
 import { ButtonPrimary } from 'src/components/common';
-import { styles as errorStyles } from 'src/components/ErrorView';
+import { getStyles as getErrorStyles } from 'src/components/ErrorView';
 import { icon } from 'src/components/icons';
 import { TextArea, TextInput } from 'src/components/input';
 import { TextCell } from 'src/components/table';
 import { Ajax } from 'src/libs/ajax';
 import { RecordResponse } from 'src/libs/ajax/data-table-providers/WdsDataTableProvider';
 import { useMetricsEvent } from 'src/libs/ajax/metrics/useMetrics';
-import colors from 'src/libs/colors';
 import Events, { extractWorkspaceDetails } from 'src/libs/events';
 import * as Nav from 'src/libs/nav';
 import { notify } from 'src/libs/notifications';
@@ -65,6 +64,8 @@ export const SubmitWorkflowModal = ({
   const { captureEvent } = useMetricsEvent();
   const canSubmit = canCompute;
 
+  const { colors } = useThemeFromContext();
+  const errorStyles = getErrorStyles(colors);
   const submitRun = async () => {
     const runSetsPayload = {
       run_set_name: runSetName,