Ms2/config editor layout overhaul (#400)

* styling for parameter keys and nested parameter cards changed

* editor style improvements

* editor layout now more compact

* "defaultParameter"-function rework

* refactoring of types and component names, also small styling improvements for config editor

* nesting indentation fixed

* show/hide internal ID toolip improved

* Action Button added to Target Config in Editor

* removed old debug code and comments

* unnecessary useRef removed

* config creation modal now supports arrow key inputs

* missing description on creation fixed

---------

Co-authored-by: Kai Rohwer <[email protected]>
Co-authored-by: Felipe Trost H. <[email protected]>

Author: 3 people

src/management-system-v2/app/(dashboard)/[environmentId]/machine-config/[configId]/action-buttons.tsx

@@ -15,12 +15,12 @@ type ActionButtonsProps = {
 const ActionButtons: React.FC<ActionButtonsProps> = ({ editable, options, actions }) => {
   return (
     <Space.Compact className={styles.ActionButtons} size="small">
-      {options.includes('copy') && (
+      {editable && options.includes('copy') && (
         <Tooltip title="Copy">
           <Button icon={<CopyOutlined />} type="text" onClick={actions?.copy} />
         </Tooltip>
       )}
-      {options.includes('edit') && (
+      {editable && options.includes('edit') && (
         <Tooltip title="Edit">
           <Button icon={<EditOutlined />} type="text" onClick={actions?.edit} />
         </Tooltip>

src/management-system-v2/app/(dashboard)/[environmentId]/machine-config/[configId]/config-content.tsx

@@ -5,7 +5,7 @@ import { useRouter } from 'next/navigation';
 
 import { KeyOutlined, EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
 import { useState } from 'react';
-import { Button, Input, Col, Row, Tooltip } from 'antd';
+import { Button, Input, Col, Row, Tooltip, Space } from 'antd';
 import { defaultParameter } from '../configuration-helper';
 import AddButton from './add-button';
 import CreateParameterModal, { CreateParameterModalReturnType } from './create-parameter-modal';
@@ -38,8 +38,9 @@ const Content: React.FC<MachineDataViewProps> = ({
   const addParameter = async (values: CreateParameterModalReturnType[]) => {
     const valuesFromModal = values[0];
     const newParameter = defaultParameter(
-      valuesFromModal.displayName,
+      valuesFromModal.key ?? '',
       valuesFromModal.value,
+      valuesFromModal.displayName,
       valuesFromModal.language,
       valuesFromModal.unit,
     );
@@ -61,6 +62,7 @@ const Content: React.FC<MachineDataViewProps> = ({
   return (
     <>
       {(idVisible || editable) && contentType === 'metadata' && (
+        // Row: ID
         <Row gutter={[24, 24]} align="middle" style={{ margin: '10px 0' }}>
           <Col span={3} className="gutter-row">
             Internal ID
@@ -70,33 +72,38 @@ const Content: React.FC<MachineDataViewProps> = ({
           </Col>
           {editable && (
             <Col span={1}>
-              <Tooltip title="Hide Internal ID">
+              <Tooltip title={idVisible ? 'Hide Internal ID' : 'Show Internal ID'}>
                 <Button
                   size="small"
                   disabled={!editable}
                   onClick={() => {
                     setIdVisible(!idVisible);
                   }}
-                  icon={idVisible ? <EyeInvisibleOutlined /> : <EyeOutlined />}
+                  icon={idVisible ? <EyeOutlined /> : <EyeInvisibleOutlined />}
                   type="text"
                 />
               </Tooltip>
             </Col>
           )}
         </Row>
       )}
-      {Object.entries(data).map(([key, val]) => (
-        <CustomField
-          parentConfig={parentConfig}
-          key={key}
-          keyId={key}
-          parameter={val}
-          editable={editable}
-        />
-      ))}
+
+      <Space direction="vertical" style={{ display: 'flex' }}>
+        {Object.entries(data).map(([key, val]) => (
+          // Rows: Metadata, Parameter, Nested Parameters, Linked Parameter
+          <CustomField
+            parentConfig={parentConfig}
+            key={key}
+            keyId={key}
+            parameter={val}
+            editable={editable}
+          />
+        ))}
+      </Space>
+
       {editable && (
+        // Row: Add Meta/Parameter
         <Row gutter={[24, 24]} align="middle" style={{ margin: '10px 0' }}>
-          {/* <Col span={3} className="gutter-row" /> */}
           <Col span={21} className="gutter-row">
             <AddButton label={addButtonTitle} onClick={() => setCreateFieldOpen(true)} />
           </Col>

src/management-system-v2/app/(dashboard)/[environmentId]/machine-config/[configId]/config-editor.tsx

@@ -46,14 +46,16 @@ import Title from 'antd/es/typography/Title';
 import { spaceURL } from '@/lib/utils';
 import VersionCreationButton from '@/components/version-creation-button';
 import AddButton from './add-button';
-import MachineConfigModal from '@/components/machine-config-modal';
+import ConfigModal from '@/components/config-modal';
 import {
   addMachineConfig,
   addTargetConfig,
+  removeTargetConfig,
   updateMachineConfig,
   updateParentConfig,
   updateTargetConfig,
 } from '@/lib/data/legacy/machine-config';
+import ActionButtons from './action-buttons';
 type MachineDataViewProps = {
   selectedConfig: AbstractConfig;
   parentConfig: ParentConfig;
@@ -127,9 +129,11 @@ const ConfigEditor: React.FC<MachineDataViewProps> = ({
 
   const { token } = theme.useToken();
   const panelStyle = {
-    marginBottom: 16,
+    marginBottom: 32,
     background: token.colorFillAlter,
     borderRadius: token.borderRadiusLG,
+    boxShadow:
+      '2px 2px 6px -4px rgba(0, 0, 0, 0.12), 4px 4px 16px 0px rgba(0, 0, 0, 0.08), 6px 6px 28px 8px rgba(0, 0, 0, 0.05)',
     //border: 'none',
   };
 
@@ -193,6 +197,11 @@ const ConfigEditor: React.FC<MachineDataViewProps> = ({
     router.refresh();
   };
 
+  const handleDelete = async (id: string) => {
+    if (id) await removeTargetConfig(id);
+    router.refresh();
+  };
+
   const exportCurrentConfig = () => {
     const blob = new Blob([JSON.stringify([selectedConfig], null, 2)], {
       type: 'application/json',
@@ -222,9 +231,9 @@ const ConfigEditor: React.FC<MachineDataViewProps> = ({
           editingEnabled={editable}
         />
       ),
-      /* extra: <Tooltip editable={editable} options={['copy', 'edit']} actions={...}/>, */ ///TODO
-      style: { ...panelStyle, border: '1px solid #87e8de' }, //cyan-3
+      style: { ...panelStyle, border: '1px solid #87e8de', background: 'rgba(255, 255, 255, 0.9)' }, //cyan-3
     });
+
     if (selectedConfig.type === 'config') {
       const currentConfig = selectedConfig as ParentConfig;
       if (currentConfig.targetConfig) {
@@ -233,8 +242,19 @@ const ConfigEditor: React.FC<MachineDataViewProps> = ({
           key: '2',
           label: title,
           children: <TargetConfiguration parentConfig={parentConfig} editingEnabled={editable} />,
-          /* extra:  <Tooltip editable={editable} options={['copy', 'edit', 'delete']} actions={...}/> */ //TODO
-          style: { ...panelStyle, border: '1px solid #91caff' }, //blue-3
+          extra: (
+            // TODO stop propagation to collapse component on click
+            <ActionButtons
+              editable={editable}
+              options={['delete']}
+              actions={{ delete: () => handleDelete(currentConfig.targetConfig?.id ?? '') }}
+            />
+          ),
+          style: {
+            ...panelStyle,
+            border: '1px solid #91caff',
+            background: '#f0f4f9',
+          }, //blue-3
         });
       }
     } else if (
@@ -261,7 +281,7 @@ const ConfigEditor: React.FC<MachineDataViewProps> = ({
     return panels;
   }, [editable, selectedConfig]);
 
-  const machineConfigModalTitle =
+  const configModalTitle =
     createConfigType === 'target' ? 'Create Target Tech Data Set' : 'Create Machine Tech Data Set';
 
   return (
@@ -411,15 +431,16 @@ const ConfigEditor: React.FC<MachineDataViewProps> = ({
             }}
             items={collapseItems}
           />
+
           {selectedConfig.type === 'config' && (
             <MachineConfigurations parentConfig={parentConfig} editingEnabled={editable} />
           )}
         </Content>
       </Layout>
 
-      <MachineConfigModal
+      <ConfigModal
         open={!!createConfigType}
-        title={machineConfigModalTitle}
+        title={configModalTitle}
         onCancel={() => setCreateConfigType('')}
         onSubmit={handleCreateConfig}
         configType={createConfigType}

src/management-system-v2/app/(dashboard)/[environmentId]/machine-config/[configId]/config-page-content.tsx

@@ -260,6 +260,7 @@ const ConfigContent: React.FC<VariablesEditorProps> = ({ parentConfig }) => {
           </div>
         )}
       </ResizableBox>
+
       <Row style={{ flexGrow: 1, flexShrink: 1 }}>
         <Col style={{ width: '100%', height: '100%' }}>
           {'content' in selectedNode ? (

src/management-system-v2/app/(dashboard)/[environmentId]/machine-config/[configId]/config-tree-view.tsx

@@ -19,7 +19,7 @@ import {
   findConfig,
   findParameter,
 } from '../configuration-helper';
-import MachineConfigModal from '@/components/machine-config-modal';
+import ConfigModal from '@/components/config-modal';
 import CreateParameterModal, { CreateParameterModalReturnType } from './create-parameter-modal';
 
 import {
@@ -115,7 +115,7 @@ const ConfigurationTreeView: React.FC<ConfigurationTreeViewProps> = ({
     addType: 'parameters' | 'metadata',
   ) => {
     const { key, displayName, value, language, unit } = valuesFromModal;
-    const newParameter = defaultParameter(key || displayName, value, language, unit);
+    const newParameter = defaultParameter(key ?? '', value, displayName, language, unit);
     let type: StoredParameter['parentType'] =
       rightClickedType === 'config' ? 'parent-config' : rightClickedType;
     await backendAddParameter(rightClickedId, type, addType, key || displayName, newParameter);
@@ -249,7 +249,7 @@ const ConfigurationTreeView: React.FC<ConfigurationTreeViewProps> = ({
         </p>
       </Modal>
 
-      <MachineConfigModal
+      <ConfigModal
         open={openModal === 'machine-config' || openModal === 'target-config'}
         title={`Creating ${openModal === 'target-config' ? 'target' : 'machine'} configuration`}
         onCancel={closeModal}

src/management-system-v2/app/(dashboard)/[environmentId]/machine-config/[configId]/create-parameter-modal.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useEffect, useRef, useState } from 'react';
-import { Modal, Form, Input, App, Collapse, CollapseProps, Select } from 'antd';
+import { Modal, Form, Input, App, Collapse, CollapseProps, Select, Card, Typography } from 'antd';
 import { UserError } from '@/lib/user-error';
 import { Localization, languageItemsSelect } from '@/lib/data/locale';
 
@@ -139,42 +139,47 @@ const ParameterInputs = ({ index, showKey }: CreateParameterInputsProps) => {
           <Input />
         </Form.Item>
       )}
-      <Form.Item
-        name={[index, 'displayName']}
-        label="Display Name"
-        rules={[{ required: true, message: 'Please fill out the Display Name' }]}
-      >
-        <Input />
-      </Form.Item>
-      <Form.Item
-        name={[index, 'value']}
-        label="Value"
-        rules={[{ required: false, message: 'Please fill out the Value' }]}
-      >
-        <Input />
-      </Form.Item>
-      <Form.Item
-        name={[index, 'unit']}
-        label="Unit"
-        rules={[{ required: false, message: 'Please fill out the Unit' }]}
-      >
-        <Input />
-      </Form.Item>
-      <Form.Item
-        name={[index, 'language']}
-        label="Language"
-        rules={[{ required: false, message: 'Please fill out the Language' }]}
-      >
-        <Select
-          showSearch
-          placeholder="Search to Select"
-          optionFilterProp="label"
-          filterSort={(optionA, optionB) =>
-            (optionA?.label ?? '').toLowerCase().localeCompare((optionB?.label ?? '').toLowerCase())
-          }
-          options={languageItemsSelect}
-        />
-      </Form.Item>
+      <Card size="small" style={{ background: 'rgba(0,0,0,0.02)' }}>
+        <Typography.Paragraph strong>Entry Data</Typography.Paragraph>
+        <Form.Item
+          name={[index, 'displayName']}
+          label="Display Name"
+          rules={[{ required: false, message: 'Please fill out the Display Name' }]}
+        >
+          <Input />
+        </Form.Item>
+        <Form.Item
+          name={[index, 'value']}
+          label="Value"
+          rules={[{ required: false, message: 'Please fill out the Value' }]}
+        >
+          <Input />
+        </Form.Item>
+        <Form.Item
+          name={[index, 'unit']}
+          label="Unit"
+          rules={[{ required: false, message: 'Please fill out the Unit' }]}
+        >
+          <Input />
+        </Form.Item>
+        <Form.Item
+          name={[index, 'language']}
+          label="Language"
+          rules={[{ required: false, message: 'Please fill out the Language' }]}
+        >
+          <Select
+            showSearch
+            placeholder="Search to Select"
+            optionFilterProp="label"
+            filterSort={(optionA, optionB) =>
+              (optionA?.label ?? '')
+                .toLowerCase()
+                .localeCompare((optionB?.label ?? '').toLowerCase())
+            }
+            options={languageItemsSelect}
+          />
+        </Form.Item>
+      </Card>
     </>
   );
 };