Fixed disrespancies with current (staging/prod) FD

jsapp/js/bemComponents.ts

@@ -258,6 +258,7 @@ bem.FormSidebar__label = makeBem(bem.FormSidebar, 'label');
 bem.FormSidebar__labelText = makeBem(bem.FormSidebar, 'label-text');
 bem.FormSidebar__labelCount = makeBem(bem.FormSidebar, 'label-count');
 bem.FormSidebar__grouping = makeBem(bem.FormSidebar, 'grouping');
+bem.FormSidebar__itemlink = makeBem(bem.FormSidebar, 'itemlink', 'a');
 
 bem.KDrawer = makeBem(null, 'k-drawer');
 bem.KDrawer__primaryIcons = makeBem(bem.KDrawer, 'primary-icons', 'nav');

jsapp/js/components/assetsTable/assetActionButtons.tsx

@@ -270,40 +270,40 @@ class AssetActionButtons extends React.Component<
         clearPopover={this.state.shouldHidePopover}
         popoverSetVisible={this.onPopoverSetVisible}
       >
-        {userCanEdit && isDeployable && (
+        {/* {userCanEdit && isDeployable && (
           <bem.PopoverMenu__link onClick={this.deploy}>
             <i className='k-icon k-icon-deploy' />
             {t('Deploy')}
           </bem.PopoverMenu__link>
-        )}
+        )} */}
 
-        {userCanEdit && assetType === ASSET_TYPES.survey.id && (
+        {/* {userCanEdit && assetType === ASSET_TYPES.survey.id && (
           <bem.PopoverMenu__link onClick={this.replace}>
             <i className='k-icon k-icon-replace' />
             {t('Replace form')}
           </bem.PopoverMenu__link>
-        )}
+        )} */}
 
-        {userCanEdit && assetType !== ASSET_TYPES.collection.id && (
+        {/* {userCanEdit && assetType !== ASSET_TYPES.collection.id && (
           <bem.PopoverMenu__link onClick={this.editLanguages}>
             <i className='k-icon k-icon-language' />
             {t('Manage translations')}
           </bem.PopoverMenu__link>
-        )}
+        )} */}
 
-        {userCanEdit && assetType === ASSET_TYPES.survey.id && (
+        {/* {userCanEdit && assetType === ASSET_TYPES.survey.id && (
           <bem.PopoverMenu__link onClick={this.cloneAsTemplate}>
             <i className='k-icon k-icon-template' />
             {t('Create template')}
           </bem.PopoverMenu__link>
-        )}
+        )} */}
 
-        {downloads.map((dl) => (
+        {/* {downloads.map((dl) => (
           <bem.PopoverMenu__link href={dl.url} key={`dl-${dl.format}`}>
             <i className={`k-icon k-icon-file-${dl.format}`} />
             {t('Download')}&nbsp;{dl.format.toString().toUpperCase()}
           </bem.PopoverMenu__link>
-        ))}
+        ))} */}
 
         {userCanEdit &&
           assetType !== ASSET_TYPES.survey.id &&
@@ -352,32 +352,32 @@ class AssetActionButtons extends React.Component<
             </bem.PopoverMenu__moveTo>,
           ]}
 
-        {userCanEdit &&
+        {/* {userCanEdit &&
           assetType === ASSET_TYPES.survey.id &&
           this.props.has_deployment &&
           !this.props.deployment__active && (
             <bem.PopoverMenu__link onClick={this.unarchive}>
               <i className='k-icon k-icon-archived' />
               {t('Unarchive')}
             </bem.PopoverMenu__link>
-          )}
+          )} */}
 
-        {userCanEdit &&
+        {/* {userCanEdit &&
           assetType === ASSET_TYPES.survey.id &&
           this.props.has_deployment &&
           this.props.deployment__active && (
             <bem.PopoverMenu__link onClick={this.archive}>
               <i className='k-icon k-icon-archived' />
               {t('Archive')}
             </bem.PopoverMenu__link>
-          )}
+          )} */}
 
-        {userCanEdit && (
+        {/* {userCanEdit && (
           <bem.PopoverMenu__link onClick={this.delete}>
             <i className='k-icon k-icon-trash' />
             {t('Delete')}
           </bem.PopoverMenu__link>
-        )}
+        )} */}
       </PopoverMenu>
     );
   }
@@ -438,6 +438,7 @@ class AssetActionButtons extends React.Component<
     const hasDetailsEditable =
       assetType === ASSET_TYPES.template.id ||
       assetType === ASSET_TYPES.collection.id;
+    const isCollection = assetType === ASSET_TYPES.collection.id;
 
     const routeAssetUid = getRouteAssetUid();
 
@@ -446,69 +447,69 @@ class AssetActionButtons extends React.Component<
         onMouseLeave={this.onMouseLeave}
         onMouseEnter={this.onMouseEnter}
       >
-        {this.renderSubButton()}
+        {/* {this.renderSubButton()} */}
 
-        {userCanEdit && assetType !== ASSET_TYPES.collection.id && (
+        {/* {userCanEdit && assetType !== ASSET_TYPES.collection.id && (
           <bem.AssetActionButtons__iconButton
             href={this.getFormBuilderLink()}
             data-tip={t('Edit in Form Builder')}
             className='right-tooltip'
           >
             <i className='k-icon k-icon-edit' />
           </bem.AssetActionButtons__iconButton>
-        )}
+        )} */}
 
-        {userCanEdit && hasDetailsEditable && (
+        {userCanEdit && hasDetailsEditable && isCollection && (
           <bem.AssetActionButtons__iconButton
             onClick={this.modifyDetails}
-            data-tip={t('Modify details')}
+            data-tip={t('Rename Collection')}
             className='right-tooltip'
           >
             <i className='k-icon k-icon-settings' />
           </bem.AssetActionButtons__iconButton>
         )}
 
-        {userCanEdit && (
+        {/* {userCanEdit && (
           <bem.AssetActionButtons__iconButton
             onClick={this.showTagsModal}
             data-tip={t('Edit Tags')}
             className='right-tooltip'
           >
             <i className='k-icon k-icon-tag' />
           </bem.AssetActionButtons__iconButton>
-        )}
+        )} */}
 
-        {userCanEdit && (
+        {/* {userCanEdit && !isCollection && (
           <bem.AssetActionButtons__iconButton
             onClick={this.share}
             data-tip={t('Share')}
             className='right-tooltip'
           >
             <i className='k-icon k-icon-user-share' />
           </bem.AssetActionButtons__iconButton>
-        )}
+        )} */}
 
-        {assetType !== ASSET_TYPES.collection.id && (
+        {/* {assetType !== ASSET_TYPES.collection.id && (
           <bem.AssetActionButtons__iconButton
             onClick={this.clone}
             data-tip={t('Clone')}
             className='right-tooltip'
           >
             <i className='k-icon k-icon-duplicate' />
           </bem.AssetActionButtons__iconButton>
-        )}
+        )} */}
 
-        {assetType === ASSET_TYPES.template.id && (
+        {/* {assetType === ASSET_TYPES.template.id && (
           <bem.AssetActionButtons__iconButton
             onClick={this.cloneAsSurvey}
             data-tip={t('Create project')}
             className='right-tooltip'
           >
             <i className='k-icon k-icon-projects' />
           </bem.AssetActionButtons__iconButton>
-        )}
+        )} */}
 
-        {routeAssetUid &&
+        {/* {routeAssetUid &&
           this.props.asset.parent !== null &&
           !this.props.asset.parent.includes(routeAssetUid) && (
             <bem.AssetActionButtons__iconButton
@@ -518,9 +519,9 @@ class AssetActionButtons extends React.Component<
             >
               <i className='k-icon k-icon-folder' />
             </bem.AssetActionButtons__iconButton>
-          )}
+          )} */}
 
-        {this.renderMoreActions()}
+        {!isCollection && this.renderMoreActions()}
       </bem.AssetActionButtons>
     );
   }

jsapp/js/components/assetsTable/assetsTable.scss

@@ -148,11 +148,16 @@ $assets-table-hover-bg: colors.$kobo-gray-98;
  * AssetsTableRow
  * ========================================================================== */
 
-.assets-table-row {
+ .capitalize {
+  text-transform: capitalize;
+ }
+
+ .assets-table-row {
   display: flex;
   flex-direction: row;
   position: relative;
   align-items: flex-start;
+  background-color: colors.$kobo-gray-96;
 
   &.assets-table-row--asset {
     &:hover {
@@ -352,14 +357,18 @@ $assets-table-hover-bg: colors.$kobo-gray-98;
     }
 
     &.assets-table-row__column--actions {
-      width: 17%;
+      width: 22%;
       text-align: right;
 
       .asset-action-buttons {
-        justify-content: flex-end;
+        justify-content: flex-start;
       }
     }
 
+    &.assets-table-row__column--actions.header {
+      text-align: center;
+    }
+
     .k-icon {
       vertical-align: middle;
     }

jsapp/js/components/assetsTable/assetsTable.tsx

@@ -197,7 +197,7 @@ export default class AssetsTable extends React.Component<
         displayLabel = t('Questions');
       }
       return (
-        <bem.AssetsTableRow__column m={columnDef.id} disabled>
+        <bem.AssetsTableRow__column m={columnDef.id} className="header" disabled>
           {displayLabel}
         </bem.AssetsTableRow__column>
       );

jsapp/js/components/assetsTable/assetsTableRow.tsx

@@ -52,6 +52,10 @@ class AssetsTableRow extends React.Component<AssetsTableRowProps> {
     );
   }
 
+  modifyDetails() {
+    assetUtils.modifyDetails(this.props.asset);
+  }
+
   onDeleteComplete() {
     // do nothing
   }
@@ -117,7 +121,7 @@ class AssetsTableRow extends React.Component<AssetsTableRowProps> {
           {settings_version}
         </bem.AssetsTableRow__column>
 
-        <bem.AssetsTableRow__column m='item-type'>
+        <bem.AssetsTableRow__column m='item-type' className='capitalize'>
           {ASSET_TYPES[this.props.asset.asset_type].label}
         </bem.AssetsTableRow__column>
 
@@ -129,7 +133,16 @@ class AssetsTableRow extends React.Component<AssetsTableRowProps> {
           {formatTime(this.props.asset.date_modified)}
         </bem.AssetsTableRow__column>
 
-        <bem.AssetsTableRow__column m='actions'>
+        { this.props.asset.asset_type !== ASSET_TYPES.collection.id && (
+        <bem.AssetsTableRow__buttons>
+          <AssetActionButtons asset={this.props.asset} />
+        </bem.AssetsTableRow__buttons>
+        )}
+
+        <bem.AssetsTableRow__column
+          m='actions'
+          className={this.props.asset.asset_type === ASSET_TYPES.collection.id ? 'no-actions-buttons' : 'with-actions-buttons' }
+        >
 
           <bem.AssetActionButtons>
 
@@ -143,6 +156,16 @@ class AssetsTableRow extends React.Component<AssetsTableRowProps> {
               </bem.AssetActionButtons__iconButton>
             )}
 
+            {userCanEdit && this.props.asset.asset_type === ASSET_TYPES.collection.id && (
+              <bem.AssetActionButtons__iconButton
+                onClick={this.modifyDetails}
+                data-tip={t('Rename Collection')}
+                className='right-tooltip'
+              >
+                <i className='k-icon k-icon-edit' />
+              </bem.AssetActionButtons__iconButton>
+            )}
+
             {userCanEdit && (
               <bem.AssetActionButtons__iconButton
                 onClick={this.showTagsModal}

jsapp/js/components/formEditors.es6

@@ -6,8 +6,8 @@ import Reflux from 'reflux';
 import editableFormMixin from '../editorMixins/editableForm';
 import {update_states} from 'js/constants';
 import {ROUTES} from 'js/router/routerConstants';
-import mixins from '../mixins';
 import {withRouter} from 'js/router/legacy';
+import { ASSET_TYPES } from '../constants';
 
 /**
  * These are the components that are used for Form Builder routes.
@@ -56,10 +56,19 @@ class LibraryAssetEditorComponent extends React.Component {
     if (this.props.router.path === ROUTES.NEW_LIBRARY_CHILD) {
       this.state.asset = false;
       this.state.parentAsset = this.props.params.uid;
-      this.state.backRoute = ROUTES.LIBRARY_ITEM.replace(
-        ':uid',
-        this.props.params.uid
-      );
+      this.state.backRoute = ROUTES.LIBRARY;
+    }
+
+    if (this.props.router.path === ROUTES.NEW_LIBRARY_TEMPLATE_ITEM) {
+      this.state.asset = false;
+      this.state.desiredAssetType = ASSET_TYPES.template.id;
+    }
+
+    if (this.props.router.path === ROUTES.NEW_LIBRARY_TEMPLATE_ITEM_CHILD) {
+      this.state.asset = false;
+      this.state.desiredAssetType = ASSET_TYPES.template.id;
+      this.state.parentAsset = this.props.params.uid;
+      this.state.backRoute = ROUTES.LIBRARY;
     }
 
     if (this.props.router.searchParams.get('back')) {

jsapp/js/components/library/assetRoute.es6

@@ -112,8 +112,6 @@ class AssetRoute extends React.Component {
                 </bem.FormView__cell>
               }
 
-              <AssetPublicButton asset={this.state.asset}/>
-
               <AssetActionButtons asset={this.state.asset}/>
             </bem.FormView__cell>