From 13fb3d8c221a93048defef574a4519ad905781c5 Mon Sep 17 00:00:00 2001
From: Andrea Peruffo <andrea.peruffo1982@gmail.com>
Date: Mon, 16 Jan 2023 12:04:46 +0000
Subject: [PATCH] review comments

---
 .../components/modals/generateClientModal.css |   4 -
 .../components/modals/generateClientModal.tsx | 161 ++++++++++++++----
 ui/src/services/groups/groups.service.ts      |   2 +
 ui/webpack.common.js                          |   2 +-
 4 files changed, 131 insertions(+), 38 deletions(-)
 delete mode 100644 ui/src/app/pages/artifactVersion/components/modals/generateClientModal.css

diff --git a/ui/src/app/pages/artifactVersion/components/modals/generateClientModal.css b/ui/src/app/pages/artifactVersion/components/modals/generateClientModal.css
deleted file mode 100644
index d762e5f9ec..0000000000
--- a/ui/src/app/pages/artifactVersion/components/modals/generateClientModal.css
+++ /dev/null
@@ -1,4 +0,0 @@
-
-.generate-client {
-    height: 60%;
-}
diff --git a/ui/src/app/pages/artifactVersion/components/modals/generateClientModal.tsx b/ui/src/app/pages/artifactVersion/components/modals/generateClientModal.tsx
index afc8a330f9..ca26332235 100644
--- a/ui/src/app/pages/artifactVersion/components/modals/generateClientModal.tsx
+++ b/ui/src/app/pages/artifactVersion/components/modals/generateClientModal.tsx
@@ -15,7 +15,6 @@
  * limitations under the License.
  */
 import React from "react";
-import "./generateClientModal.css";
 import { PureComponent, PureComponentProps, PureComponentState } from "../../../../components";
 import {
     Button,
@@ -28,6 +27,7 @@ import {
     GridItem,
     Label,
     Modal,
+    Spinner,
     TextInput
 } from "@patternfly/react-core";
 import { CaretDownIcon } from "@patternfly/react-icons";
@@ -53,6 +53,7 @@ export interface GenerateClientModalState extends PureComponentState {
     isErrorVisible: boolean;
     downloadLink: string;
     isDownloadLinkVisible: boolean;
+    isGenerating: boolean;
 }
 
 export class GenerateClientModal extends PureComponent<GenerateClientModalProps, GenerateClientModalState> {
@@ -63,7 +64,11 @@ export class GenerateClientModal extends PureComponent<GenerateClientModalProps,
 
     private downloadLink(): React.ReactElement {
         console.log(this.state);
-        if (this.state.isDownloadLinkVisible) {
+        if (this.state.isErrorVisible) {
+            return <Label key="Error">ERROR, please check the console logs for details.</Label>
+        } else if (this.state.isGenerating) {
+            return <Spinner size="md"/>
+        } else if (this.state.isDownloadLinkVisible) {
             return <a
                         key="DownloadLink"
                         href={this.state.downloadLink}
@@ -72,8 +77,6 @@ export class GenerateClientModal extends PureComponent<GenerateClientModalProps,
                     >
                 {this.state.isErrorVisible ? "Error" : "Download"}
             </a>
-        } else if (this.state.isErrorVisible) {
-            return <Label key="Error">ERROR, please check the console logs for details.</Label>
         } else {
             return <div key="Placeholder"/>
         }
@@ -99,7 +102,7 @@ export class GenerateClientModal extends PureComponent<GenerateClientModalProps,
                             <a href="https://microsoft.github.io/kiota/get-started/">the official documentation</a>&nbsp;to get started.</Label>
                         </GridItem>
 
-                        <GridItem span={12}>
+                        <GridItem span={4}>
                             <FormGroup
                                 label="Client Class Name"
                                 fieldId="form-client-name"
@@ -118,7 +121,7 @@ export class GenerateClientModal extends PureComponent<GenerateClientModalProps,
                             </FormGroup>
                         </GridItem>
 
-                        <GridItem span={12}>
+                        <GridItem span={4}>
                             <FormGroup
                                 label="Namespace Name"
                                 fieldId="form-namespace"
@@ -137,33 +140,73 @@ export class GenerateClientModal extends PureComponent<GenerateClientModalProps,
                             </FormGroup>
                         </GridItem>
 
-                        <FormGroup
-                            label="Language"
-                            fieldId="form-language"
-                            isRequired={true}
-                        >
-                            <div>
-                                <Dropdown
-                                    toggle={
-                                        <DropdownToggle id="form-type-toggle" data-testid="form-type-toggle" onToggle={this.onLanguageToggle} toggleIndicator={CaretDownIcon}>
-                                            { this.state.data.language ? this.state.data.language : "Java" }
-                                        </DropdownToggle>
-                                    }
-                                    onSelect={this.onLanguageSelect}
-                                    isOpen={this.state.languageIsExpanded}
-                                    dropdownItems={[
-                                        <DropdownItem id="Java" key="Java" data-testid="form-type-auto"><i>Java</i></DropdownItem>,
-                                        <DropdownItem id="CSharp" key="CSharp" data-testid="form-type-auto"><i>CSharp</i></DropdownItem>,
-                                        <DropdownItem id="Go" key="Go" data-testid="form-type-auto"><i>Go</i></DropdownItem>,
-                                        <DropdownItem id="Python" key="Python" data-testid="form-type-auto"><i>Python</i></DropdownItem>,
-                                        <DropdownItem id="Ruby" key="Ruby" data-testid="form-type-auto"><i>Ruby</i></DropdownItem>,
-                                        <DropdownItem id="TypeScript" key="TypeScript" data-testid="form-type-auto"><i>TypeScript</i></DropdownItem>,
-                                        <DropdownItem id="PHP" key="PHP" data-testid="form-type-auto"><i>PHP</i></DropdownItem>,
-                                        <DropdownItem id="Swift" key="Swift" data-testid="form-type-auto"><i>Swift</i></DropdownItem>,
-                                    ]}
+                        <GridItem span={4}>
+                            <FormGroup
+                                label={<a href="https://github.com/microsoft/kiota#supported-languages">Language</a>}
+                                fieldId="form-language"
+                                isRequired={true}
+                            >
+                                <div>
+                                    <Dropdown
+                                        toggle={
+                                            <DropdownToggle id="form-type-toggle" data-testid="form-type-toggle" onToggle={this.onLanguageToggle} toggleIndicator={CaretDownIcon}>
+                                                { this.state.data.language ? this.state.data.language : "Java" }
+                                            </DropdownToggle>
+                                        }
+                                        onSelect={this.onLanguageSelect}
+                                        isOpen={this.state.languageIsExpanded}
+                                        dropdownItems={[
+                                            <DropdownItem id="CSharp" key="CSharp" data-testid="form-type-auto"><i>CSharp</i></DropdownItem>,
+                                            <DropdownItem id="Go" key="Go" data-testid="form-type-auto"><i>Go</i></DropdownItem>,
+                                            <DropdownItem id="Java" key="Java" data-testid="form-type-auto"><i>Java</i></DropdownItem>,
+                                            <DropdownItem id="PHP" key="PHP" data-testid="form-type-auto"><i>PHP</i></DropdownItem>,
+                                            <DropdownItem id="Python" key="Python" data-testid="form-type-auto"><i>Python</i></DropdownItem>,
+                                            <DropdownItem id="Ruby" key="Ruby" data-testid="form-type-auto"><i>Ruby</i></DropdownItem>,
+                                            <DropdownItem id="Swift" key="Swift" data-testid="form-type-auto"><i>Swift</i></DropdownItem>,
+                                            <DropdownItem id="TypeScript" key="TypeScript" data-testid="form-type-auto"><i>TypeScript</i></DropdownItem>,
+                                        ]}
+                                    />
+                                </div>
+                            </FormGroup>
+                        </GridItem>
+
+                        <GridItem span={12}>
+                            <FormGroup
+                                label="Include Patterns"
+                                fieldId="form-include-patterns"
+                            >
+                                <TextInput
+                                    isRequired={false}
+                                    type="text"
+                                    id="form-include-patterns"
+                                    data-testid="form-include-patterns"
+                                    name="form-include-patterns"
+                                    aria-describedby="form-include-patterns-helper"
+                                    value={this.state.data.includePatterns}
+                                    placeholder="The Include Patterns to be used"
+                                    onChange={this.onIncludePatternsChange}
                                 />
-                            </div>
-                        </FormGroup>
+                            </FormGroup>
+                        </GridItem>
+
+                        <GridItem span={12}>
+                            <FormGroup
+                                label="Exclude Patterns"
+                                fieldId="form-exclude-patterns"
+                            >
+                                <TextInput
+                                    isRequired={false}
+                                    type="text"
+                                    id="form-exclude-patterns"
+                                    data-testid="form-exclude-patterns"
+                                    name="form-exclude-patterns"
+                                    aria-describedby="form-exclude-patterns-helper"
+                                    value={this.state.data.excludePatterns}
+                                    placeholder="The Exclude Patterns to be used"
+                                    onChange={this.onExcludePatternsChange}
+                                />
+                            </FormGroup>
+                        </GridItem>
 
                     </Grid>
                 </Form>
@@ -177,17 +220,31 @@ export class GenerateClientModal extends PureComponent<GenerateClientModalProps,
                 content: this.props.artifactContent,
                 clientClassName: "MyClient",
                 namespaceName: "io.dummy",
-                language: "Java"
+                language: "Java",
+                includePatterns: "",
+                excludePatterns: "",
             },
             languageIsExpanded: false,
             isValid: true,
             downloadLink: "",
             isErrorVisible: false,
             isDownloadLinkVisible: false,
+            isGenerating: false,
         };
     }
 
     private doGenerate = async (): Promise<void> => {
+        this.setMultiState({
+            data: {
+                ...this.state.data,
+            },
+            languageIsExpanded: false,
+            isValid: false,
+            isErrorVisible: false,
+            isDownloadLinkVisible: true,
+            isGenerating: true,
+        });
+
         const global = window as any;
 
         if (global.kiota !== undefined && global.kiota.generate !== undefined) {
@@ -208,6 +265,7 @@ export class GenerateClientModal extends PureComponent<GenerateClientModalProps,
                     downloadLink: zip,
                     isErrorVisible: false,
                     isDownloadLinkVisible: true,
+                    isGenerating: false,
                 });
             } catch (e) {
                 this.setSingleState("isErrorVisible", true);
@@ -235,6 +293,7 @@ export class GenerateClientModal extends PureComponent<GenerateClientModalProps,
             downloadLink: "",
             isErrorVisible: false,
             isDownloadLinkVisible: false,
+            isGenerating: false,
         }, () => {
             this.validate();
         });
@@ -255,6 +314,7 @@ export class GenerateClientModal extends PureComponent<GenerateClientModalProps,
             downloadLink: "",
             isErrorVisible: false,
             isDownloadLinkVisible: false,
+            isGenerating: false,
         }, () => {
             this.validate();
         });
@@ -271,6 +331,41 @@ export class GenerateClientModal extends PureComponent<GenerateClientModalProps,
             downloadLink: "",
             isErrorVisible: false,
             isDownloadLinkVisible: false,
+            isGenerating: false,
+        }, () => {
+            this.validate();
+        });
+    };
+
+    private onIncludePatternsChange = (value: string): void => {
+        this.setMultiState({
+            data: {
+                ...this.state.data,
+                includePatterns: value,
+            },
+            languageIsExpanded: false,
+            isValid: this.state.isValid,
+            downloadLink: "",
+            isErrorVisible: false,
+            isDownloadLinkVisible: false,
+            isGenerating: false,
+        }, () => {
+            this.validate();
+        });
+    };
+
+    private onExcludePatternsChange = (value: string): void => {
+        this.setMultiState({
+            data: {
+                ...this.state.data,
+                excludePatterns: value,
+            },
+            languageIsExpanded: false,
+            isValid: this.state.isValid,
+            downloadLink: "",
+            isErrorVisible: false,
+            isDownloadLinkVisible: false,
+            isGenerating: false,
         }, () => {
             this.validate();
         });
diff --git a/ui/src/services/groups/groups.service.ts b/ui/src/services/groups/groups.service.ts
index d745bf30c1..e93ce6f7df 100644
--- a/ui/src/services/groups/groups.service.ts
+++ b/ui/src/services/groups/groups.service.ts
@@ -69,6 +69,8 @@ export interface EditableMetaData {
 export interface ClientGeneration {
     clientClassName: string;
     namespaceName: string;
+    includePatterns: string,
+    excludePatterns: string,
     language: string;
     content: string;
 }
diff --git a/ui/webpack.common.js b/ui/webpack.common.js
index e735626750..15694d24d0 100644
--- a/ui/webpack.common.js
+++ b/ui/webpack.common.js
@@ -92,7 +92,7 @@ module.exports = (env, argv) => {
         onBuildStart:{
           scripts: [
             'rm -rf client-gen/dist',
-            'curl -sL https://github.com/andreaTP/apicurio-client-gen-poc/releases/download/0.0.7/dist.tar.gz | tar -xz -C client-gen'
+            'curl -sL https://github.com/andreaTP/apicurio-client-gen-poc/releases/download/0.0.8/dist.tar.gz | tar -xz -C client-gen'
           ],
           blocking: true,
           parallel: false