feat: add an ability to import the Git Configuration

packages/dashboard-backend/src/constants/schemas.ts

@@ -150,19 +150,6 @@ export const gitConfigSchema: JSONSchema7 = {
   properties: {
     gitconfig: {
       type: 'object',
-      properties: {
-        user: {
-          type: 'object',
-          properties: {
-            name: {
-              type: 'string',
-            },
-            email: {
-              type: 'string',
-            },
-          },
-        },
-      },
     },
     resourceVersion: {
       type: 'string',

packages/dashboard-backend/src/devworkspaceClient/services/gitConfigApi/__tests__/index.spec.ts

@@ -114,8 +114,8 @@ describe('Gitconfig API', () => {
         {
           data: {
             gitconfig: `[user]
-name="User Two"
 email="user-2@che"
+name="User Two"
 `,
           },
         },

packages/dashboard-backend/src/devworkspaceClient/services/gitConfigApi/index.ts

@@ -67,12 +67,10 @@ export class GitConfigApiService implements IGitConfigApi {
       throw createError(undefined, GITCONFIG_API_ERROR_LABEL, message);
     }
 
-    gitConfig.gitconfig.user.email = changedGitConfig.gitconfig.user.email;
-    gitConfig.gitconfig.user.name = changedGitConfig.gitconfig.user.name;
+    gitConfig.gitconfig = changedGitConfig.gitconfig;
 
     try {
       const gitconfigStr = this.fromGitConfig(gitConfig);
-
       const response = await this.coreV1API.patchNamespacedConfigMap(
         GITCONFIG_CONFIGMAP,
         namespace,
@@ -133,9 +131,7 @@ export class GitConfigApiService implements IGitConfigApi {
 
     return {
       resourceVersion,
-      gitconfig: {
-        user: { name: gitconfig.user.name, email: gitconfig.user.email },
-      },
+      gitconfig,
     };
   }
 }

packages/dashboard-backend/src/routes/api/__tests__/gitConfig.spec.ts

@@ -64,6 +64,11 @@ describe('Gitconfig Routes', () => {
             name: 'user-che',
             email: 'user@che',
           },
+          alias: {
+            co: 'checkout',
+            st: 'status',
+            br: 'branch',
+          },
         },
         resourceVersion: '123456789',
       } as api.IGitConfig);

packages/dashboard-frontend/package.json

@@ -48,6 +48,7 @@
     "inversify-inject-decorators": "^3.1.0",
     "inversify-react": "^1.1.0",
     "js-yaml": "^4.1.0",
+    "multi-ini": "^2.3.2",
     "lodash": "^4.17.21",
     "process": "^0.11.10",
     "qs": "^6.12.1",

packages/dashboard-frontend/src/pages/UserPreferences/GitConfig/AddModal/GitConfigForm/index.tsx

@@ -0,0 +1,146 @@
+/*
+ * Copyright (c) 2018-2024 Red Hat, Inc.
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *   Red Hat, Inc. - initial API and implementation
+ */
+
+import { Form, FormGroup, ValidatedOptions } from '@patternfly/react-core';
+import * as ini from 'multi-ini';
+import React from 'react';
+
+import { GitConfigImport } from '@/pages/UserPreferences/GitConfig/GitConfigImport';
+import * as GitConfigStore from '@/store/GitConfig';
+
+export const REQUIRED_ERROR = 'This field is required.';
+const MAX_LENGTH = 4096;
+export const MAX_LENGTH_ERROR = `The value is too long. The maximum length is ${MAX_LENGTH} characters.`;
+export const WRONG_TYPE_ERROR = 'This file type is not supported.';
+
+export type Props = {
+  gitConfig: GitConfigStore.GitConfig | undefined;
+  onChange: (gitConfig: GitConfigStore.GitConfig, isValid: boolean) => void;
+};
+
+export type State = {
+  isUpload: boolean;
+  gitConfig: GitConfigStore.GitConfig | undefined;
+  gitConfigStr: string | undefined;
+  validated: ValidatedOptions;
+};
+
+export class GitConfigForm extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      isUpload: false,
+      gitConfig: undefined,
+      gitConfigStr: undefined,
+      validated: ValidatedOptions.default,
+    };
+  }
+
+  public componentDidMount() {
+    const { gitConfig } = this.props;
+    const gitConfigStr = this.getContent(gitConfig);
+    if (gitConfigStr !== undefined) {
+      this.onChange(gitConfigStr, false);
+    }
+  }
+
+  public shouldComponentUpdate(nextProps: Readonly<Props>, nextState: Readonly<State>): boolean {
+    const { gitConfig, validated } = this.state;
+    const { gitConfig: nextGitConfig, validated: nextValidated } = nextState;
+
+    return gitConfig !== nextGitConfig || validated !== nextValidated;
+  }
+
+  private getGitConfig(gitConfigStr: string): GitConfigStore.GitConfig {
+    const parser = new ini.Parser();
+    const gitConfigLines = gitConfigStr.split(/\r?\n/);
+    const gitConfig = parser.parse(gitConfigLines);
+    return gitConfig as GitConfigStore.GitConfig;
+  }
+
+  private getContent(gitConfig: GitConfigStore.GitConfig | undefined): string | undefined {
+    if (gitConfig === undefined) {
+      return undefined;
+    }
+    const serializer = new ini.Serializer();
+    return serializer
+      .serialize(gitConfig)
+      .replace(/\n/g, '\n    ')
+      .replace(/ {4}\[/g, '[');
+  }
+
+  private onChange(gitConfigStr: string, isUpload: boolean): void {
+    const { onChange } = this.props;
+    try {
+      const gitConfig = this.getGitConfig(gitConfigStr);
+      const validated = this.validate(gitConfig);
+      const isValid = validated === ValidatedOptions.success;
+
+      this.setState({ gitConfigStr, gitConfig, validated, isUpload });
+      onChange(gitConfig, isValid);
+    } catch (error) {
+      console.log(error);
+      this.setState({ validated: ValidatedOptions.error, isUpload });
+    }
+  }
+
+  private validate(gitConfig: GitConfigStore.GitConfig): ValidatedOptions {
+    return this.isGitConfig(gitConfig) ? ValidatedOptions.success : ValidatedOptions.error;
+  }
+
+  private isGitConfig(gitConfig: unknown): gitConfig is GitConfigStore.GitConfig {
+    return (
+      (gitConfig as GitConfigStore.GitConfig).user !== undefined &&
+      (gitConfig as GitConfigStore.GitConfig).user.email !== undefined &&
+      (gitConfig as GitConfigStore.GitConfig).user.name !== undefined
+    );
+  }
+
+  private getErrorMessage(gitConfigStr: string | undefined, isUpload: boolean): string | undefined {
+    if (gitConfigStr && gitConfigStr.length > MAX_LENGTH) {
+      return MAX_LENGTH_ERROR;
+    }
+    if (isUpload === true) {
+      return WRONG_TYPE_ERROR;
+    }
+    return REQUIRED_ERROR;
+  }
+
+  public render(): React.ReactElement {
+    const { validated, gitConfigStr, isUpload } = this.state;
+
+    const errorMessage = this.getErrorMessage(gitConfigStr, isUpload);
+
+    const content = this.getContent(this.props.gitConfig);
+
+    return (
+      <Form onSubmit={e => e.preventDefault()}>
+        <FormGroup
+          fieldId="gitconfig"
+          helperTextInvalid={errorMessage}
+          label="gitconfig"
+          validated={validated}
+        >
+          <GitConfigImport
+            fieldId="git-configuration"
+            content={content}
+            fileNamePlaceholder="Upload the .gitconfig file"
+            textAreaPlaceholder="Or paste the Git Configuration here"
+            validated={validated}
+            onChange={(gitConfig, isUpload) => this.onChange(gitConfig, isUpload)}
+          />
+        </FormGroup>
+      </Form>
+    );
+  }
+}

packages/dashboard-frontend/src/pages/UserPreferences/GitConfig/AddModal/index.tsx

@@ -0,0 +1,106 @@
+/*
+ * Copyright (c) 2018-2024 Red Hat, Inc.
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *   Red Hat, Inc. - initial API and implementation
+ */
+
+import { Button, ButtonVariant, Modal, ModalVariant } from '@patternfly/react-core';
+import isEqual from 'lodash/isEqual';
+import React from 'react';
+
+import { GitConfigForm } from '@/pages/UserPreferences/GitConfig/AddModal/GitConfigForm';
+import * as GitConfigStore from '@/store/GitConfig';
+
+export type Props = {
+  gitConfig: GitConfigStore.GitConfig | undefined;
+  isOpen: boolean;
+  onSave: (gitConfig: GitConfigStore.GitConfig) => Promise<void>;
+  onCloseModal: () => void;
+};
+export type State = {
+  gitConfig: GitConfigStore.GitConfig | undefined;
+  isSaveEnabled: boolean;
+};
+
+export class GitConfigAddModal extends React.PureComponent<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      gitConfig: undefined,
+      // initially disabled until something changes and form is valid
+      isSaveEnabled: false,
+    };
+  }
+
+  private handleSaveGitConfig(): void {
+    const { gitConfig } = this.state;
+
+    if (gitConfig) {
+      this.props.onSave(gitConfig);
+    }
+  }
+
+  private handleCloseModal(): void {
+    this.props.onCloseModal();
+  }
+
+  private handleChangeGitConfig(
+    gitConfig: GitConfigStore.GitConfig | undefined,
+    isValid: boolean,
+  ): void {
+    const isSaveEnabled = isValid && !isEqual(this.props.gitConfig, gitConfig);
+    this.setState({
+      gitConfig,
+      isSaveEnabled,
+    });
+  }
+
+  private buildModalFooter(): React.ReactNode {
+    const isDisabled = !this.state.isSaveEnabled || !this.state.gitConfig;
+
+    return (
+      <React.Fragment>
+        <Button
+          variant={ButtonVariant.primary}
+          isDisabled={isDisabled}
+          onClick={() => this.handleSaveGitConfig()}
+        >
+          Add
+        </Button>
+        <Button variant={ButtonVariant.link} onClick={() => this.handleCloseModal()}>
+          Cancel
+        </Button>
+      </React.Fragment>
+    );
+  }
+
+  public render(): React.ReactElement {
+    const { isOpen } = this.props;
+
+    const modalTitle = 'Import Git Configuration';
+    const modalFooter = this.buildModalFooter();
+
+    return (
+      <Modal
+        aria-label={modalTitle}
+        title={modalTitle}
+        variant={ModalVariant.small}
+        isOpen={isOpen}
+        onClose={() => this.handleCloseModal()}
+        footer={modalFooter}
+      >
+        <GitConfigForm
+          gitConfig={this.props.gitConfig}
+          onChange={(gitConfig, isValid) => this.handleChangeGitConfig(gitConfig, isValid)}
+        />
+      </Modal>
+    );
+  }
+}