Added Gorkem's labelling strategy to source-to-image flow along with …

…refactoring (openshift#45) * Initial implementation of LabelDropdown, AppDropdown and changes for create item in Dropdown * Added actionItem to dropdown for generic use. Updated labelling strategy in source-to-image * Initial refactoring of source-to-image, changes to dropdown and form input * Created AppNameSelector and added it to s2i and import, fixed resource creation in import flow. * Fix lint errors. * Fixes based on review comments * fix(import): remove dynamically API end point creation (#1) * Add deployment to list of resources * Auto select active namespace in the dropdown * Use prettier and add type to resources
christianvogt · May 7, 2019 · 63aab5e · 63aab5e
1 parent 0c2ec19
commit 63aab5e
Show file tree

Hide file tree

Showing 19 changed files with 1,312 additions and 154 deletions.
diff --git a/frontend/public/components/app.jsx b/frontend/public/components/app.jsx
@@ -284,8 +284,7 @@ class App extends React.PureComponent {
 
                   <LazyRoute path={this._prependActivePerspective('/catalog/create-service-instance')} exact loader={() => import('./service-catalog/create-instance' /* webpackChunkName: "create-service-instance" */).then(m => m.CreateInstancePage)} />
                   <LazyRoute path={this._prependActivePerspective('/k8s/ns/:ns/serviceinstances/:name/create-binding')} exact loader={() => import('./service-catalog/create-binding' /* webpackChunkName: "create-binding" */).then(m => m.CreateBindingPage)} />
-                  <LazyRoute path={this._prependActivePerspective('/catalog/instantiate-template')} exact loader={() => import('./instantiate-template' /* webpackChunkName: "instantiate-template" */).then(m => m.InstantiateTemplatePage)} />
-                  <LazyRoute path={this._prependActivePerspective('/catalog/source-to-image')} exact loader={() => import('./source-to-image' /* webpackChunkName: "source-to-image" */).then(m => m.SourceToImagePage)} />
+                  <LazyRoute path={this._prependActivePerspective('/catalog/source-to-image')} exact loader={() => import('../extend/devconsole/pages/SourceToImage' /* webpackChunkName: "source-to-image" */).then(m => m.SourceToImagePage)} />
 
                   <Route path={this._prependActivePerspective('/k8s/ns/:ns/alertmanagers/:name')} exact render={({match}) => <Redirect to={`/k8s/ns/${match.params.ns}/${referenceForModel(AlertmanagerModel)}/${match.params.name}`} />} />
 

diff --git a/frontend/public/components/utils/dropdown.jsx b/frontend/public/components/utils/dropdown.jsx
@@ -293,7 +293,7 @@ export class Dropdown extends DropdownMixin {
 
   render() {
     const {active, autocompleteText, selectedKey, items, title, bookmarks, keyboardHoverKey, favoriteKey} = this.state;
-    const {autocompleteFilter, autocompletePlaceholder, className, buttonClassName, menuClassName, storageKey, canFavorite, dropDownClassName, titlePrefix, describedBy} = this.props;
+    const {autocompleteFilter, autocompletePlaceholder, actionItem, className, buttonClassName, menuClassName, storageKey, canFavorite, dropDownClassName, titlePrefix, describedBy} = this.props;
 
     const spacerBefore = this.props.spacerBefore || new Set();
     const headerBefore = this.props.headerBefore || {};
@@ -318,6 +318,27 @@ export class Dropdown extends DropdownMixin {
       rows.push(<DropDownRow className={klass} key={key} itemKey={key} content={content} onBookmark={storageKey && this.onBookmark} onclick={this.onClick} selected={selected} hover={hover} />);
     };
 
+    const ActionRow = () => {
+      const { actionTitle, actionKey } = actionItem;
+      const selected = (actionKey === selectedKey) && !this.props.noSelection;
+      const hover = actionKey === keyboardHoverKey;
+      return (
+        <React.Fragment>
+          <DropDownRow
+            className={classNames({'active': selected})}
+            key={`${actionKey}-${actionTitle}`}
+            itemKey={actionKey}
+            content={actionTitle}
+            onclick={this.onClick}
+            selected={selected}
+            hover={hover} />
+          <li className="co-namespace-selector__divider">
+            <div className="dropdown-menu__divider" />
+          </li>
+        </React.Fragment>
+      );
+    };
+
     _.each(items, (v, k) => addItem(k, v));
 
     return <div className={classNames(className)} ref={this.dropdownElement} style={this.props.style}>
@@ -348,6 +369,7 @@ export class Dropdown extends DropdownMixin {
                   onClick={e => e.stopPropagation()} />
               </div>
             }
+            { actionItem ? <ActionRow /> : null}
             { bookMarkRows }
             {_.size(bookMarkRows) ? <li className="co-namespace-selector__divider"><div className="dropdown-menu__divider" /></li> : null}
             {rows}
@@ -362,6 +384,10 @@ Dropdown.propTypes = {
   autocompleteFilter: PropTypes.func,
   autocompletePlaceholder: PropTypes.string,
   canFavorite: PropTypes.bool,
+  actionItem: PropTypes.objectOf(
+    PropTypes.string,
+    PropTypes.string
+  ),
   className: PropTypes.string,
   defaultBookmarks: PropTypes.objectOf(PropTypes.string),
   dropDownClassName: PropTypes.string,