feat: Changed the constants to variables under account/settings

Author: Microchesst

client/src/model/backend/gitlab/constants.ts

@@ -1,10 +1,54 @@
+import { useSelector } from 'react-redux';
+import store, { RootState } from 'store/store';
+
+// The values below are managed in the settings tab, reading from the store
 // util/gitlab.ts
-export const GROUP_NAME = 'DTaaS';
-export const DT_DIRECTORY = 'digital_twins';
-export const COMMON_LIBRARY_PROJECT_ID = 3;
+export const useGroupName = (): string => {
+  // Reads GROUP_NAME from the Redux store.
+  const GROUP_NAME = useSelector(
+    (state: RootState) => state.settings.GROUP_NAME,
+  );
+  return GROUP_NAME;
+};
+
+// Non-hook version for use in classes and other non-React contexts
+export const getGroupName = (): string => store.getState().settings.GROUP_NAME;
+
+export const useDTDirectory = (): string => {
+  // Reads DT_DIRECTORY from the Redux store.
+  const DT_DIRECTORY = useSelector(
+    (state: RootState) => state.settings.DT_DIRECTORY,
+  );
+  return DT_DIRECTORY;
+};
+
+// Non-hook version for use in classes and other non-React contexts
+export const getDTDirectory = (): string =>
+  store.getState().settings.DT_DIRECTORY;
+
+export const useCommonLibraryProjectId = (): number => {
+  // Reads COMMON_LIBRARY_PROJECT_ID from the Redux store.
+  const COMMON_LIBRARY_PROJECT_ID = useSelector(
+    (state: RootState) => state.settings.COMMON_LIBRARY_PROJECT_ID,
+  );
+  return COMMON_LIBRARY_PROJECT_ID;
+};
+
+// Non-hook version for use in classes and other non-React contexts
+export const getCommonLibraryProjectId = (): number =>
+  store.getState().settings.COMMON_LIBRARY_PROJECT_ID;
 
 // util/digitalTwin.ts
-export const RUNNER_TAG = 'linux';
+export const useRunnerTag = (): string => {
+  // Reads RUNNER_TAG from the Redux store.
+  const RUNNER_TAG = useSelector(
+    (state: RootState) => state.settings.RUNNER_TAG,
+  );
+  return RUNNER_TAG;
+};
+
+// Non-hook version for use in classes and other non-React contexts
+export const getRunnerTag = (): string => store.getState().settings.RUNNER_TAG;
 
 // route/digitaltwins/execute/pipelineChecks.ts
 export const MAX_EXECUTION_TIME = 10 * 60 * 1000;

client/src/preview/util/digitalTwin.ts

@@ -4,7 +4,7 @@
 import { getAuthority } from 'util/envUtil';
 import { FileState } from 'preview/store/file.slice';
 import { LibraryConfigFile } from 'preview/store/libraryConfigFiles.slice';
-import { RUNNER_TAG } from 'model/backend/gitlab/constants';
+import { getRunnerTag } from 'model/backend/gitlab/constants';
 import GitlabInstance from './gitlab';
 import {
   isValidInstance,
@@ -86,7 +86,8 @@ class DigitalTwin {
   }
 
   private async triggerPipeline() {
-    const variables = { DTName: this.DTName, RunnerTag: RUNNER_TAG };
+    const runnerTag = getRunnerTag();
+    const variables = { DTName: this.DTName, RunnerTag: runnerTag };
     return this.gitlabInstance.api.PipelineTriggerTokens.trigger(
       this.gitlabInstance.projectId!,
       'main',
@@ -96,39 +97,41 @@ class DigitalTwin {
   }
 
   async execute(): Promise<number | null> {
+    const runnerTag = getRunnerTag();
     if (!isValidInstance(this)) {
-      logError(this, RUNNER_TAG, 'Missing projectId or triggerToken');
+      logError(this, runnerTag, 'Missing projectId or triggerToken');
       return null;
     }
 
     try {
       const response = await this.triggerPipeline();
-      logSuccess(this, RUNNER_TAG);
+      logSuccess(this, runnerTag);
       this.pipelineId = response.id;
       return this.pipelineId;
     } catch (error) {
-      logError(this, RUNNER_TAG, String(error));
+      logError(this, runnerTag, String(error));
       return null;
     }
   }
 
   async stop(projectId: number, pipeline: string): Promise<void> {
+    const runnerTag = getRunnerTag();
     const pipelineId =
       pipeline === 'parentPipeline' ? this.pipelineId : this.pipelineId! + 1;
     try {
       await this.gitlabInstance.api.Pipelines.cancel(projectId, pipelineId!);
       this.gitlabInstance.logs.push({
         status: 'canceled',
         DTName: this.DTName,
-        runnerTag: RUNNER_TAG,
+        runnerTag,
       });
       this.lastExecutionStatus = 'canceled';
     } catch (error) {
       this.gitlabInstance.logs.push({
         status: 'error',
         error: new Error(String(error)),
         DTName: this.DTName,
-        runnerTag: RUNNER_TAG,
+        runnerTag,
       });
       this.lastExecutionStatus = 'error';
     }

client/src/preview/util/fileHandler.ts

@@ -2,7 +2,7 @@
 /* eslint-disable no-await-in-loop */
 
 import { FileState } from 'preview/store/file.slice';
-import { COMMON_LIBRARY_PROJECT_ID } from 'model/backend/gitlab/constants';
+import { getCommonLibraryProjectId } from 'model/backend/gitlab/constants';
 import GitlabInstance from './gitlab';
 import { IFile } from './ifile';
 import { FileType } from './DTAssets';
@@ -44,7 +44,7 @@ class FileHandler implements IFile {
     commonProject?: boolean,
   ): Promise<void> {
     const projectToUse = commonProject
-      ? COMMON_LIBRARY_PROJECT_ID
+      ? getCommonLibraryProjectId()
       : this.gitlabInstance.projectId;
     await this.gitlabInstance.api.RepositoryFiles.create(
       projectToUse!,
@@ -81,7 +81,7 @@ class FileHandler implements IFile {
   async getFileContent(filePath: string, isPrivate?: boolean): Promise<string> {
     const projectToUse =
       isPrivate === false
-        ? COMMON_LIBRARY_PROJECT_ID
+        ? getCommonLibraryProjectId()
         : this.gitlabInstance.projectId;
 
     const response = await this.gitlabInstance.api.RepositoryFiles.show(
@@ -123,7 +123,7 @@ class FileHandler implements IFile {
   ): Promise<string[]> {
     const projectToUse = isPrivate
       ? this.gitlabInstance.projectId
-      : COMMON_LIBRARY_PROJECT_ID;
+      : getCommonLibraryProjectId();
 
     try {
       const response =
@@ -162,7 +162,7 @@ class FileHandler implements IFile {
   ): Promise<string[]> {
     const projectToUse = isPrivate
       ? this.gitlabInstance.projectId
-      : COMMON_LIBRARY_PROJECT_ID;
+      : getCommonLibraryProjectId();
 
     const shouldBeRecursive = filePath.includes('common/');
 

client/src/preview/util/gitlab.ts

@@ -1,8 +1,8 @@
 import { Camelize, Gitlab, JobSchema } from '@gitbeaker/rest';
 import {
-  GROUP_NAME,
-  DT_DIRECTORY,
-  COMMON_LIBRARY_PROJECT_ID,
+  getGroupName,
+  getDTDirectory,
+  getCommonLibraryProjectId,
 } from 'model/backend/gitlab/constants';
 import { Asset } from '../components/asset/Asset';
 
@@ -63,7 +63,7 @@ class GitlabInstance {
   async getProjectId(): Promise<number | null> {
     let projectId: number | null = null;
 
-    const group = await this.api.Groups.show(GROUP_NAME);
+    const group = await this.api.Groups.show(getGroupName());
     const projects = await this.api.Groups.allProjects(group.id);
     const project = projects.find((proj) => proj.name === this.username);
 
@@ -86,13 +86,15 @@ class GitlabInstance {
 
   async getDTSubfolders(projectId: number): Promise<Asset[]> {
     const files = await this.api.Repositories.allRepositoryTrees(projectId, {
-      path: DT_DIRECTORY,
+      path: getDTDirectory(),
       recursive: false,
     });
 
     const subfolders: Asset[] = await Promise.all(
       files
-        .filter((file) => file.type === 'tree' && file.path !== DT_DIRECTORY)
+        .filter(
+          (file) => file.type === 'tree' && file.path !== getDTDirectory(),
+        )
         .map(async (file) => ({
           name: file.name,
           path: file.path,
@@ -113,7 +115,7 @@ class GitlabInstance {
       throw new Error(`Invalid asset type: ${type}`);
     }
 
-    const projectToUse = isPrivate ? projectId : COMMON_LIBRARY_PROJECT_ID;
+    const projectToUse = isPrivate ? projectId : getCommonLibraryProjectId();
 
     const files = await this.api.Repositories.allRepositoryTrees(projectToUse, {
       path: mappedPath,

client/src/route/auth/Account.tsx renamed to client/src/route/account/Account.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useAuth } from 'react-oidc-context';
 import { TabData } from 'components/tab/subcomponents/TabRender';
+import SettingsForm from './SettingsForm'; // Import the SettingsForm component
 
 function ListGroups(groups: string[]): React.ReactNode[] {
   const boldGroups = groups.map((group) =>
@@ -80,6 +81,8 @@ function SettingsTab() {
           <a href={profileUrl}>SSO OAuth Provider.</a>
         </b>
       </p>
+
+      <SettingsForm />
     </div>
   );
 }