Fix app edit display name issue.

jbouder · Apr 5, 2024 · b3cd375 · b3cd375
1 parent 75d6c9c
commit b3cd375
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 34 deletions.
diff --git a/jhub_apps/static/js/index.js b/jhub_apps/static/js/index.js
diff --git a/ui/src/components/app-form/app-form.tsx b/ui/src/components/app-form/app-form.tsx
@@ -30,6 +30,7 @@ import {
   currentFile as defaultFile,
   currentFormInput as defaultFormInput,
   currentImage as defaultImage,
+  currentServerName as defaultServerName,
   currentUser as defaultUser,
 } from '../../store';
 import './app-form.css';
@@ -48,7 +49,9 @@ export const AppForm = ({ id }: AppFormProps): React.ReactElement => {
   const [currentFormInput, setCurrentFormInput] = useRecoilState<
     AppFormInput | undefined
   >(defaultFormInput);
-  const [name, setName] = useState('');
+  const [currentServerName, setCurrentServerName] = useRecoilState<
+    string | undefined
+  >(defaultServerName);
   const [currentFile, setCurrentFile] = useRecoilState<File | undefined>(
     defaultFile,
   );
@@ -138,7 +141,7 @@ export const AppForm = ({ id }: AppFormProps): React.ReactElement => {
     if (profiles && profiles.length > 0) {
       const payload: AppFormInput = {
         jhub_app: true,
-        display_name: name || display_name,
+        display_name: currentServerName || display_name,
         description,
         framework,
         thumbnail,
@@ -153,10 +156,10 @@ export const AppForm = ({ id }: AppFormProps): React.ReactElement => {
       navigate(`/server-types${id ? `?id=${id}` : ''}`);
     } else {
       const payload = {
-        servername: name || display_name,
+        servername: currentServerName || display_name,
         user_options: {
           jhub_app: true,
-          name: name || display_name,
+          name: currentServerName || display_name,
           display_name,
           description: description || '',
           framework,
@@ -256,7 +259,7 @@ export const AppForm = ({ id }: AppFormProps): React.ReactElement => {
   // Populate form with existing app data
   useEffect(() => {
     if (formData?.name && formData?.user_options) {
-      setName(formData.name);
+      setCurrentServerName(formData.name);
       reset({
         ...formData.user_options,
         env: formData.user_options.env
@@ -266,13 +269,19 @@ export const AppForm = ({ id }: AppFormProps): React.ReactElement => {
       setIsPublic(formData.user_options.public);
       setCurrentImage(formData.user_options.thumbnail);
     }
-  }, [formData?.name, formData?.user_options, reset, setCurrentImage]);
+  }, [
+    formData?.name,
+    formData?.user_options,
+    reset,
+    setCurrentImage,
+    setCurrentServerName,
+  ]);
 
   // Populate form when returning from server-types page
   useEffect(() => {
     // istanbul ignore next
     if (currentFormInput) {
-      setName(currentFormInput.display_name);
+      setCurrentServerName(currentFormInput.display_name);
       reset({
         display_name: currentFormInput.display_name || '',
         description: currentFormInput.description || '',
@@ -288,7 +297,7 @@ export const AppForm = ({ id }: AppFormProps): React.ReactElement => {
       setIsPublic(currentFormInput.is_public);
       setCurrentImage(currentFormInput.thumbnail);
     }
-  }, [currentFormInput, reset, setCurrentImage]);
+  }, [currentFormInput, reset, setCurrentImage, setCurrentServerName]);
 
   useEffect(() => {
     if (formError) {

diff --git a/ui/src/pages/server-types/server-types.tsx b/ui/src/pages/server-types/server-types.tsx
@@ -22,6 +22,7 @@ import {
   currentFile as defaultFile,
   currentFormInput as defaultFormInput,
   currentImage as defaultImage,
+  currentServerName as defaultServerName,
   currentUser as defaultUser,
 } from '../../store';
 import './server-types.css';
@@ -35,6 +36,9 @@ export const ServerTypes = (): React.ReactElement => {
   const [currentFormInput, setCurrentFormInput] = useRecoilState<
     AppFormInput | undefined
   >(defaultFormInput);
+  const [currentServerName] = useRecoilState<string | undefined>(
+    defaultServerName,
+  );
   const [currentFile] = useRecoilState<File | undefined>(defaultFile);
   const [currentImage] = useRecoilState<string | undefined>(defaultImage);
   const [, setNotification] = useRecoilState<string | undefined>(
@@ -76,10 +80,10 @@ export const ServerTypes = (): React.ReactElement => {
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     const payload = {
-      servername: currentFormInput?.display_name || '',
+      servername: currentServerName || '',
       user_options: {
         jhub_app: true,
-        name: currentFormInput?.display_name || '',
+        name: currentServerName || '',
         display_name: currentFormInput?.display_name || '',
         description: currentFormInput?.description || '',
         framework: currentFormInput?.framework || '',

diff --git a/ui/src/store.ts b/ui/src/store.ts
@@ -25,6 +25,11 @@ const currentNotification = atom<string | undefined>({
   default: undefined,
 });
 
+const currentServerName = atom<string | undefined>({
+  key: 'currentServerName',
+  default: undefined,
+});
+
 const currentFormInput = atom<AppFormInput | undefined>({
   key: 'currentFormInput',
   default: undefined,
@@ -69,6 +74,7 @@ export {
   currentNotification,
   currentOwnershipValue,
   currentSearchValue,
+  currentServerName,
   currentSortValue,
   currentUser,
 };