other minor usability improvements

Signed-off-by: Tyler Ohlsen <[email protected]>
opensearch-project · Aug 16, 2024 · 9b45d0e · 9b45d0e
1 parent 1b794d4
commit 9b45d0e
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 5 deletions.
diff --git a/public/pages/workflow_detail/workflow_inputs/input_fields/json_field.tsx b/public/pages/workflow_detail/workflow_inputs/input_fields/json_field.tsx
@@ -52,6 +52,7 @@ export function JsonField(props: JsonFieldProps) {
       {({ field, form }: FieldProps) => {
         return (
           <EuiCompressedFormRow
+            fullWidth={true}
             key={props.fieldPath}
             label={props.label || camelCaseToTitleString(field.name)}
             labelAppend={
@@ -97,6 +98,9 @@ export function JsonField(props: JsonFieldProps) {
               setOptions={{
                 fontSize: '14px',
                 useWorker: validate,
+                highlightActiveLine: !props.readOnly,
+                highlightSelectedWord: !props.readOnly,
+                highlightGutterLine: !props.readOnly,
               }}
               aria-label="Code Editor"
               tabSize={2}

diff --git a/public/pages/workflows/import_workflow/import_workflow_modal.tsx b/public/pages/workflows/import_workflow/import_workflow_modal.tsx
@@ -32,7 +32,7 @@ import {
 } from '../../../store';
 import { FETCH_ALL_QUERY_BODY, Workflow } from '../../../../common';
 import { WORKFLOWS_TAB } from '../workflows';
-import {  getDataSourceId } from '../../../utils/utils';
+import { getDataSourceId } from '../../../utils/utils';
 
 interface ImportWorkflowModalProps {
   isImportModalOpen: boolean;
@@ -51,6 +51,9 @@ export function ImportWorkflowModal(props: ImportWorkflowModalProps) {
   const dispatch = useAppDispatch();
   const dataSourceId = getDataSourceId();
 
+  // transient importing state for button state
+  const [isImporting, setIsImporting] = useState<boolean>(false);
+
   // file contents & file obj state
   const [fileContents, setFileContents] = useState<string | undefined>(
     undefined
@@ -133,8 +136,10 @@ export function ImportWorkflowModal(props: ImportWorkflowModalProps) {
       <EuiModalFooter>
         <EuiButtonEmpty onClick={() => onModalClose()}>Cancel</EuiButtonEmpty>
         <EuiButton
-          disabled={!isValidWorkflow(fileObj)}
+          disabled={!isValidWorkflow(fileObj) || isImporting}
+          isLoading={isImporting}
           onClick={() => {
+            setIsImporting(true);
             dispatch(
               createWorkflow({
                 apiBody: fileObj as Workflow,
@@ -159,6 +164,7 @@ export function ImportWorkflowModal(props: ImportWorkflowModalProps) {
                 getCore().notifications.toasts.addDanger(error);
               })
               .finally(() => {
+                setIsImporting(false);
                 onModalClose();
               });
           }}

diff --git a/public/pages/workflows/workflow_list/columns.tsx b/public/pages/workflows/workflow_list/columns.tsx
@@ -24,7 +24,7 @@ export const columns = (actions: any[]) => {
     {
       field: 'name',
       name: 'Name',
-      width: '33%',
+      width: '35%',
       sortable: true,
       render: (name: string, workflow: Workflow) => (
         <EuiLink
@@ -40,13 +40,13 @@ export const columns = (actions: any[]) => {
     {
       field: 'ui_metadata.type',
       name: 'Type',
-      width: '33%',
+      width: '20%',
       sortable: true,
     },
     {
       field: 'lastUpdated',
       name: 'Last saved',
-      width: '33%',
+      width: '35%',
       sortable: true,
       render: (lastUpdated: number) =>
         lastUpdated !== undefined
@@ -55,6 +55,7 @@ export const columns = (actions: any[]) => {
     },
     {
       name: 'Actions',
+      width: '10%',
       actions,
     },
   ];