fix(ui): Fix editor. Fixes #5613 Fixes #5617 (#5620)

argoproj · Apr 19, 2021 · 026c127 · 026c127
1 parent dafa983
commit 026c127
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 30 deletions.
diff --git a/ui/src/app/cron-workflows/components/cron-workflow-creator.tsx b/ui/src/app/cron-workflows/components/cron-workflow-creator.tsx
@@ -21,7 +21,7 @@ export const CronWorkflowCreator = ({onCreate, namespace}: {namespace: string; o
  icon='plus'
  onClick={() => {
  services.cronWorkflows
- .create(cronWorkflow, cronWorkflow.metadata.namespace)
+ .create(cronWorkflow, Utils.getNamespace(cronWorkflow.metadata.namespace))
  .then(onCreate)
  .catch(setError);
  }}>

diff --git a/ui/src/app/event-flow/components/event-flow-details/event-flow-page.tsx b/ui/src/app/event-flow/components/event-flow-details/event-flow-page.tsx
@@ -265,7 +265,7 @@ export const EventFlowPage = ({history, location, match}: RouteComponentProps<an
  nodeGenresTitle={'Type'}
  nodeGenres={genres}
  nodeClassNamesTitle={'Status'}
- nodeClassNames={{Pending: true, Ready: true, Running: true, Failed: true, Succeeded: true, Error: true}}
+ nodeClassNames={{'': true, 'Pending': true, 'Ready': true, 'Running': true, 'Failed': true, 'Succeeded': true, 'Error': true}}
  iconShapes={{workflow: 'circle', collapsed: 'circle', conditions: 'circle'}}
  horizontal={true}
  selectedNode={selectedNode}

diff --git a/ui/src/app/event-sources/components/event-source-creator.tsx b/ui/src/app/event-sources/components/event-source-creator.tsx
@@ -20,7 +20,7 @@ export const EventSourceCreator = ({onCreate, namespace}: {namespace: string; on
  icon='plus'
  onClick={() => {
  services.eventSource
- .create(eventSource, eventSource.metadata.namespace)
+ .create(eventSource, Utils.getNamespace(eventSource.metadata.namespace))
  .then(onCreate)
  .catch(setError);
  }}>

diff --git a/ui/src/app/sensors/components/sensor-creator.tsx b/ui/src/app/sensors/components/sensor-creator.tsx
@@ -20,7 +20,7 @@ export const SensorCreator = ({namespace, onCreate}: {namespace: string; onCreat
  icon='plus'
  onClick={() => {
  services.sensor
- .create(sensor, sensor.metadata.namespace)
+ .create(sensor, Utils.getNamespace(sensor.metadata.namespace))
  .then(onCreate)
  .catch(setError);
  }}>

diff --git a/ui/src/app/shared/components/filter-drop-down.tsx b/ui/src/app/shared/components/filter-drop-down.tsx
@@ -28,13 +28,13 @@ export const FilterDropDown = (props: FilterDropDownProps) => {
  .filter(item => item.values)
  .map((item, i) => (
  <div key={i}>
- <li className={classNames('top-bar__filter-item', {title: true})}>
+ <li key={i} className={classNames('top-bar__filter-item', {title: true})}>
  <span>{item.title}</span>
  </li>
  {Object.entries(item.values)
  .sort()
  .map(([label, checked]) => (
- <li className={classNames('top-bar__filter-item')}>
+ <li key={label} className={classNames('top-bar__filter-item')}>
  <React.Fragment>
  <Checkbox id={`filter__${label}`} checked={checked} onChange={v => item.onChange(label, v)} />
  <label htmlFor={`filter__${label}`}>{label}</label>

diff --git a/ui/src/app/shared/components/object-editor/object-editor.tsx b/ui/src/app/shared/components/object-editor/object-editor.tsx
@@ -9,7 +9,7 @@ import {PhaseIcon} from '../phase-icon';
 import {ToggleButton} from '../toggle-button';
 
 interface Props<T> {
- type: string;
+ type?: string;
  value: T;
  buttons?: React.ReactNode;
  onChange?: (value: T) => void;
@@ -26,6 +26,13 @@ export const ObjectEditor = <T extends any>({type, value, buttons, onChange}: Pr
  useEffect(() => storage.setItem('lang', lang, defaultLang), [lang]);
  useEffect(() => setText(stringify(value, lang)), [value]);
  useEffect(() => setText(stringify(parse(text), lang)), [lang]);
+ useEffect(() => {
+ // we ONLY want to change the text, if the normalized version has changed, this prevents white-space changes
+ // from resulting in a significant change
+ if (text !== stringify(parse(editor.current.editor.getValue()), lang)) {
+ editor.current.editor.setValue(text);
+ }
+ }, [text, lang]);
 
  useEffect(() => {
  if (type && lang === 'json') {
@@ -79,31 +86,29 @@ export const ObjectEditor = <T extends any>({type, value, buttons, onChange}: Pr
  scrollBeyondLastLine: true
  }}
  onChange={v => {
- try {
- onChange(parse(v));
- setError(null);
- } catch (e) {
- setError(e);
+ if (onChange) {
+ try {
+ onChange(parse(v));
+ setError(null);
+ } catch (e) {
+ setError(e);
+ }
  }
  }}
  />
  </div>
- <div style={{paddingTop: '1em'}}>
- {error && (
- <>
- <PhaseIcon value='Error' /> {error.message}
- </>
- )}
- </div>
- <div>
- {onChange && (
- <>
- <i className='fa fa-info-circle' />{' '}
- {lang === 'json' ? <>Full auto-completion enabled.</> : <>Basic completion for YAML. Switch to JSON for full auto-completion.</>}
- </>
- )}{' '}
- <a href='https://argoproj.github.io/argo-workflows/ide-setup/'>Learn how to get auto-completion in your IDE.</a>
- </div>
+ {error && (
+ <div style={{paddingTop: '1em'}}>
+ <PhaseIcon value='Error' /> {error.message}
+ </div>
+ )}
+ {onChange && (
+ <div>
+ <i className='fa fa-info-circle' />{' '}
+ {lang === 'json' ? <>Full auto-completion enabled.</> : <>Basic completion for YAML. Switch to JSON for full auto-completion.</>}{' '}
+ <a href='https://argoproj.github.io/argo-workflows/ide-setup/'>Learn how to get auto-completion in your IDE.</a>
+ </div>
+ )}
  </>
  );
 };
diff --git a/ui/src/app/workflow-templates/components/workflow-template-creator.tsx b/ui/src/app/workflow-templates/components/workflow-template-creator.tsx
@@ -21,7 +21,7 @@ export const WorkflowTemplateCreator = ({namespace, onCreate}: {namespace: strin
  icon='plus'
  onClick={() => {
  services.workflowTemplate
- .create(template, template.metadata.namespace)
+ .create(template, Utils.getNamespace(template.metadata.namespace))
  .then(onCreate)
  .catch(setError);
  }}>

diff --git a/ui/src/app/workflows/components/workflow-creator.tsx b/ui/src/app/workflows/components/workflow-creator.tsx
@@ -106,7 +106,7 @@ export const WorkflowCreator = ({namespace, onCreate}: {namespace: string; onCre
  icon='plus'
  onClick={() => {
  services.workflows
- .create(workflow, workflow.metadata.namespace)
+ .create(workflow, Utils.getNamespace(workflow.metadata.namespace))
  .then(onCreate)
  .catch(setError);
  }}>