Fixed pages and layouts validation and added No items text when searching (#2715)

Author: jsorohova

src/admin/pages/pageDetailsModal.tsx

@@ -139,7 +139,11 @@ export class PageDetailsModal extends React.Component<PageDetailsModalProps, Pag
         const titleError = validateField(REQUIRED, this.state.page.title);
 
         if (permalinkError || titleError) {
-            this.setState({ errors: { permalink: permalinkError, title: titleError } });
+            const errors = {};
+            if (permalinkError) errors['permalink'] = permalinkError;
+            if (titleError) errors['title'] = titleError;
+
+            this.setState({ errors });
             return;
         }
 

src/admin/pages/pageLayoutDetailsModal.tsx

@@ -111,7 +111,11 @@ export class PageLayoutDetailsModal extends React.Component<PageLayoutModalProps
         const titleError = validateField(REQUIRED, this.state.layout.title);
 
         if (permalinkError || titleError) {
-            this.setState({ errors: { permalinkTemplate: permalinkError, title: titleError } });
+            const errors = {};
+            if (permalinkError) errors['permalink'] = permalinkError;
+            if (titleError) errors['title'] = titleError;
+
+            this.setState({ errors });
             return;
         }
 

src/admin/pages/pages.tsx

@@ -185,17 +185,21 @@ export class Pages extends React.Component<PagesProps, PagesState> {
                         styles={{ root: { marginTop: 20 } }}
                     />
                     <div className="objects-list">
-                        {this.state.isLoading && <Spinner />}
-                        {this.state.pages.map(page =>
-                            <CommandBarButton
-                                iconProps={pageIcon}
-                                text={page.title}
-                                key={page.key}
-                                className="nav-item-list-button"
-                                onRenderText={() => this.renderPageContent(page)}
-                                onClick={async () => await this.router.navigateTo(page.permalink)}
-                            />
-                        )}
+                        {this.state.isLoading
+                            ? <Spinner />
+                            : this.state.pages.length === 0
+                                ? <Text className="no-objects-text">No pages found</Text>
+                                : this.state.pages.map(page =>
+                                    <CommandBarButton
+                                        iconProps={pageIcon}
+                                        text={page.title}
+                                        key={page.key}
+                                        className="nav-item-list-button"
+                                        onRenderText={() => this.renderPageContent(page)}
+                                        onClick={async () => await this.router.navigateTo(page.permalink)}
+                                    />
+                                )
+                        }
                     </div>
                 </PivotItem>
                 <PivotItem headerText="Layouts" itemKey="layouts">
@@ -216,17 +220,21 @@ export class Pages extends React.Component<PagesProps, PagesState> {
                         styles={{ root: { marginTop: 20 } }}
                     />
                     <div className="objects-list">
-                        {this.state.isLoading && <Spinner />}
-                        {this.state.layouts.map(layout =>
-                            <CommandBarButton
-                                iconProps={layoutIcon}
-                                text={layout.title}
-                                key={layout.key}
-                                className="nav-item-list-button"
-                                onRenderText={() => this.renderPageLayoutContent(layout)}
-                                onClick={async () => this.viewManager.setHost({ name: 'layout-host', params: { layoutKey: layout.key } })}
-                            />
-                        )}
+                        {this.state.isLoading
+                            ? <Spinner />
+                            : this.state.layouts.length === 0
+                                ? <Text className="no-objects-text">No layouts found</Text>
+                                : this.state.layouts.map(layout =>
+                                    <CommandBarButton
+                                        iconProps={layoutIcon}
+                                        text={layout.title}
+                                        key={layout.key}
+                                        className="nav-item-list-button"
+                                        onRenderText={() => this.renderPageLayoutContent(layout)}
+                                        onClick={async () => this.viewManager.setHost({ name: 'layout-host', params: { layoutKey: layout.key } })}
+                                    />
+                                )
+                        }
                     </div>
                 </PivotItem>
             </Pivot>

src/themes/designer/styles/admin.scss

@@ -72,6 +72,11 @@
     margin: 10px 0 15px;
 }
 
+.no-objects-text {
+    display: block;
+    padding: 10px 4px;
+}
+
 .nav-item-description-container {
     margin: 10px 8px 20px;