Merge pull request #1117 from ZupIT/hotfix/module-options

Hotfix - Module and Components Options

ui/src/core/components/Card/Body/styled.ts

@@ -14,12 +14,18 @@
  * limitations under the License.
  */
 
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 const CardBody = styled.div`
   margin-left: 17px;
   margin-right: 17px;
   word-wrap: break-word;
+
+  ${({ onClick }) =>
+    onClick &&
+    css`
+      cursor: pointer;
+    `}
 `;
 
 export default {

ui/src/core/components/Card/Config/__tests__/Config.spec.tsx

@@ -20,6 +20,12 @@ import { render, waitFor } from 'unit-test/testUtils';
 import userEvent from '@testing-library/user-event';
 import CardConfig from '../';
 
+
+const props = {
+  icon: 'git',
+  description: 'description'
+}
+
 test('render CardConfig default component', async () => {
 	const click = jest.fn();
   const props = {
@@ -31,7 +37,8 @@ test('render CardConfig default component', async () => {
     <CardConfig
       icon={props.icon}
       description={props.description}
-      onClose={click} />
+      onClose={click}
+    />
   );
 
   const btnAction = queryByTestId('icon-cancel');
@@ -42,4 +49,25 @@ test('render CardConfig default component', async () => {
 	expect(btnAction).toBeInTheDocument();
 	userEvent.click(btnAction);
 	await waitFor(() => expect(click).toBeCalled());
-});
+});
+
+
+test('render CardConfig default component with dropdown actions', async () => {
+	const click = jest.fn();
+
+  const { getByText, queryByTestId } = render(
+    <CardConfig
+      icon={props.icon}
+      description={props.description}
+      actions={<></>}
+      onClick={click}
+    />
+  );
+
+  const btnAction = queryByTestId('icon-cancel');
+
+  expect(queryByTestId(`icon-${props.icon}`)).toBeInTheDocument();
+  expect(getByText(props.description)).toBeInTheDocument();
+
+	expect(btnAction).not.toBeInTheDocument();
+});

ui/src/core/components/Card/Config/index.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import React, { ReactNode } from 'react';
 import Card from 'core/components/Card';
 import Icon from 'core/components/Icon';
 import Text from 'core/components/Text';
@@ -25,16 +25,18 @@ export interface Props {
   isDisabled?: boolean;
   icon: string;
   description: string;
+  actions?: ReactNode;
   onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
   onClose?: (event: React.MouseEvent<unknown, MouseEvent>) => void;
   canClose?: boolean;
-  children?: React.ReactNode;
+  children?: ReactNode;
   className?: string;
 }
 
 const CardConfig = ({
   icon,
   description,
+  actions,
   onClose,
   canClose = true,
   onClick,
@@ -60,11 +62,11 @@ const CardConfig = ({
   );
 
   const renderHeader = () => (
-    <Card.Header icon={headerIcon} action={headerAction} />
+    <Card.Header icon={headerIcon} action={actions || headerAction} />
   );
 
   const renderBody = () => (
-    <Styled.Body>
+    <Styled.Body onClick={onClick}>
       <Text.h4 color="light">{description}</Text.h4>
       {children}
     </Styled.Body>
@@ -73,7 +75,6 @@ const CardConfig = ({
   return (
     <Styled.CardConfig
       className={className}
-      onClick={onClick}
       isDisabled={isDisabled}
     >
       {renderHeader()}

ui/src/modules/Modules/Comparation/Tab.tsx

@@ -27,7 +27,7 @@ import { NEW_TAB } from 'core/components/TabPanel/constants';
 import { Module } from '../interfaces/Module';
 import { Component } from '../interfaces/Component';
 import { useFindModule, useDeleteModule } from '../hooks/module';
-import { resolveParams, pathModuleById } from './helpers';
+import { resolveParams } from './helpers';
 import FormModule from './Form';
 import FormComponent from './Form/Component';
 import ViewModule from './View';
@@ -109,8 +109,8 @@ const Tab = ({ param }: Props) => {
         <Can I="read" a="modules" passThrough>
           <Dropdown.Item
             icon="copy"
-            name="Copy link"
-            onClick={() => copyToClipboard(pathModuleById(id))}
+            name="Copy ID"
+            onClick={() => copyToClipboard(id)}
           />
         </Can>
       </Dropdown>
@@ -122,7 +122,6 @@ const Tab = ({ param }: Props) => {
       {mode === 'view' && isEmpty(component) && (
         <ViewModule
           module={module}
-          mode={mode}
           onChange={updateModule}
           onSelectComponent={(c: Component) => setComponent(c)}
         />

ui/src/modules/Modules/Comparation/View/__tests__/View.spec.tsx

@@ -0,0 +1,117 @@
+/*
+ * Copyright 2020 ZUP IT SERVICOS EM TECNOLOGIA E INOVACAO SA
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { act, render, screen, waitFor } from 'unit-test/testUtils';
+import userEvent from '@testing-library/user-event';
+import * as clipboardUtils from 'core/utils/clipboard';
+import View from '..';
+import { FetchMock } from 'jest-fetch-mock/types';
+
+const components = [
+  {
+    id: '123',
+    name: 'Component 1',
+    latencyThreshold: '1',
+    errorThreshold: '1',
+  }, {
+    id: '456',
+    name: 'Component 2',
+    latencyThreshold: '2',
+    errorThreshold: '2',
+  }
+]
+
+const props = {
+  module: {
+    id: '123',
+    name: 'module',
+    gitRepositoryAddress: 'https://github.com',
+    helmRepository: 'https://github.com',
+    components: [components[0]]
+  },
+  onChange: jest.fn(),
+  onSelectComponent: jest.fn()
+}
+
+test('render Modules View triggering card options dropdown', async () => {
+  render(<View {...props}/>);
+
+  const Content = await screen.findByTestId('contentIcon-modules');
+  expect(Content).toBeInTheDocument();
+
+  const DropdownTrigger = await screen.findByTestId('icon-vertical-dots');
+  expect(DropdownTrigger).toBeInTheDocument();
+  userEvent.click(DropdownTrigger);
+
+  const DropdownItemDelete = screen.queryByText('Delete');
+  const DropdownItemCopyID = screen.getByText('Copy ID');
+  expect(DropdownItemDelete).not.toBeInTheDocument();
+  expect(DropdownItemCopyID).toBeInTheDocument();
+});
+
+test('render Modules View with multiple components triggering card options dropdown', async () => {
+  render(<View {...props} module={{ ...props.module, components: components }}/>);
+
+  const Content = await screen.findByTestId('contentIcon-modules');
+  expect(Content).toBeInTheDocument();
+
+  const DropdownTrigger = await screen.findAllByTestId('icon-vertical-dots');
+  expect(DropdownTrigger[0]).toBeInTheDocument();
+  userEvent.click(DropdownTrigger[0]);
+
+  const DropdownItemDelete = screen.getByText('Delete');
+  const DropdownItemCopyID = screen.getByText('Copy ID');
+
+  expect(DropdownItemDelete).toBeInTheDocument();
+  expect(DropdownItemCopyID).toBeInTheDocument();
+});
+
+test('render View and try Copy ID', async () => {
+  const copyToClipboardSpy = jest.spyOn(clipboardUtils, 'copyToClipboard');
+  render(<View {...props} module={{ ...props.module, components: components }}/>);
+
+  const Content = await screen.findByTestId('contentIcon-modules');
+  expect(Content).toBeInTheDocument();
+
+  const DropdownTrigger = await screen.findAllByTestId('icon-vertical-dots');
+  expect(DropdownTrigger[0]).toBeInTheDocument();
+  userEvent.click(DropdownTrigger[0]);
+
+  const DropdownItemCopyID = screen.getByText('Copy ID');
+  expect(DropdownItemCopyID).toBeInTheDocument();
+
+  act(() => userEvent.click(DropdownItemCopyID));
+  expect(copyToClipboardSpy).toBeCalled();
+});
+
+test('render View and try delete', async () => {
+  (fetch as FetchMock).mockResponseOnce(JSON.stringify({}))
+
+  render(<View {...props} module={{ ...props.module, components: components }}/>);
+
+  const Content = await screen.findByTestId('contentIcon-modules');
+  expect(Content).toBeInTheDocument();
+
+  const DropdownTrigger = await screen.findAllByTestId('icon-vertical-dots');
+  expect(DropdownTrigger[0]).toBeInTheDocument();
+  userEvent.click(DropdownTrigger[0]);
+
+  const DropdownItemDelete = screen.getByText('Delete');
+  expect(DropdownItemDelete).toBeInTheDocument();
+
+  act(() => userEvent.click(DropdownItemDelete));
+  await waitFor(() => expect(props.onChange).toBeCalled());
+});

ui/src/modules/Modules/Comparation/View/index.tsx

@@ -28,12 +28,13 @@ import { Component } from 'modules/Modules/interfaces/Component';
 import { useDeleteComponent } from 'modules/Modules/hooks/component';
 import { FIRST, ONE } from './constants';
 import Styled from './styled';
+import Dropdown from 'core/components/Dropdown';
+import { copyToClipboard } from 'core/utils/clipboard';
 
 interface Props {
   module: Module;
   onChange: Function;
   onSelectComponent: (component: Component) => void;
-  mode: string;
 }
 
 const ViewModule = ({ module, onChange, onSelectComponent }: Props) => {
@@ -46,6 +47,25 @@ const ViewModule = ({ module, onChange, onSelectComponent }: Props) => {
     }
   }, [status, onChange]);
 
+  const renderAction = (component: Component, index: number) => (
+    <Styled.Dropdown color="light">
+      {(index !== FIRST || module.components.length > ONE)
+        && (
+          <Dropdown.Item
+            icon="delete"
+            name="Delete"
+            onClick={() => removeComponent(module?.id, component?.id)}
+          />
+        )
+      }
+      <Dropdown.Item
+        icon="copy"
+        name="Copy ID"
+        onClick={() => copyToClipboard(component?.id)}
+      />
+    </Styled.Dropdown>
+)
+
   return (
     <>
       <Styled.Layer>
@@ -92,8 +112,7 @@ const ViewModule = ({ module, onChange, onSelectComponent }: Props) => {
               key={component?.id}
               isLoading={loading}
               description={component?.name}
-              canClose={index !== FIRST || module.components.length > ONE}
-              onClose={() => removeComponent(module?.id, component?.id)}
+              actions={renderAction(component, index)}
               onClick={() => onSelectComponent(component)}
             >
               <Styled.Component.Wrapper>

ui/src/modules/Modules/Comparation/View/styled.ts

@@ -19,6 +19,7 @@ import Card from 'core/components/Card';
 import Button from 'core/components/Button';
 import Form from 'core/components/Form';
 import ContentIcon from 'core/components/ContentIcon';
+import ComponentDropdown from 'core/components/Dropdown';
 
 const Layer = styled.div`
   margin: 40px 0;
@@ -61,10 +62,16 @@ const FormLink = styled(Form.Link)`
 interface StepProp {
   isDisabled: boolean;
 }
+
 const Step = styled('div')<StepProp>`
   display: ${({ isDisabled }) => (isDisabled ? 'none' : 'block')};
 `;
 
+const Dropdown = styled(ComponentDropdown)`
+  right: 14px;
+  top: 0px;
+`;
+
 export default {
   Layer,
   ButtonRounded,
@@ -75,5 +82,6 @@ export default {
     Wrapper: ComponentWrapper,
     Info: ComponentIfon
   },
-  Step
+  Step,
+  Dropdown
 };

ui/src/modules/Modules/Comparation/__tests__/Modules.spec.tsx

@@ -32,8 +32,8 @@ beforeEach(() => {
 });
 
 afterEach(() => {
+  // eslint-disable-next-line no-native-reassign
   window = originalWindow;
-
 });
 
 test('render Modules comparation', async () => {