Merge pull request #8311 from amplication/next

Release v1.16.1

ee/packages/git-sync-manager/src/models.ts

@@ -724,6 +724,7 @@ export enum EnumDataType {
   DateTime = 'DateTime',
   DecimalNumber = 'DecimalNumber',
   Email = 'Email',
+  File = 'File',
   GeographicLocation = 'GeographicLocation',
   Id = 'Id',
   Json = 'Json',

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

@@ -22,6 +22,7 @@
   .select-field__control {
     @include textField;
     padding: 0;
+    height: auto;
 
     &--is-focused,
     &:hover {

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

@@ -9,6 +9,7 @@ import Select, {
   MultiValue,
   SingleValue,
 } from "react-select";
+import Creatable from "react-select/creatable";
 import { OptionItem } from "../types";
 import { LABEL_CLASS, LABEL_VALUE_CLASS } from "../constants";
 import { Props as InputToolTipProps } from "../InputTooltip/InputTooltip";
@@ -22,6 +23,7 @@ export type Props = {
   options: OptionItem[];
   isMulti?: boolean;
   isClearable?: boolean;
+  isCreatable?: boolean;
   disabled?: boolean;
   inputToolTip?: InputToolTipProps | undefined;
 };
@@ -32,6 +34,7 @@ export const SelectField = ({
   options,
   isMulti,
   isClearable,
+  isCreatable,
   disabled,
   inputToolTip,
 }: Props) => {
@@ -55,10 +58,21 @@ export const SelectField = ({
   const value = useMemo(() => {
     const values = field.value || [];
 
+    if (isCreatable && isMulti && Array.isArray(values)) {
+      const currOptions = options.filter((option) =>
+        values.includes(option.value)
+      );
+      const newOptions = values
+        .filter((value) => !options.find((option) => option.value === value))
+        .map((value) => ({ value, label: value }));
+
+      return [...currOptions, ...newOptions];
+    }
+
     return isMulti
       ? options.filter((option) => values.includes(option.value))
       : options.find((option) => option.value === values);
-  }, [field, isMulti, options]);
+  }, [field, isMulti, options, isCreatable]);
 
   const groupedOptions = useMemo(() => {
     if (!options || options.length === 0) {
@@ -93,18 +107,37 @@ export const SelectField = ({
     >
       <label className={LABEL_CLASS}>
         <Label text={label} inputToolTip={inputToolTip} />
-        <Select
-          components={{ Option: CustomOption }}
-          className="select-field__container"
-          classNamePrefix="select-field"
-          {...field}
-          isMulti={isMulti}
-          isClearable={isClearable}
-          value={value}
-          onChange={handleChange}
-          options={groupedOptions}
-          isDisabled={disabled}
-        />
+        {isCreatable ? (
+          <Creatable
+            components={
+              options?.length
+                ? { Option: CustomOption }
+                : { DropdownIndicator: null }
+            }
+            className="select-field__container"
+            classNamePrefix="select-field"
+            {...field}
+            isMulti={isMulti}
+            isClearable={isClearable}
+            value={value}
+            onChange={handleChange}
+            options={groupedOptions}
+            isDisabled={disabled}
+          />
+        ) : (
+          <Select
+            components={{ Option: CustomOption }}
+            className="select-field__container"
+            classNamePrefix="select-field"
+            {...field}
+            isMulti={isMulti}
+            isClearable={isClearable}
+            value={value}
+            onChange={handleChange}
+            options={groupedOptions}
+            isDisabled={disabled}
+          />
+        )}
       </label>
       <ErrorMessage name={name} component="div" className="text-input__error" />
     </div>

package.json

@@ -72,6 +72,7 @@
     "@opentelemetry/id-generator-aws-xray": "^1.2.1",
     "@primer/react": "^35.14.1",
     "@prisma/client": "^5.10.2",
+    "@react-hook/resize-observer": "^1.2.6",
     "@segment/analytics-node": "^2.0.0",
     "@sendgrid/mail": "^7.7.0",
     "@stigg/node-server-sdk": "v2.49.0",

packages/amplication-cli/src/models.ts

@@ -724,6 +724,7 @@ export enum EnumDataType {
   DateTime = 'DateTime',
   DecimalNumber = 'DecimalNumber',
   Email = 'Email',
+  File = 'File',
   GeographicLocation = 'GeographicLocation',
   Id = 'Id',
   Json = 'Json',

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

@@ -0,0 +1,62 @@
+import classNames from "classnames";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+
+import useResizeObserver from "@react-hook/resize-observer";
+
+const DEFAULT_MIN_WIDTH_CLASSES: { [key: string]: number }[] = [
+  { xxl: 1400 },
+  { xl: 1200 },
+  { lg: 992 },
+  { md: 768 },
+  { sm: 576 },
+];
+
+type Props = {
+  children: React.ReactNode;
+  className: string;
+  minWidthClasses?: { [key: string]: number }[]; // the array must be sorted by the breakpoint size, the first breakpoint should be the largest
+};
+
+const useWidth = (target) => {
+  const [width, setWidth] = useState(0);
+
+  useLayoutEffect(() => {
+    setWidth(target.current.getBoundingClientRect());
+  }, [target]);
+
+  useResizeObserver(target, (entry) => setWidth(entry.contentRect.width));
+  return width;
+};
+
+function ResponsiveContainer({
+  children,
+  className,
+  minWidthClasses = DEFAULT_MIN_WIDTH_CLASSES,
+}: Props) {
+  const divRef = useRef(null);
+  const width = useWidth(divRef);
+
+  const [responsiveClassName, setResponsiveClassName] = useState<string>("");
+
+  useEffect(() => {
+    if (minWidthClasses) {
+      const breakPoint = minWidthClasses.filter(
+        (minWidthClass) => width > Object.values(minWidthClass)[0]
+      );
+
+      const classes = breakPoint.map(
+        (minWidthClass) => `${className}--${Object.keys(minWidthClass)[0]}`
+      );
+
+      setResponsiveClassName(classes.join(" "));
+    }
+  }, [className, minWidthClasses, width]);
+
+  return (
+    <div ref={divRef} className={classNames(className, responsiveClassName)}>
+      {children}
+    </div>
+  );
+}
+
+export default ResponsiveContainer;

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

@@ -84,6 +84,19 @@ export const SchemaField = ({
         case "object": {
           return <OptionSet label={label} name={fieldName} />;
         }
+        case "string": {
+          return (
+            <SelectField
+              label={label}
+              name={fieldName}
+              // If enumOptions is null, options will be an empty array and will allow the user to create new options
+              options={enumOptions || []}
+              isMulti
+              isClearable
+              isCreatable={enumOptions === null}
+            />
+          );
+        }
         default: {
           throw new Error(
             `Unexpected propertySchema.items.type: ${propertySchema.type}`

packages/amplication-client/src/Entity/constants.ts

@@ -118,6 +118,10 @@ export const DATA_TYPE_TO_LABEL_AND_ICON: {
     label: "Roles",
     icon: "users",
   },
+  [models.EnumDataType.File]: {
+    label: "File",
+    icon: "file",
+  },
 };
 
 export const ENTITY_FIELD_ENUM_MAPPER: {
@@ -178,4 +182,5 @@ export const ENTITY_FIELD_ENUM_MAPPER: {
   [models.EnumDataType.Username]: {},
   [models.EnumDataType.Password]: {},
   [models.EnumDataType.Roles]: {},
+  [models.EnumDataType.File]: {},
 };

packages/amplication-client/src/Layout/WelcomePage.tsx

@@ -122,7 +122,7 @@ function WelcomePage({
             textAlign={EnumTextAlign.Center}
             underline
           >
-            <a href="https://amplication.com/privacy" target="privacy">
+            <a href="https://amplication.com/privacy-policy" target="privacy">
               privacy policy
             </a>
           </Text>

packages/amplication-client/src/User/constants.ts

@@ -10,7 +10,7 @@ export const DEFAULT_PAGE_SOURCE = "default";
 export const SIGN_IN_PAGE_CONTENT: PageContentOptions = {
   [DEFAULT_PAGE_SOURCE]: {
     name: "Amplication",
-    title: "Instantly generate quality Node.js services",
+    title: "Instantly generate quality backend services",
     subTitle: "Just code what matters.",
     logo: amplicationLogo,
     message: "",

packages/amplication-client/src/Workspaces/ResourceList.scss

@@ -7,3 +7,11 @@ $resource-list-width: 400px;
     min-width: $resource-list-width;
   }
 }
+
+.workspaces-layout__main_content--xl {
+  .resource-list {
+    &__content {
+      flex-direction: row;
+    }
+  }
+}

packages/amplication-client/src/Workspaces/ResourceList.tsx

@@ -155,10 +155,10 @@ function ResourceList() {
       </Panel>
 
       <FlexItem
-        direction={EnumFlexDirection.Row}
+        className={`${CLASS_NAME}__content`}
+        direction={EnumFlexDirection.Column}
         itemsAlign={EnumItemsAlign.Stretch}
       >
-        <UsageInsights projectIds={[currentProject?.id]} />
         <Panel
           panelStyle={EnumPanelStyle.Bordered}
           className={`${CLASS_NAME}__resources`}
@@ -190,6 +190,7 @@ function ResourceList() {
             </List>
           )}
         </Panel>
+        <UsageInsights projectIds={[currentProject?.id]} />
       </FlexItem>
 
       <Snackbar

packages/amplication-client/src/Workspaces/WorkspaceLayout.tsx

@@ -26,6 +26,7 @@ import RedeemCoupon from "../User/RedeemCoupon";
 import PendingChanges from "../VersionControl/PendingChanges";
 import LastCommit from "../VersionControl/LastCommit";
 import { EnumSubscriptionStatus } from "../models";
+import ResponsiveContainer from "../Components/ResponsiveContainer";
 
 const MobileMessage = lazy(() => import("../Layout/MobileMessage"));
 
@@ -221,9 +222,9 @@ const WorkspaceLayout: React.FC<Props> = ({
               <RedeemCoupon />
 
               <div className={`${moduleClass}__page_content`}>
-                <div className={`${moduleClass}__main_content`}>
+                <ResponsiveContainer className={`${moduleClass}__main_content`}>
                   {innerRoutes}
-                </div>
+                </ResponsiveContainer>
 
                 {currentProject ? (
                   <div className={`${moduleClass}__changes_menu`}>

packages/amplication-client/src/Workspaces/WorkspaceOverview.scss

@@ -0,0 +1,9 @@
+@import "../style/index.scss";
+
+.workspaces-layout__main_content--xl {
+  .workspace-overview {
+    &__content {
+      flex-direction: row;
+    }
+  }
+}

packages/amplication-client/src/Workspaces/WorkspaceOverview.tsx

@@ -28,6 +28,7 @@ import { EnumSubscriptionPlan } from "../models";
 import { GET_WORKSPACE_MEMBERS, TData as MemberListData } from "./MemberList";
 import WorkspaceSelector, { getWorkspaceColor } from "./WorkspaceSelector";
 import { UsageInsights } from "../UsageInsights/UsageInsights";
+import "./WorkspaceOverview.scss";
 
 const CLASS_NAME = "workspace-overview";
 const PAGE_TITLE = "Workspace Overview";
@@ -115,15 +116,15 @@ export const WorkspaceOverview = () => {
         </FlexItem>
       </Panel>
       <FlexItem
-        direction={EnumFlexDirection.Row}
+        className={`${CLASS_NAME}__content`}
+        direction={EnumFlexDirection.Column}
         itemsAlign={EnumItemsAlign.Stretch}
       >
-        <UsageInsights projectIds={projectIds} />
-
         <ProjectList
           projects={projectsList}
           workspaceId={currentWorkspace.id}
         />
+        <UsageInsights projectIds={projectIds} />
       </FlexItem>
     </PageContent>
   );

packages/amplication-client/src/models.ts

@@ -727,6 +727,7 @@ export enum EnumDataType {
   DateTime = 'DateTime',
   DecimalNumber = 'DecimalNumber',
   Email = 'Email',
+  File = 'File',
   GeographicLocation = 'GeographicLocation',
   Id = 'Id',
   Json = 'Json',