Web: Files: added an error when creating a room without a title

packages/client/src/components/dialogs/CreateEditRoomDialog/CreateRoomDialog.js

@@ -73,6 +73,7 @@ const CreateRoomDialog = ({
   };
 
   const [roomParams, setRoomParams] = useState({ ...startRoomParams });
+  const [isValidTitle, setIsValidTitle] = useState(true);
 
   const setRoomTags = (newTags) =>
     setRoomParams({ ...roomParams, tags: newTags });
@@ -87,6 +88,11 @@ const CreateRoomDialog = ({
   };
 
   const onCreateRoom = async () => {
+    if (!roomParams.title.trim()) {
+      setIsValidTitle(false);
+      return;
+    }
+
     await onCreate({ ...roomParams });
     if (isMountRef.current) {
       setRoomParams(startRoomParams);
@@ -142,6 +148,8 @@ const CreateRoomDialog = ({
             setRoomType={setRoomType}
             setIsScrollLocked={setIsScrollLocked}
             isDisabled={isLoading}
+            isValidTitle={isValidTitle}
+            setIsValidTitle={setIsValidTitle}
           />
         )}
       </ModalDialog.Body>

packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Params/InputParam.js

@@ -4,10 +4,12 @@ import { StyledParam } from "./StyledParam";
 
 import Label from "@docspace/components/label";
 import TextInput from "@docspace/components/text-input";
+import FieldContainer from "@docspace/components/field-container";
 
 const StyledInputParam = styled(StyledParam)`
   flex-direction: column;
   gap: 4px;
+  max-height: 54px;
 
   .input-label {
     cursor: pointer;
@@ -24,6 +26,8 @@ const InputParam = ({
   onFocus,
   onBlur,
   isDisabled,
+  isValidTitle,
+  errorMessage,
 }) => {
   return (
     <StyledInputParam>
@@ -34,19 +38,32 @@ const InputParam = ({
         htmlFor={id}
         text={title}
       />
-      <TextInput
-        id={id}
-        value={value}
-        onChange={onChange}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        scale
-        placeholder={placeholder}
-        tabIndex={2}
-        isDisabled={isDisabled}
-      />
+
+      <FieldContainer
+        isVertical={true}
+        labelVisible={false}
+        hasError={!isValidTitle}
+        errorMessage={errorMessage}
+      >
+        <TextInput
+          id={id}
+          value={value}
+          onChange={onChange}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          scale
+          placeholder={placeholder}
+          tabIndex={2}
+          isDisabled={isDisabled}
+          hasError={!isValidTitle}
+        />
+      </FieldContainer>
     </StyledInputParam>
   );
 };
 
+InputParam.defaultProps = {
+  isValidTitle: true,
+};
+
 export default InputParam;

packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js

@@ -19,7 +19,7 @@ const StyledSetRoomParams = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
-  gap: 20px;
+  gap: 22px;
 `;
 
 const SetRoomParams = ({
@@ -32,9 +32,13 @@ const SetRoomParams = ({
   setIsScrollLocked,
   isEdit,
   isDisabled,
+  isValidTitle,
+  setIsValidTitle,
 }) => {
-  const onChangeName = (e) =>
+  const onChangeName = (e) => {
+    setIsValidTitle(true);
     setRoomParams({ ...roomParams, title: e.target.value });
+  };
 
   const onChangeIsPrivate = () =>
     setRoomParams({ ...roomParams, isPrivate: !roomParams.isPrivate });
@@ -80,6 +84,8 @@ const SetRoomParams = ({
         value={roomParams.title}
         onChange={onChangeName}
         isDisabled={isDisabled}
+        isValidTitle={isValidTitle}
+        errorMessage={t("Common:RequiredField")}
       />
 
       <TagInput