Ms2/config versioning

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

@@ -29,6 +29,7 @@ import {
   Radio,
   Collapse,
   Typography,
+  App,
 } from 'antd';
 
 import useMobileModeler from '@/lib/useMobileModeler';
@@ -49,28 +50,42 @@ import AddButton from './add-button';
 import ConfigModal from '@/components/config-modal';
 import {
   addMachineConfig,
+  addParentConfigVersion,
   addTargetConfig,
   removeTargetConfig,
+  setParentConfigVersionAsLatest,
   updateMachineConfig,
   updateParentConfig,
   updateTargetConfig,
 } from '@/lib/data/legacy/machine-config';
 import ActionButtons from './action-buttons';
+import ConfirmationButton from '@/components/confirmation-button';
+import { v4 } from 'uuid';
+import { wrapServerCall } from '@/lib/wrap-server-call';
 type MachineDataViewProps = {
   selectedConfig: AbstractConfig;
   parentConfig: ParentConfig;
   editable: boolean;
+  editingAllowed: boolean;
   onChangeEditable: (isEditable: boolean) => void;
 };
 
-const LATEST_VERSION = { version: -1, name: 'Latest Version', description: '' };
+const LATEST_VERSION = {
+  id: '-1',
+  name: 'Latest Version',
+  description: '',
+  versionBasedOn: '',
+  createdOn: new Date(),
+};
 
 const ConfigEditor: React.FC<MachineDataViewProps> = ({
   selectedConfig,
   parentConfig,
   editable,
+  editingAllowed,
   onChangeEditable,
 }) => {
+  const app = App.useApp();
   const router = useRouter();
   const environment = useEnvironment();
   const query = useSearchParams();
@@ -105,25 +120,66 @@ const ConfigEditor: React.FC<MachineDataViewProps> = ({
   } = theme.useToken();
 
   const selectedVersion =
-    selectedConfig.versions.find(
-      (version: any) => version.version === parseInt(selectedVersionId ?? '-1'),
-    ) ?? LATEST_VERSION;
+    parentConfig.versions.find((version: any) => version.id === (selectedVersionId ?? '')) ??
+    LATEST_VERSION;
+
+  // TODO use FuzzySearch
+  // currently only ignores capitalization
   const filterOption: SelectProps['filterOption'] = (input, option) =>
     ((option?.label as string) ?? '').toLowerCase().includes(input.toLowerCase());
 
-  // const createConfigVersion = async (values: {
-  //   versionName: string;
-  //   versionDescription: string;
-  // }) => {
-  //   selectedConfig.versions.push({
-  //     version: selectedConfig.versions.length + 1,
-  //     name: values.versionName,
-  //     description: values.versionDescription,
-  //     versionBasedOn: selectedConfig.versions.length,
-  //   });
-  //   await saveParentConfig(configId, parentConfig);
-  //   router.refresh();
-  // };
+  const createConfigVersion = async (values: {
+    versionName: string;
+    versionDescription: string;
+  }) => {
+    const versionId = v4();
+    wrapServerCall({
+      fn: () =>
+        addParentConfigVersion(
+          parentConfig,
+          environment.spaceId,
+          versionId,
+          values.versionName,
+          values.versionDescription,
+        ),
+      onSuccess: () => {
+        router.refresh();
+        app.message.success({
+          content: (
+            <span>
+              Version <em>{values.versionName}</em> successfully created
+            </span>
+          ),
+        });
+      },
+      onError: () => {
+        app.message.success(`Creation of version failed`);
+      },
+    });
+  };
+
+  const makeConfigVersionLatest = async () => {
+    wrapServerCall({
+      fn: () => setParentConfigVersionAsLatest(parentConfig),
+      onSuccess: () => {
+        const searchParams = new URLSearchParams(query);
+        searchParams.delete('version');
+        router.push(
+          spaceURL(
+            environment,
+            `/machine-config/${parentConfig.id as string}${
+              searchParams.size ? '?' + searchParams.toString() : ''
+            }`,
+          ),
+        );
+        router.refresh();
+        app.message.success(`Version successfully set as latest`);
+      },
+      onError: () => {
+        app.message.success(`There was an error setting this version as latest`);
+      },
+    });
+  };
 
   const showMobileView = useMobileModeler();
 
@@ -321,34 +377,35 @@ const ConfigEditor: React.FC<MachineDataViewProps> = ({
                   {selectedConfig.name}
                 </Title>
               </div>
-              {/* <Space.Compact style={{ margin: '0 0 0 10px' }}>
+
+              <Space.Compact style={{ margin: '0 0 0 10px' }}>
                 <Select
                   popupMatchSelectWidth={false}
                   placeholder="Select Version"
                   showSearch
                   filterOption={filterOption}
                   value={{
-                    value: selectedVersion.version,
+                    value: selectedVersion.id,
                     label: selectedVersion.name,
                   }}
                   onSelect={(_, option) => {
                     // change the version info in the query but keep other info
                     const searchParams = new URLSearchParams(query);
-                    if (!option.value || option.value === -1) searchParams.delete('version');
+                    if (!option.value || option.value === '-1') searchParams.delete('version');
                     else searchParams.set(`version`, `${option.value}`);
                     router.push(
                       spaceURL(
                         environment,
-                        `/machine-config/${configId as string}${
+                        `/machine-config/${parentConfig.id as string}${
                           searchParams.size ? '?' + searchParams.toString() : ''
                         }`,
                       ),
                     );
                   }}
-                  options={[LATEST_VERSION]
-                    .concat(selectedConfig.versions ?? [])
-                    .map(({ version, name }) => ({
-                      value: version,
+                  options={[LATEST_VERSION, ...parentConfig.versions]
+                    // .concat(parentConfig.versions ?? [])
+                    .map(({ id, name }) => ({
+                      value: id,
                       label: name,
                     }))}
                 />
@@ -362,7 +419,7 @@ const ConfigEditor: React.FC<MachineDataViewProps> = ({
                     </Tooltip>
                   </>
                 )}
-              </Space.Compact> */}
+              </Space.Compact>
             </Space>
 
             <Space>
@@ -376,28 +433,49 @@ const ConfigEditor: React.FC<MachineDataViewProps> = ({
             </Space>
 
             <Space>
-              <Radio.Group
-                value={editable ? 'edit' : 'view'}
-                onChange={(e) => onChangeEditable(e.target.value === 'edit')}
-              >
-                <Radio.Button value="view">
-                  View
-                  <EyeOutlined
-                    style={{
-                      margin: '0 0 0 8px',
-                    }}
-                  />
-                </Radio.Button>
-
-                <Radio.Button value="edit">
-                  Edit
-                  <EditOutlined
-                    style={{
-                      margin: '0 0 0 8px',
-                    }}
-                  />
-                </Radio.Button>
-              </Radio.Group>
+              {!editingAllowed && (
+                <ConfirmationButton
+                  title="Are you sure you want to continue editing with this Version?"
+                  description="Any changes that are not stored in another version are irrecoverably lost!"
+                  tooltip="Set as latest Version and enable editing"
+                  onConfirm={makeConfigVersionLatest}
+                  modalProps={{
+                    okText: 'Set as latest Version',
+                    okButtonProps: {
+                      danger: true,
+                    },
+                  }}
+                  buttonProps={{
+                    icon: <EditOutlined />,
+                  }}
+                >
+                  Set as Latest
+                </ConfirmationButton>
+              )}
+              {editingAllowed && (
+                <Radio.Group
+                  value={editable ? 'edit' : 'view'}
+                  onChange={(e) => onChangeEditable(e.target.value === 'edit')}
+                >
+                  <Radio.Button value="view">
+                    View
+                    <EyeOutlined
+                      style={{
+                        margin: '0 0 0 8px',
+                      }}
+                    />
+                  </Radio.Button>
+
+                  <Radio.Button value="edit">
+                    Edit
+                    <EditOutlined
+                      style={{
+                        margin: '0 0 0 8px',
+                      }}
+                    />
+                  </Radio.Button>
+                </Radio.Group>
+              )}
 
               <Button onClick={exportCurrentConfig}>
                 Export

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

@@ -27,6 +27,7 @@ const collapsedWidth = 70;
 
 type VariablesEditorProps = {
   parentConfig: ParentConfig;
+  editingAllowed: boolean;
 };
 
 const ParameterTreeNode: React.FC<{
@@ -73,7 +74,7 @@ const ConfigTreeNode: React.FC<{ config: AbstractConfig }> = ({ config }) => {
   );
 };
 
-const ConfigContent: React.FC<VariablesEditorProps> = ({ parentConfig }) => {
+const ConfigContent: React.FC<VariablesEditorProps> = ({ parentConfig, editingAllowed }) => {
   const [selectionId, setSelectionId] = useState('');
   const [selectionType, setSelectionType] = useState<AbstractConfig['type'] | 'parameter'>(
     'config',
@@ -240,7 +241,7 @@ const ConfigContent: React.FC<VariablesEditorProps> = ({ parentConfig }) => {
           <div className={styles.CustomBoxContentWrapper}>
             <ConfigurationTreeView
               parentConfig={parentConfig}
-              editable={editable}
+              editable={editable && editingAllowed}
               treeData={treeData}
               expandedKeys={expandedKeys}
               onExpandedChange={(newExpanded) => {
@@ -271,13 +272,14 @@ const ConfigContent: React.FC<VariablesEditorProps> = ({ parentConfig }) => {
                   key={key}
                   keyId={key}
                   parameter={val}
-                  editable={editable}
+                  editable={editable && editingAllowed}
                 />
               ))}
             </>
           ) : (
             <ConfigEditor
-              editable={editable}
+              editable={editable && editingAllowed}
+              editingAllowed={editingAllowed}
               onChangeEditable={setEditable}
               parentConfig={parentConfig}
               selectedConfig={selectedNode as AbstractConfig}

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

@@ -8,13 +8,17 @@ type MachineConfigProps = {
   searchParams: { version?: string };
 };
 
-const MachineConfigView: React.FC<MachineConfigProps> = async ({ params: { configId } }) => {
-  let machineConfig = await getDeepParentConfigurationById(configId);
+const MachineConfigView: React.FC<MachineConfigProps> = async ({
+  params: { configId },
+  searchParams,
+}) => {
+  const selectedVersionId = searchParams.version ? searchParams.version : undefined;
+  let machineConfig = await getDeepParentConfigurationById(configId, selectedVersionId);
 
   //replace ConfigContent <-> MachineConfigEditor as needed
   return (
     <Content title={`Tech Data Set: ${machineConfig.name}`}>
-      <ConfigPage parentConfig={machineConfig} />
+      <ConfigPage parentConfig={machineConfig} editingAllowed={!selectedVersionId} />
     </Content>
   );
 };

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

@@ -248,7 +248,7 @@ const ParentConfigList: React.FC<ConfigListProps> = ({ data }) => {
       const importedData: ParentConfig[] = JSON.parse(text);
 
       await asyncForEach(importedData, async (item) => {
-        const add_return = await addParentConfig(item, space.spaceId, item);
+        const add_return = await addParentConfig(item, space.spaceId);
         if ('error' in add_return) {
           throw add_return.error.message;
         }