Added Character Limit on Page Names
added char limit on page names
MODIFY
src/client/src/components/DraggableSidebarItem/index.tsx
src/client/src/components/DraggableSidebarItem/index.tsx
@@ -20,6 +20,10 @@ const messages = defineMessages({
changeItemName: {
id: "draggableSidebarItem.changeItemName",
defaultMessage: "Change Item Name"
+ },
+ pageNameMaxLength: {
+ id: "draggableSidebarItem.pageNameMaxLength",
+ defaultMessage: "Page name must be under {maxLength} characters long. "
}
});
@@ -36,6 +40,7 @@ const DraggableSidebarItem = ({
reorderSvgUrl,
itemTitle,
handleInputChange,
+ maxInputLength,
idx,
azureFunctionName,
withIndent,
@@ -55,6 +60,7 @@ const DraggableSidebarItem = ({
closeSvgUrl: string;
itemTitle?: string;
handleInputChange?: (e: any, idx: number) => void;
+ maxInputLength?: number;
idx?: number;
azureFunctionName?: IFunctionName;
withIndent?: boolean;
@@ -65,6 +71,7 @@ const DraggableSidebarItem = ({
isAzureFunction?: boolean;
totalPageCount?: number;
}) => {
+ const [pageNameMaxLength, setPageNameMaxLength] = React.useState(false);
const handleKeyDown = (event: React.KeyboardEvent<SVGSVGElement>) => {
if (event.key === KEY_EVENTS.ENTER || event.key === KEY_EVENTS.SPACE) {
handleCloseOnClick();
@@ -73,6 +80,17 @@ const DraggableSidebarItem = ({
const handleCloseOnClick = () => {
idx && handleCloseClick && handleCloseClick(idx - 1); // correction for idx + 1 to prevent 0th falsey behaviour
};
+
+ const handleKeyDownInput = (e: React.KeyboardEvent<HTMLInputElement>) => {
+ const inputKeyCheck = /^[A-Za-z0-9_\- ]$/
+ const event = e.target as HTMLInputElement;
+ if (event.value.length === maxInputLength && inputKeyCheck.test(e.key)) {
+ setPageNameMaxLength(true);
+ e.stopPropagation();
+ } else {
+ setPageNameMaxLength(false);
+ }
+ }
return (
<div>
{itemTitle && (
@@ -116,12 +134,14 @@ const DraggableSidebarItem = ({
className={classnames(styles.input, {
[styles.azureFunctionNameInput]: isAzureFunction
})}
+ maxLength={maxInputLength}
value={page ? page.title : azureFunctionName!.title}
onChange={e => {
if (handleInputChange && idx) {
handleInputChange(e.target.value, idx - 1);
}
}}
+ onKeyDown={handleKeyDownInput}
/>
) : (
<input
@@ -136,6 +156,19 @@ const DraggableSidebarItem = ({
)}
</div>
</div>
+ {pageNameMaxLength && (<div
+ className={classnames({
+ [styles.errorTextContainer]:
+ withIndent || reorderSvgUrl || true,
+ [styles.textContainer]: !withIndent,
+ [styles.largeIndentContainer]: withLargeIndent
+ })}
+ >
+ {intl.formatMessage(messages
+ .pageNameMaxLength,
+ { maxLength: maxInputLength }
+ )}
+ </div>)}
{((page && !page.isValidTitle) ||
(azureFunctionName && !azureFunctionName.isValidTitle)) && (
<div

MODIFY
src/client/src/components/SortableSelectionList/index.tsx
src/client/src/components/SortableSelectionList/index.tsx
@@ -18,11 +18,13 @@ const SortableSidebarItem = SortableElement(
idx,
handleInputChange,
handleCloseClick,
- totalPageCount
+ totalPageCount,
+ maxInputLength
}: {
page: any;
idx: number;
handleInputChange: any;
+ maxInputLength?: number;
handleCloseClick?: (idx: number) => void;
totalPageCount: number;
}) => {
@@ -34,6 +36,7 @@ const SortableSidebarItem = SortableElement(
reorderSvgUrl={withLocalPath(reorder)}
handleInputChange={handleInputChange}
handleCloseClick={handleCloseClick}
+ maxInputLength={maxInputLength}
idx={idx + 1}
totalPageCount={totalPageCount}
/>
@@ -88,11 +91,13 @@ const SortableList = SortableContainer(
pages,
isSummaryPage,
handleInputChange,
- handleCloseClick
+ handleCloseClick,
+ maxInputLength
}: {
pages: ISelected[];
isSummaryPage?: boolean;
handleInputChange: any;
+ maxInputLength?: number;
handleCloseClick?: (idx: number) => void;
}) => {
const totalPageCount = pages.length;
@@ -108,6 +113,7 @@ const SortableList = SortableContainer(
idx={idx}
page={page}
handleInputChange={handleInputChange}
+ maxInputLength={maxInputLength}
handleCloseClick={handleCloseClick}
totalPageCount={totalPageCount}
/>

MODIFY
src/client/src/containers/SortablePageList/index.tsx
src/client/src/containers/SortablePageList/index.tsx
@@ -21,7 +21,7 @@ import { AppState } from "../../reducers";
import { Dispatch } from "redux";
import RootAction from "../../actions/ActionType";
-const MAX_PAGE_NAME_LENGTH = 50;
+import { PAGE_NAME_CHARACTER_LIMIT } from "../../utils/constants"
interface ISortablePageListProps {
selectedPages: any[];
@@ -86,10 +86,8 @@ const SortablePageList = (props: Props) => {
break;
}
}
- if (pages[idx].title.length < MAX_PAGE_NAME_LENGTH) {
setPages(pages);
props.selectPages(pages);
- }
};
const onSortEnd = ({
oldIndex,
@@ -138,6 +136,7 @@ const SortablePageList = (props: Props) => {
<SortableList
pages={selectedPages}
isSummaryPage={isSummaryPage}
+ maxInputLength={PAGE_NAME_CHARACTER_LIMIT}
onSortEnd={onSortEnd}
distance={DRAG_PIXEL_THRESHOLD}
handleInputChange={handleInputChange}

MODIFY
src/client/src/utils/constants.ts
src/client/src/utils/constants.ts
@@ -9,6 +9,8 @@ const NEW_PROJECT = "/";
const PROJECT_NAME_CHARACTER_LIMIT = 50;
+const PAGE_NAME_CHARACTER_LIMIT = 50;
+
const MAX_PAGES_ALLOWED = 20;
const WEB_TEMPLATE_STUDIO_LINKS = {
@@ -151,6 +153,7 @@ export {
COSMOS_APIS,
DEVELOPMENT,
PROJECT_NAME_CHARACTER_LIMIT,
+ PAGE_NAME_CHARACTER_LIMIT,
MAX_PAGES_ALLOWED,
WEB_TEMPLATE_STUDIO_LINKS,
FRAMEWORK_TYPE,

Added Character Limit on Page Names (#940)

added char limit on page names