fix: refresh issue on add project & host url update and process undefined on dev server

package.json

@@ -131,6 +131,7 @@
     },
     "resolutions": {
         "**/@typescript-eslint/eslint-plugin": "^5.15.0",
-        "**/@typescript-eslint/parser": "^5.15.0"
+        "**/@typescript-eslint/parser": "^5.15.0",
+        "react-error-overlay": "6.0.9"
     }
 }

src/components/common/formFields/ButtonWithLoader.tsx

@@ -6,9 +6,10 @@ export interface ButtonProps {
     rootClassName: string
     isLoading: boolean
     loaderColor: string
-    onClick: (event) => void
+    onClick?: (event) => void
     dataTestId?: string
     children?: React.ReactNode
+    type?: 'submit' | 'reset' | 'button'
 }
 
 export class ButtonWithLoader extends Component<ButtonProps> {
@@ -24,11 +25,11 @@ export class ButtonWithLoader extends Component<ButtonProps> {
     render() {
         return (
             <button
-                type="button"
+                type={this.props.type ?? 'button'}
                 data-testid={this.props.dataTestId}
                 disabled={!!this.props.disabled}
                 className={`${this.props.rootClassName}`}
-                onClick={this.clickHandler}
+                onClick={this.props.onClick && this.clickHandler}
             >
                 {this.props.isLoading ? <Progressing /> : this.props.children}
             </button>

src/components/hostURL/HostURL.tsx

@@ -32,6 +32,7 @@ export default class HostURLConfiguration extends Component<HostURLConfigProps,
             isHostUrlValid: true,
             saveLoading: false,
         })
+        this.onSave = this.onSave.bind(this);
     }
 
     componentDidMount() {
@@ -88,7 +89,8 @@ export default class HostURLConfiguration extends Component<HostURLConfigProps,
         })
     }
 
-    onSave(): void {
+    onSave(e: React.SyntheticEvent): void {
+        e.preventDefault();
         if (!this.state.form.value.length) {
             toast.error("Some required fields are missing");
             return;
@@ -174,7 +176,7 @@ export default class HostURLConfiguration extends Component<HostURLConfigProps,
                     <p className="form__subtitle">
                         Host URL is the domain address at which your devtron dashboard can be reached. &nbsp;{' '}
                     </p>
-                    <form className="bcn-0 br-8 bw-1 en-2 pb-22 " data-testid="form-host-url">
+                    <form className="bcn-0 br-8 bw-1 en-2 pb-22 " data-testid="form-host-url" onSubmit={this.onSave}>
                         <InfoColourBar
                             classname="hosturl__description m-20"
                             message={
@@ -204,6 +206,7 @@ export default class HostURLConfiguration extends Component<HostURLConfigProps,
                                     onChange={(event) => this.handleChange(event)}
                                     autoComplete="off"
                                     data-testid="host-url-textbox"
+                                    name="host-url"
                                 />
                             </div>
                             {!this.state.isHostUrlValid ? this.renderBlankHostField() : ''}
@@ -221,12 +224,9 @@ export default class HostURLConfiguration extends Component<HostURLConfigProps,
                             </div>
                             <div className="form__buttons pt-20">
                                 <button
-                                    type="button"
+                                    type="submit"
                                     tabIndex={2}
                                     disabled={this.state.saveLoading}
-                                    onClick={(e) => {
-                                        this.onSave()
-                                    }}
                                     className="cta"
                                     data-testid="host-url-update-button"
                                 >

src/components/project/Project.tsx

@@ -62,7 +62,7 @@ export class Project extends Component<ProjectProps, ProjectState>  {
         this.props.handleChange(event, this.props.index, 'name')
     }
 
-    saveProjectData = (event: React.MouseEvent) => {
+    saveProjectData = (event: React.SyntheticEvent) => {
         event.preventDefault()
         this.props.saveProject(this.props.index, 'name')
     }
@@ -101,7 +101,7 @@ export class Project extends Component<ProjectProps, ProjectState>  {
         let errorMessage = this.props.errorMessage;
         return (
             <div>
-                <form className="white-card p-24 mb-16 dashed">
+                <form className="white-card p-24 mb-16 dashed" onSubmit={this.saveProjectData}>
                     <div className="white-card__header"> {this.props.id ? 'Edit project' : 'Add Project'} </div>
                     <label className="form__row">
                         <span className="form__label dc__required-field">Project name</span>
@@ -130,10 +130,10 @@ export class Project extends Component<ProjectProps, ProjectState>  {
                                 Cancel
                             </button>
                             <ButtonWithLoader
+                                type="submit"
                                 rootClassName="cta"
                                 loaderColor="#ffffff"
                                 isLoading={this.props.loadingData}
-                                onClick={this.saveProjectData}
                                 dataTestId="project-save-button"
                             >
                                 Save
@@ -153,4 +153,4 @@ export class Project extends Component<ProjectProps, ProjectState>  {
             return this.renderForm();
         }
     }
-}
+}

src/components/userGroups/AppPermissions.tsx

@@ -71,7 +71,7 @@ export default function AppPermissions({
             setDirectPermission(emptyPermissionArr)
             return
         }
-        populateDataFromAPI(data.roleFilters)
+        populateDataFromAPI(data.roleFilters ?? [])
     }, [data])
     const { customRoles } = useUserGroupContext()
     function setAllApplication(directRolefilter: APIRoleFilter, projectId) {

yarn.lock

@@ -1293,10 +1293,10 @@
   resolved "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-9.0.1.tgz"
   integrity sha512-6It2EVfGskxZCQhuykrfnALg7oVeiI6KclWSmGDqB0AiInVrTGB9Jp9i4/Ad21u9Jde/voVQz6eFX/eSg/UsPA==
 
-"@devtron-labs/devtron-fe-common-lib@0.0.29":
-  version "0.0.29"
-  resolved "https://registry.yarnpkg.com/@devtron-labs/devtron-fe-common-lib/-/devtron-fe-common-lib-0.0.29.tgz#e790da5bba80bdbfb2ddc6e14185a13c4b3cc663"
-  integrity sha512-nM5QT+pjGjDHviLP7Ezaw1riBC/Nx8m6cPTCR74FQTQYvf/ATnvSdjK8fdPckCepiqw7iSGQjpPvZ3+ipwQbmg==
+"@devtron-labs/devtron-fe-common-lib@0.0.33":
+  version "0.0.33"
+  resolved "https://registry.yarnpkg.com/@devtron-labs/devtron-fe-common-lib/-/devtron-fe-common-lib-0.0.33.tgz#15df17bf7b740e1475081d21db84cc8b724abb4a"
+  integrity sha512-86ywW5ThvLeMOB4fDVhEhq1TTQepIDk4LL1RhnfuhjVarFnXQ9OJNDH8nrA3kMBS/JYmYVvaCK3UtLzso7VTXQ==
   dependencies:
     sass "^1.56.2"
     tslib "^2.4.1"
@@ -12826,10 +12826,10 @@ react-ellipsis-with-tooltip@^1.0.8:
     cz-conventional-changelog "^3.0.2"
     semantic-release "^15.13.1"
 
-react-error-overlay@^6.0.3:
-  version "6.0.10"
-  resolved "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz"
-  integrity sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA==
+react-error-overlay@6.0.9, react-error-overlay@^6.0.3:
+  version "6.0.9"
+  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
+  integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
 
 react-fontawesome@^1.6.1:
   version "1.7.1"