Fix input focus loss

gimlet-io · Mar 25, 2024 · b45de7a · b45de7a
1 parent 120b73a
commit b45de7a
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 15 deletions.
diff --git a/pkg/dashboard/worker/gitops.go b/pkg/dashboard/worker/gitops.go
@@ -1269,10 +1269,12 @@ func imagepullSecretTemplate(
 		encryptedConfigString = encryptedConfig.(string)
 	}
 
+	secretName := fmt.Sprintf("%s-pullsecret", strings.ToLower(registryString))
 	return sync.GenerateImagePullSecret(
 		manifest.Env,
 		manifest.App,
 		manifest.Namespace,
+		secretName,
 		encryptedConfigString,
 		repoPerEnv,
 	)

diff --git a/pkg/gitops/sync/sync.go b/pkg/gitops/sync/sync.go
@@ -264,7 +264,7 @@ func GenerateKustomizationForApp(
 }
 
 func GenerateImagePullSecret(
-	env, app, namespace string,
+	env, app, namespace, name string,
 	encryptedDockerconfigjson string,
 	singleEnv bool,
 ) (*manifestgen.Manifest, error) {
@@ -279,7 +279,7 @@ func GenerateImagePullSecret(
 			APIVersion: "bitnami.com/v1alpha1",
 		},
 		ObjectMeta: metav1.ObjectMeta{
-			Name:      "regcred",
+			Name:      name,
 			Namespace: namespace,
 			Annotations: map[string]string{
 				"sealedsecrets.bitnami.com/cluster-wide": "true",

diff --git a/web/dashboard/src/views/envConfig/envConfig.jsx b/web/dashboard/src/views/envConfig/envConfig.jsx
@@ -51,6 +51,7 @@ class EnvConfig extends Component {
 
     this.setValues = this.setValues.bind(this);
     this.resetNotificationStateAfterThreeSeconds = this.resetNotificationStateAfterThreeSeconds.bind(this);
+    this.imageWidget = this.imageWidget.bind(this);
     this.setImagePullSecret = this.setImagePullSecret.bind(this);
   }
 
@@ -465,12 +466,16 @@ class EnvConfig extends Component {
   }
 
   setImagePullSecret(secret) {
+    let secretArray = [secret];
+    if (secret === "") {
+      secretArray = []
+    }
     this.setState(prevState => ({
       configFile: {
         ...prevState.configFile,
         values: {
           ...prevState.configFile.values,
-          imagePullSecrets: [secret]
+          imagePullSecrets: secretArray
         }
       }
     }));
@@ -545,6 +550,10 @@ class EnvConfig extends Component {
   //   });
   // };
 
+  imageWidget(props) {
+    return <ImageWidget {...props} setImagePullSecret={this.setImagePullSecret} registry={filterRegistry(this.state.stackConfig, this.state.stackDefinition)} />
+  }
+
   render() {
     const { owner, repo, env, config, action } = this.props.match.params;
     const repoName = `${owner}/${repo}`
@@ -564,7 +573,7 @@ class EnvConfig extends Component {
     }
 
     const customFields = {
-      imageWidget: (props) => <ImageWidget {...props} setImagePullSecret={this.setImagePullSecret} registry={filterRegistry(this.state.stackConfig, this.state.stackDefinition)} />,
+      imageWidget: this.imageWidget,
       sealedSecretWidget: (props) => <SealedSecretWidget {...props} gimletClient={this.props.gimletClient} store={this.props.store} env={env} />,
     }
 

diff --git a/web/dashboard/src/views/envConfig/imageWidget.jsx b/web/dashboard/src/views/envConfig/imageWidget.jsx
@@ -12,11 +12,6 @@ class ImageWidget extends Component {
     };
   }
 
-  // TODO bug input field loses focus on writing
-  componentDidMount() {
-    this.props.setImagePullSecret("regcred")
-  }
-
   defaults(strategy) {
     let repository = ""
     let tag = ""
@@ -68,24 +63,26 @@ class ImageWidget extends Component {
     return (event) => {
       const { registry } = this.props;
       const login = registry[event.target.value].login ?? "your-company"
-      let repository = "";
 
       switch (event.target.value) {
         case 'dockerhubRegistry':
-          repository = `${login}/{{ .APP }}`
+          this.setState({ repository: `${login}/{{ .APP }}` })
+          this.props.setImagePullSecret("dockerhubregistry-pullsecret")
           break;
         case 'ghcrRegistry':
-          repository = `ghcr.io/${login}/{{ .APP }}`
+          this.setState({ repository: `ghcr.io/${login}/{{ .APP }}` })
+          this.props.setImagePullSecret("ghcrregistry-pullsecret")
           break;
         default:
-          repository = "127.0.0.1:32447/{{ .APP }}"
+          this.setState({ repository: "127.0.0.1:32447/{{ .APP }}" })
+          this.props.setImagePullSecret("")
       }
 
       this.setState(
         {
           [name]: event.target.value,
         },
-        () => this.props.onChange({"repository": repository, "tag": this.state.tag, "dockerfile": this.state.dockerfile, "strategy": this.state.strategy, "registry": this.state.registry })
+        () => this.props.onChange({"repository": this.state.repository, "tag": this.state.tag, "dockerfile": this.state.dockerfile, "strategy": this.state.strategy, "registry": this.state.registry })
         );
     };
   }
@@ -185,7 +182,7 @@ class ImageWidget extends Component {
               >
                 {
                   Object.keys(registry).map((item, idx) => {
-                    if (!registry[item].hasOwnProperty("enabled")) {
+                    if (!registry[item]?.hasOwnProperty("enabled")) {
                       return null
                     }