Improve the gitconfig page

packages/dashboard-frontend/src/components/InputGroupExtended/__mocks__/index.tsx

@@ -13,17 +13,16 @@
 import { Button } from '@patternfly/react-core';
 import * as React from 'react';
 
-import { Props, State } from '..';
+import { Props } from '..';
 
-export class InputGroupExtended extends React.PureComponent<Props, State> {
+export class InputGroupExtended extends React.PureComponent<Props> {
   render(): React.ReactElement {
-    const { children, onCancel, onSave, validated } = this.props;
+    const { children, onRemove, validated } = this.props;
     return (
       <div>
         {children}
         <span data-testid="validated">{validated}</span>
-        <Button data-testid="button-save" onClick={onSave} />
-        <Button data-testid="button-cancel" onClick={onCancel} />
+        <Button data-testid="button-remove" onClick={onRemove} />
       </div>
     );
   }

packages/dashboard-frontend/src/components/InputGroupExtended/__tests__/__snapshots__/index.spec.tsx.snap

@@ -1,21 +1,32 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`InputGroupExtended snapshots editable 1`] = `
+exports[`InputGroupExtended snapshots readonly 1`] = `
 <span
-  className="editable"
+  className="readonly"
 >
   value
+</span>
+`;
+
+exports[`InputGroupExtended snapshots required 1`] = `
+<div
+  className="pf-c-input-group nameInput"
+>
+  <input
+    data-testid="text-input"
+  />
   <button
-    aria-disabled={false}
+    aria-disabled={true}
     aria-label={null}
-    className="pf-c-button pf-m-plain"
+    className="pf-c-button pf-m-plain pf-m-disabled"
     data-ouia-component-id="OUIA-Generated-Button-plain-1"
     data-ouia-component-type="PF4/Button"
     data-ouia-safe={true}
-    data-testid="button-edit"
-    disabled={false}
+    data-testid="button-remove"
+    disabled={true}
     onClick={[Function]}
     role={null}
+    tabIndex={null}
     type="button"
   >
     <svg
@@ -33,17 +44,9 @@ exports[`InputGroupExtended snapshots editable 1`] = `
       width="1em"
     >
       <path
-        d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+        d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zM124 296c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h264c6.6 0 12 5.4 12 12v56c0 6.6-5.4 12-12 12H124z"
       />
     </svg>
   </button>
-</span>
-`;
-
-exports[`InputGroupExtended snapshots readonly 1`] = `
-<span
-  className="readonly"
->
-  value
-</span>
+</div>
 `;

packages/dashboard-frontend/src/components/InputGroupExtended/__tests__/index.spec.tsx

@@ -11,17 +11,15 @@
  */
 
 import { ValidatedOptions } from '@patternfly/react-core';
-import { StateMock } from '@react-mock/state';
 import * as React from 'react';
 
-import getComponentRenderer, { screen } from '@/services/__mocks__/getComponentRenderer';
+import getComponentRenderer, { fireEvent, screen } from '@/services/__mocks__/getComponentRenderer';
 
-import { InputGroupExtended, Props, State } from '..';
+import { InputGroupExtended, Props } from '..';
 
 const { createSnapshot, renderComponent } = getComponentRenderer(getComponent);
 
-const mockOnCancel = jest.fn();
-const mockOnSave = jest.fn();
+const mockOnRemove = jest.fn();
 
 describe('InputGroupExtended', () => {
   afterEach(() => {
@@ -31,131 +29,97 @@ describe('InputGroupExtended', () => {
   describe('snapshots', () => {
     test('readonly', () => {
       const snapshot = createSnapshot({
+        isLoading: false,
         readonly: true,
+        required: false,
         value: 'value',
-        onCancel: mockOnCancel,
-        onSave: mockOnSave,
+        onRemove: mockOnRemove,
       });
 
       expect(snapshot.toJSON()).toMatchSnapshot();
     });
 
-    test('editable', () => {
+    test('required', () => {
       const snapshot = createSnapshot({
+        isLoading: false,
         readonly: false,
+        required: true,
         value: 'value',
-        onCancel: mockOnCancel,
-        onSave: mockOnSave,
+        onRemove: mockOnRemove,
       });
 
       expect(snapshot.toJSON()).toMatchSnapshot();
     });
   });
 
-  it('should switch in edit mode', () => {
+  it('should handle submiting', () => {
     renderComponent({
+      isLoading: false,
       readonly: false,
+      required: false,
       value: 'value',
-      onCancel: mockOnCancel,
-      onSave: mockOnSave,
+      validated: ValidatedOptions.success,
+      onRemove: mockOnRemove,
     });
 
-    const editButton = screen.queryByTestId('button-edit');
-    expect(editButton).not.toBeNull();
+    const input = screen.queryByTestId('text-input');
+    fireEvent.submit(input!);
+  });
 
-    editButton!.click();
+  it('should handle removing the entry', () => {
+    renderComponent({
+      isLoading: false,
+      readonly: false,
+      required: false,
+      value: 'value',
+      validated: ValidatedOptions.success,
+      onRemove: mockOnRemove,
+    });
 
-    expect(screen.queryByTestId('button-edit')).toBeNull();
+    const removeButton = screen.queryByTestId('button-remove');
+    expect(removeButton).not.toBeNull();
+    expect(removeButton).toBeEnabled();
 
-    expect(screen.queryByTestId('text-input')).not.toBeNull();
-    expect(screen.queryByTestId('button-save')).not.toBeNull();
-    expect(screen.queryByTestId('button-cancel')).not.toBeNull();
-  });
+    removeButton!.click();
 
-  it('should switch out of edit mode', () => {
-    renderComponent(
-      {
-        readonly: false,
-        value: 'value',
-        onCancel: mockOnCancel,
-        onSave: mockOnSave,
-      },
-      {
-        isEditMode: true,
-      },
-    );
-
-    const cancelButton = screen.queryByTestId('button-cancel');
-    expect(cancelButton).not.toBeNull();
-    expect(cancelButton).toBeEnabled();
-
-    cancelButton!.click();
-
-    expect(mockOnCancel).toBeCalled();
-    expect(screen.queryByTestId('button-edit')).not.toBeNull();
-
-    expect(screen.queryByTestId('text-input')).toBeNull();
-    expect(screen.queryByTestId('button-save')).toBeNull();
-    expect(screen.queryByTestId('button-cancel')).toBeNull();
+    expect(mockOnRemove).toHaveBeenCalled();
   });
 
-  it('should handle save', () => {
-    renderComponent(
-      {
-        readonly: false,
-        value: 'value',
-        onCancel: mockOnCancel,
-        onSave: mockOnSave,
-        validated: ValidatedOptions.success,
-      },
-      {
-        isEditMode: true,
-      },
-    );
-
-    const saveButton = screen.queryByTestId('button-save');
-    expect(saveButton).not.toBeNull();
-    expect(saveButton).toBeEnabled();
-
-    saveButton!.click();
-
-    expect(mockOnSave).toBeCalled();
-    expect(screen.queryByTestId('button-edit')).not.toBeNull();
-
-    expect(screen.queryByTestId('text-input')).toBeNull();
-    expect(screen.queryByTestId('button-save')).toBeNull();
-    expect(screen.queryByTestId('button-cancel')).toBeNull();
+  it('should disable the remove button if required', () => {
+    renderComponent({
+      isLoading: false,
+      readonly: false,
+      required: true,
+      value: 'value',
+      validated: ValidatedOptions.default,
+      onRemove: mockOnRemove,
+    });
+
+    const removeButton = screen.queryByTestId('button-remove');
+    expect(removeButton).not.toBeNull();
+    expect(removeButton).toBeDisabled();
   });
 
-  it('should disable save button if not validated', () => {
-    renderComponent(
-      {
-        readonly: false,
-        value: 'value',
-        onCancel: mockOnCancel,
-        onSave: mockOnSave,
-        validated: ValidatedOptions.error,
-      },
-      {
-        isEditMode: true,
-      },
-    );
-
-    const saveButton = screen.queryByTestId('button-save');
-    expect(saveButton).not.toBeNull();
-    expect(saveButton).toBeDisabled();
+  it('should disable the remove button if in progress', () => {
+    renderComponent({
+      isLoading: true,
+      readonly: false,
+      required: false,
+      value: 'value',
+      validated: ValidatedOptions.default,
+      onRemove: mockOnRemove,
+    });
+
+    const removeButton = screen.queryByTestId('button-remove');
+    expect(removeButton).not.toBeNull();
+    expect(removeButton).toBeDisabled();
   });
 });
 
-function getComponent(props: Props, localState?: Partial<State>): React.ReactElement {
-  const component = (
+function getComponent(props: Props): React.ReactElement {
+  return (
     <InputGroupExtended {...props}>
-      <div data-testid="text-input" />
+      <input data-testid="text-input" />
     </InputGroupExtended>
   );
-  if (localState) {
-    return <StateMock state={localState}>{component}</StateMock>;
-  } else {
-    return component;
-  }
 }