chore(frotend): Test Definition Name Input (#2830)

kubeshop · Jun 27, 2023 · c38ba97 · c38ba97
1 parent 3c96bd3
commit c38ba97
Show file tree

Hide file tree

Showing 10 changed files with 107 additions and 22 deletions.
diff --git a/web/src/components/InputOverlay/InputOverlay.styled.ts b/web/src/components/InputOverlay/InputOverlay.styled.ts
@@ -0,0 +1,25 @@
+import {EditOutlined} from '@ant-design/icons';
+import {Button} from 'antd';
+import styled from 'styled-components';
+
+export const Overlay = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+`;
+
+export const SaveButton = styled(Button)``;
+
+export const InputContainer = styled.div`
+  display: grid;
+  grid-template-columns: 45% 64px;
+  align-items: center;
+  max-width: 80%;
+`;
+
+export const EditIcon = styled(EditOutlined)`
+  && {
+    color: ${({theme}) => theme.color.primary};
+  }
+`;
diff --git a/web/src/components/InputOverlay/InputOverlay.tsx b/web/src/components/InputOverlay/InputOverlay.tsx
@@ -0,0 +1,38 @@
+import {useState} from 'react';
+import {Input} from 'antd';
+import {noop} from 'lodash';
+import * as S from './InputOverlay.styled';
+
+interface IProps {
+  onChange?(value: string): void;
+  value?: string;
+}
+
+const InputOverlay = ({onChange = noop, value = ''}: IProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [inputValue, setInputValue] = useState(value);
+
+  return isOpen ? (
+    <S.InputContainer>
+      <Input onChange={event => setInputValue(event.target.value)} value={inputValue} />
+      <S.SaveButton
+        ghost
+        type="primary"
+        onClick={() => {
+          setIsOpen(false);
+          onChange(inputValue);
+        }}
+      >
+        Save
+      </S.SaveButton>
+    </S.InputContainer>
+  ) : (
+    <S.Overlay
+      onClick={() => setIsOpen(true)}
+    >
+      {inputValue} <S.EditIcon />
+    </S.Overlay>
+  );
+};
+
+export default InputOverlay;
diff --git a/web/src/components/InputOverlay/index.ts b/web/src/components/InputOverlay/index.ts
@@ -0,0 +1,2 @@
+// eslint-disable-next-line no-restricted-exports
+export {default} from './InputOverlay';
diff --git a/web/src/components/RunDetailAutomate/RunDetailAutomate.tsx b/web/src/components/RunDetailAutomate/RunDetailAutomate.tsx
@@ -1,23 +1,29 @@
+import {snakeCase} from 'lodash';
 import Test from 'models/Test.model';
+import {useState} from 'react';
 import TestRun from 'models/TestRun.model';
 import * as S from './RunDetailAutomate.styled';
-import TestDefinition from '../RunDetailAutomateDefinition';
+import RunDetailAutomateDefinition from '../RunDetailAutomateDefinition';
 import RunDetailAutomateMethods from '../RunDetailAutomateMethods/RunDetailAutomateMethods';
 
 interface IProps {
   test: Test;
   run: TestRun;
 }
 
-const RunDetailAutomate = ({test, run}: IProps) => (
-  <S.Container>
-    <S.SectionLeft>
-      <TestDefinition test={test} />
-    </S.SectionLeft>
-    <S.SectionRight>
-      <RunDetailAutomateMethods test={test} run={run} />
-    </S.SectionRight>
-  </S.Container>
-);
+const RunDetailAutomate = ({test, run}: IProps) => {
+  const [fileName, setFileName] = useState<string>(`${snakeCase(test.name)}.yaml`);
+
+  return (
+    <S.Container>
+      <S.SectionLeft>
+        <RunDetailAutomateDefinition onFileNameChange={setFileName} fileName={fileName} test={test} />
+      </S.SectionLeft>
+      <S.SectionRight>
+        <RunDetailAutomateMethods fileName={fileName} test={test} run={run} />
+      </S.SectionRight>
+    </S.Container>
+  );
+};
 
 export default RunDetailAutomate;
diff --git a/web/src/components/RunDetailAutomateDefinition/RunDetailAutomateDefinition.styled.ts b/web/src/components/RunDetailAutomateDefinition/RunDetailAutomateDefinition.styled.ts
@@ -18,3 +18,7 @@ export const Footer = styled.div`
   justify-content: flex-end;
   margin-top: 16px;
 `;
+
+export const FileName = styled.div`
+  margin-bottom: 14px;
+`;
diff --git a/web/src/components/RunDetailAutomateDefinition/RunDetailAutomateDefinition.tsx b/web/src/components/RunDetailAutomateDefinition/RunDetailAutomateDefinition.tsx
@@ -7,17 +7,20 @@ import {ResourceType} from 'types/Resource.type';
 import Test from 'models/Test.model';
 import * as S from './RunDetailAutomateDefinition.styled';
 import {FramedCodeBlock} from '../CodeBlock';
+import InputOverlay from '../InputOverlay/InputOverlay';
 
 interface IProps {
   test: Test;
+  onFileNameChange(value: string): void;
+  fileName: string;
 }
 
-const RunDetailAutomateDefinition = ({test: {id, version}}: IProps) => {
+const RunDetailAutomateDefinition = ({test: {id, version}, onFileNameChange, fileName}: IProps) => {
   const {definition, loadDefinition} = useDefinitionFile();
 
   const onDownload = useCallback(() => {
-    downloadFile(definition, 'test_definition.yaml');
-  }, [definition]);
+    downloadFile(definition, fileName);
+  }, [definition, fileName]);
 
   useEffect(() => {
     loadDefinition(ResourceType.Test, id, version);
@@ -26,6 +29,9 @@ const RunDetailAutomateDefinition = ({test: {id, version}}: IProps) => {
   return (
     <S.Container>
       <S.Title>Test Definition</S.Title>
+      <S.FileName>
+        <InputOverlay value={fileName} onChange={onFileNameChange} />
+      </S.FileName>
       <FramedCodeBlock title="Preview your YAML file" value={definition} language="yaml" />
       <S.Footer>
         <Button data-cy="file-viewer-download" icon={<DownloadOutlined />} onClick={onDownload} type="primary">

diff --git a/web/src/components/RunDetailAutomateMethods/RunDetailAutomateMethods.tsx b/web/src/components/RunDetailAutomateMethods/RunDetailAutomateMethods.tsx
@@ -16,9 +16,10 @@ export interface IMethodProps {
   environmentId?: string;
   test: Test;
   run: TestRun;
+  fileName?: string;
 }
 
-const RunDetailAutomateMethods = ({test, run}: IMethodProps) => {
+const RunDetailAutomateMethods = ({test, run, fileName}: IMethodProps) => {
   const [query, updateQuery] = useSearchParams();
   const {selectedEnvironment: {id: environmentId} = {}} = useEnvironment();
 
@@ -37,7 +38,7 @@ const RunDetailAutomateMethods = ({test, run}: IMethodProps) => {
           }}
         >
           <Tabs.TabPane key={TabsKeys.CLI} tab="CLI">
-            <CliCommand test={test} environmentId={environmentId} run={run} />
+            <CliCommand test={test} environmentId={environmentId} run={run} fileName={fileName} />
           </Tabs.TabPane>
           <Tabs.TabPane key={TabsKeys.DeepLink} tab="Deep Link">
             <DeepLink test={test} environmentId={environmentId} run={run} />

diff --git a/web/src/components/RunDetailAutomateMethods/methods/CLICommand/CliCommand.tsx b/web/src/components/RunDetailAutomateMethods/methods/CLICommand/CliCommand.tsx
@@ -6,7 +6,7 @@ import Controls from './Controls';
 import useCliCommand from './hooks/useCliCommand';
 import {IMethodProps} from '../../RunDetailAutomateMethods';
 
-const CLiCommand = ({test, environmentId}: IMethodProps) => {
+const CLiCommand = ({test, environmentId, fileName = ''}: IMethodProps) => {
   const {command, onGetCommand} = useCliCommand();
 
   return (
@@ -24,7 +24,7 @@ const CLiCommand = ({test, environmentId}: IMethodProps) => {
         minHeight="100px"
         maxHeight="100px"
       />
-      <Controls onChange={onGetCommand} test={test} environmentId={environmentId} />
+      <Controls onChange={onGetCommand} test={test} fileName={fileName} environmentId={environmentId} />
     </S.Container>
   );
 };

diff --git a/web/src/components/RunDetailAutomateMethods/methods/CLICommand/Controls.tsx b/web/src/components/RunDetailAutomateMethods/methods/CLICommand/Controls.tsx
@@ -20,9 +20,10 @@ interface IProps {
   onChange(cmdConfig: TCliCommandConfig): void;
   test: Test;
   environmentId?: string;
+  fileName: string;
 }
 
-const Controls = ({onChange, test, environmentId}: IProps) => {
+const Controls = ({onChange, test, environmentId, fileName}: IProps) => {
   const [form] = Form.useForm<TCliCommandConfig>();
   const options = Form.useWatch('options', form);
   const format = Form.useWatch('format', form);
@@ -33,8 +34,9 @@ const Controls = ({onChange, test, environmentId}: IProps) => {
       format: format ?? CliCommandFormat.Pretty,
       test,
       environmentId,
+      fileName,
     });
-  }, [environmentId, format, onChange, options, test]);
+  }, [environmentId, fileName, format, onChange, options, test]);
 
   return (
     <Form<TCliCommandConfig>

diff --git a/web/src/services/CliCommand.service.ts b/web/src/services/CliCommand.service.ts
@@ -22,6 +22,7 @@ export type TCliCommandConfig = {
   format: CliCommandFormat;
   environmentId?: string;
   test: Test;
+  fileName: string;
 };
 
 type TApplyProps = {
@@ -50,11 +51,11 @@ const CliCommandService = () => ({
           : 'tracetest'
       } ${command}`,
   } as Record<CliCommandOption, TApplyOption>,
-  getCommand({options, format, test, environmentId}: TCliCommandConfig) {
+  getCommand({options, format, test, environmentId, fileName}: TCliCommandConfig) {
     const command = Object.entries(options).reduce(
       (acc, [option, enabled]) =>
         this.applyOptions[option as CliCommandOption]({command: acc, enabled, test, environmentId}),
-      'test run -d test_definition.yaml'
+      `test run -d ${fileName}`
     );
 
     return `${command} -o ${format}`;