style(client):DTO property list UX

libs/ui/design-system/src/lib/components/TextInput/TextInput.scss

@@ -44,6 +44,10 @@
     resize: none;
   }
 
+  textarea.text-input__textarea--small {
+    height: var(--textarea-height-small);
+  }
+
   &--has-error {
     input,
     textarea {

libs/ui/design-system/src/lib/components/TextInput/TextInput.tsx

@@ -12,6 +12,7 @@ export type Props = React.HTMLProps<HTMLTextAreaElement | HTMLInputElement> & {
   hideLabel?: boolean;
   hasError?: boolean;
   textarea?: boolean;
+  textareaSize?: "small" | "large";
   labelType?: LabelTypes;
   inputToolTip?: InputToolTipProps | undefined;
 };
@@ -28,6 +29,7 @@ export function TextInput({
   textarea,
   labelType,
   inputToolTip,
+  textareaSize = "large",
   ...rest
 }: Props) {
   const key = rest.key || rest.autoFocus?.toString();
@@ -48,6 +50,7 @@ export function TextInput({
             <textarea
               {...rest}
               ref={inputRef as React.Ref<HTMLTextAreaElement>}
+              className={`${CLASS_NAME}__textarea--${textareaSize}`}
             />
           ) : (
             <input

libs/ui/design-system/src/lib/components/VerticalNavigation/VerticalNavigationItem.tsx

@@ -1,5 +1,5 @@
-import React, { useCallback } from "react";
-import { NavLink } from "react-router-dom";
+import React, { useCallback, useEffect } from "react";
+import { NavLink, useRouteMatch } from "react-router-dom";
 import { Icon } from "../Icon/Icon";
 import classNames from "classnames";
 import { VerticalNavigation } from "./VerticalNavigation";
@@ -30,6 +30,10 @@ export function VerticalNavigationItem({
 }: Props) {
   const [expanded, setExpanded] = React.useState(false);
 
+  const match = useRouteMatch({
+    path: to,
+  });
+
   const handleExpand = useCallback(
     (e: any) => {
       e.preventDefault();
@@ -40,6 +44,12 @@ export function VerticalNavigationItem({
     [onExpand, setExpanded]
   );
 
+  useEffect(() => {
+    if (match) {
+      setExpanded(true);
+    }
+  }, [match?.path]);
+
   return (
     <>
       <NavLink

packages/amplication-client/src/Assistant/Assistant.scss

@@ -110,6 +110,7 @@ $avatar-size: 30px;
     gap: var(--default-spacing);
     overflow-y: auto;
     padding: var(--default-spacing);
+    padding-left: 0;
     font-size: var(--tag-font-size);
   }
 

packages/amplication-client/src/Components/OptionalDescriptionField.tsx

@@ -1,7 +1,16 @@
 import React, { useState, useCallback } from "react";
 import { useField } from "formik";
 import { isEmpty } from "lodash";
-import { TextField, Icon } from "@amplication/ui/design-system";
+import {
+  TextField,
+  Icon,
+  FlexItem,
+  EnumGapSize,
+  Text,
+  EnumTextStyle,
+  EnumItemsAlign,
+  EnumFlexDirection,
+} from "@amplication/ui/design-system";
 import { Button, EnumButtonStyle } from "../Components/Button";
 
 type Props = {
@@ -16,21 +25,40 @@ const OptionalDescriptionField = (props: Props) => {
 
   const { value } = meta;
 
-  const showField = !isEmpty(value) || isOpen;
+  const disabled = props.disabled || false;
 
   const handleClick = useCallback(() => {
     setIsOpen(true);
   }, [setIsOpen]);
 
-  return showField ? (
+  return isOpen ? (
     <TextField
       name={props.name}
       label={props.label}
       disabled={props.disabled}
       autoComplete="off"
       textarea
+      textareaSize="small"
       rows={3}
     />
+  ) : !isEmpty(value) ? (
+    <div>
+      <FlexItem direction={EnumFlexDirection.Column} gap={EnumGapSize.None}>
+        <Text textStyle={EnumTextStyle.Label}>Description</Text>
+        <FlexItem gap={EnumGapSize.Small} itemsAlign={EnumItemsAlign.End}>
+          <Text textStyle={EnumTextStyle.Description}>{value}</Text>
+
+          <Button
+            onClick={handleClick}
+            buttonStyle={EnumButtonStyle.Text}
+            disabled={disabled}
+            title="Edit description"
+          >
+            <Icon icon="edit" />
+          </Button>
+        </FlexItem>
+      </FlexItem>
+    </div>
   ) : (
     <Button onClick={handleClick} buttonStyle={EnumButtonStyle.Text}>
       <Icon icon="plus" />

packages/amplication-client/src/Entity/EntityForm.tsx

@@ -123,6 +123,7 @@ const EntityForm = React.memo(({ entity, resourceId, onSubmit }: Props) => {
                 <TextField
                   autoComplete="off"
                   textarea
+                  textareaSize="small"
                   rows={3}
                   name="description"
                   label="Description"

packages/amplication-client/src/ModuleDto/ModuleDtoListItem.tsx

@@ -28,13 +28,14 @@ export const ModuleDtoListItem = ({ module, moduleDto }: Props) => {
     <ListItem
       to={dtoUrl}
       showDefaultActionIcon={false}
-      direction={EnumFlexDirection.Row}
-      itemsAlign={EnumItemsAlign.Center}
+      direction={EnumFlexDirection.Column}
+      itemsAlign={EnumItemsAlign.Start}
       gap={EnumGapSize.Default}
     >
       <Text textStyle={EnumTextStyle.Tag} textColor={EnumTextColor.White}>
         {moduleDto.name}
       </Text>
+      <Text textStyle={EnumTextStyle.Description}>{moduleDto.description}</Text>
     </ListItem>
   );
 };

packages/amplication-client/src/ModuleDtoProperty/ModuleDtoProperty.tsx

@@ -30,7 +30,7 @@ const ModuleDtoProperty = ({
   onPropertyChanged,
 }: Props) => {
   const { addEntity } = useContext(AppContext);
-  const [editMode, setEditMode] = useState<boolean>(true);
+  const [editMode, setEditMode] = useState<boolean>(false);
   const [originalName, setOriginalName] = useState<string>(
     moduleDtoProperty.name
   );

packages/amplication-client/src/ModuleDtoProperty/ModuleDtoPropertyPreview.tsx

@@ -1,4 +1,9 @@
-import { EnumGapSize, FlexItem } from "@amplication/ui/design-system";
+import {
+  EnumGapSize,
+  EnumTextColor,
+  FlexItem,
+  Text,
+} from "@amplication/ui/design-system";
 import useModuleDto from "../ModuleDto/hooks/useModuleDto";
 import * as models from "../models";
 import "./ModuleDtoPropertyPreview.scss";
@@ -18,19 +23,23 @@ const ModuleDtoPropertyPreview = ({ dtoProperty }: Props) => {
   return (
     <FlexItem className={CLASS_NAME} gap={EnumGapSize.Small}>
       {dtoProperty.name}
-      {dtoProperty.isOptional ? "?" : ""}:{" "}
-      {isUnion && dtoProperty.isArray ? "(" : ""}
-      {dtoProperty.propertyTypes.map((type, index) => (
-        <div key={index}>
-          {type.type === models.EnumModuleDtoPropertyType.Dto
-            ? availableDtosDictionary[type.dtoId]?.name || UNAVAILABLE_DTO
-            : type.type}
-          {type.isArray ? "[]" : ""}
-          {isUnion && index < dtoProperty.propertyTypes.length - 1 ? " | " : ""}
-        </div>
-      ))}
-      {isUnion && dtoProperty.isArray ? ")" : ""}
-      {dtoProperty.isArray ? "[]" : ""}
+      <Text textColor={EnumTextColor.Black20}>
+        {dtoProperty.isOptional ? "?" : ""}:{" "}
+        {isUnion && dtoProperty.isArray ? "(" : ""}
+        {dtoProperty.propertyTypes.map((type, index) => (
+          <span key={index}>
+            {type.type === models.EnumModuleDtoPropertyType.Dto
+              ? availableDtosDictionary[type.dtoId]?.name || UNAVAILABLE_DTO
+              : type.type}
+            {type.isArray ? "[]" : ""}
+            {isUnion && index < dtoProperty.propertyTypes.length - 1
+              ? " | "
+              : ""}
+          </span>
+        ))}
+        {isUnion && dtoProperty.isArray ? ")" : ""}
+        {dtoProperty.isArray ? "[]" : ""}
+      </Text>
     </FlexItem>
   );
 };

packages/amplication-client/src/Modules/ModuleForm.tsx

@@ -64,6 +64,7 @@ const ModuleForm = ({ onSubmit, defaultValues, disabled }: Props) => {
           name="description"
           label="Description"
           textarea
+          textareaSize="small"
           rows={3}
           disabled={disabled}
         />