Adding Prettier and fixing up eslint version
Issue-ID: SDC-1094
Change-Id: Ie83ad95a03899345dd90235daf0323cbe3bc6afd
Signed-off-by: Einav Weiss Keidar <einavw@amdocs.com>
diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/PermissionsView.jsx b/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/PermissionsView.jsx
index 26f8450..74d88f0 100644
--- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/PermissionsView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/PermissionsView.jsx
@@ -22,61 +22,108 @@
const maxContributors = 6;
-function extraUsersTooltip (extraUsers) {
- return (
- <Tooltip className='extra-users-tooltip' id='extra-users-tooltip-id'>
- {extraUsers.map(extraUser => <div key={extraUser.userId} className='extra-user'>{extraUser.fullName}</div>)}
- </Tooltip>
- );
+function extraUsersTooltip(extraUsers) {
+ return (
+ <Tooltip className="extra-users-tooltip" id="extra-users-tooltip-id">
+ {extraUsers.map(extraUser => (
+ <div key={extraUser.userId} className="extra-user">
+ {extraUser.fullName}
+ </div>
+ ))}
+ </Tooltip>
+ );
}
-const User = ({user, isCurrentUser, dataTestId}) => (
- <SVGIcon className={`user-view ${isCurrentUser ? 'current-user' : ''}`} name='user' label={user.fullName} labelPosition='right' color='primary'
- data-test-id={dataTestId}/>
+const User = ({ user, isCurrentUser, dataTestId }) => (
+ <SVGIcon
+ className={`user-view ${isCurrentUser ? 'current-user' : ''}`}
+ name="user"
+ label={user.fullName}
+ labelPosition="right"
+ color="primary"
+ data-test-id={dataTestId}
+ />
);
-const Owner = ({owner, isCurrentUser}) => (
- <div className='owner-view'>
- <div className='permissions-view-title'>{i18n('Owner')}</div>
- <User user={owner} isCurrentUser={isCurrentUser} dataTestId='owner'/>
- </div>
+const Owner = ({ owner, isCurrentUser }) => (
+ <div className="owner-view">
+ <div className="permissions-view-title">{i18n('Owner')}</div>
+ <User user={owner} isCurrentUser={isCurrentUser} dataTestId="owner" />
+ </div>
);
-const Contributors = ({contributors, owner, currentUser, onManagePermissions, isManual}) => {
- let extraUsers = contributors.length - maxContributors;
- return (
- <div className='contributors-view'>
- <div className='permissions-view-title'>{i18n('Contributors')}</div>
- {contributors.slice(0, maxContributors).map(contributor =>
- <User key={contributor.userId} user={contributor} isCurrentUser={contributor.userId === currentUser.userId} dataTestId='contributor'/>
- )}
- {extraUsers > 0 &&
- <OverlayTrigger placement='bottom' overlay={extraUsersTooltip(contributors.slice(maxContributors))}>
- <div className='extra-contributors'>{`+${extraUsers}`}</div>
- </OverlayTrigger>
- }
- {currentUser.userId === owner.userId && !isManual &&
- <span
- className='manage-permissions'
- onClick={onManagePermissions}
- data-test-id='versions-page-manage-permissions'>
- {i18n('Manage Permissions')}
- </span>
- }
- </div>
- );
+const Contributors = ({
+ contributors,
+ owner,
+ currentUser,
+ onManagePermissions,
+ isManual
+}) => {
+ let extraUsers = contributors.length - maxContributors;
+ return (
+ <div className="contributors-view">
+ <div className="permissions-view-title">{i18n('Contributors')}</div>
+ {contributors
+ .slice(0, maxContributors)
+ .map(contributor => (
+ <User
+ key={contributor.userId}
+ user={contributor}
+ isCurrentUser={
+ contributor.userId === currentUser.userId
+ }
+ dataTestId="contributor"
+ />
+ ))}
+ {extraUsers > 0 && (
+ <OverlayTrigger
+ placement="bottom"
+ overlay={extraUsersTooltip(
+ contributors.slice(maxContributors)
+ )}>
+ <div className="extra-contributors">{`+${extraUsers}`}</div>
+ </OverlayTrigger>
+ )}
+ {currentUser.userId === owner.userId &&
+ !isManual && (
+ <span
+ className="manage-permissions"
+ onClick={onManagePermissions}
+ data-test-id="versions-page-manage-permissions">
+ {i18n('Manage Permissions')}
+ </span>
+ )}
+ </div>
+ );
};
-const PermissionsView = ({owner, contributors, currentUser = {}, onManagePermissions, isManual}) => (
- <div className='versions-page-permissions-view-wrapper'>
- <div className='permissions-view-wrapper-title'>{i18n('Permissions')}</div>
- <div className='permissions-view-content'>
- <div className='permissions-view'>
- <Owner owner={owner} isCurrentUser={owner.userId === currentUser.userId} />
- <Contributors owner={owner} contributors={contributors} currentUser={currentUser} onManagePermissions={onManagePermissions} isManual={isManual}/>
- </div>
- </div>
- </div>
+const PermissionsView = ({
+ owner,
+ contributors,
+ currentUser = {},
+ onManagePermissions,
+ isManual
+}) => (
+ <div className="versions-page-permissions-view-wrapper">
+ <div className="permissions-view-wrapper-title">
+ {i18n('Permissions')}
+ </div>
+ <div className="permissions-view-content">
+ <div className="permissions-view">
+ <Owner
+ owner={owner}
+ isCurrentUser={owner.userId === currentUser.userId}
+ />
+ <Contributors
+ owner={owner}
+ contributors={contributors}
+ currentUser={currentUser}
+ onManagePermissions={onManagePermissions}
+ isManual={isManual}
+ />
+ </div>
+ </div>
+ </div>
);
export default PermissionsView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/VersionList.jsx b/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/VersionList.jsx
index 47255eb..d74805e 100644
--- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/VersionList.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/VersionList.jsx
@@ -20,108 +20,177 @@
import i18n from 'nfvo-utils/i18n/i18n.js';
import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
-const formatTime = (time) => {
- if (!time) { return ''; }
+const formatTime = time => {
+ if (!time) {
+ return '';
+ }
- const date = new Date(time);
- const options = {
- year: 'numeric',
- month: 'short',
- day: 'numeric',
- hour: '2-digit',
- minute: '2-digit'
- };
- const newDate = date.toLocaleTimeString('en-US', options);
+ const date = new Date(time);
+ const options = {
+ year: 'numeric',
+ month: 'short',
+ day: 'numeric',
+ hour: '2-digit',
+ minute: '2-digit'
+ };
+ const newDate = date.toLocaleTimeString('en-US', options);
- return newDate;
+ return newDate;
};
const DescriptionField = ({ className, text, useTooltip }) => {
- if (useTooltip) {
- return (
- <div className={className}>
- <OverlayTrigger
- placement='bottom'
- overlay={<Tooltip className='version-description-tooltip' id='version-description-tooltip'>{text}</Tooltip>}>
- <div className='description-text'>{text}</div>
- </OverlayTrigger>
- </div>
- );
- }
- return <div className={className}>{text}</div>;
+ if (useTooltip) {
+ return (
+ <div className={className}>
+ <OverlayTrigger
+ placement="bottom"
+ overlay={
+ <Tooltip
+ className="version-description-tooltip"
+ id="version-description-tooltip">
+ {text}
+ </Tooltip>
+ }>
+ <div className="description-text">{text}</div>
+ </OverlayTrigger>
+ </div>
+ );
+ }
+ return <div className={className}>{text}</div>;
};
-const VersionListItem = ({ data, onSelectVersion, onNavigateToVersion, onCreateVersion, isHeader, isSelected, isCollaborator }) => {
+const VersionListItem = ({
+ data,
+ onSelectVersion,
+ onNavigateToVersion,
+ onCreateVersion,
+ isHeader,
+ isSelected,
+ isCollaborator
+}) => {
+ let { modificationTime, name, status, description, additionalInfo } = data;
+ const modificationText = !isHeader
+ ? formatTime(modificationTime)
+ : i18n('Last Edited On');
- let {modificationTime, name, status, description, additionalInfo} = data;
- const modificationText = !isHeader ? formatTime(modificationTime) : i18n('Last Edited On');
+ return (
+ <div
+ data-test-id="version-item-row"
+ className={`version-item-row ${
+ isHeader ? 'header-row' : 'clickable'
+ } ${isSelected ? 'selected' : ''}`}
+ onClick={e => {
+ e.stopPropagation();
+ onSelectVersion();
+ onNavigateToVersion();
+ }}>
+ <div
+ className={`version-item-field ${
+ isHeader ? 'header-field item-version' : 'item-version'
+ }`}>
+ {name}
+ </div>
+ <div
+ className={`version-item-field ${
+ isHeader ? 'header-field item-status' : 'item-status'
+ }`}>
+ {status}
+ </div>
+ <div
+ className={`version-item-field ${
+ isHeader ? 'header-field' : 'item-last-edited'
+ }`}>
+ {modificationText}
+ </div>
+ <DescriptionField
+ className={`version-item-field ${
+ isHeader
+ ? 'header-field header-description'
+ : 'item-description'
+ }`}
+ useTooltip={!isHeader && description}
+ text={description}
+ />
- return (
- <div
- data-test-id='version-item-row'
- className={`version-item-row ${isHeader ? 'header-row' : 'clickable'} ${isSelected ? 'selected' : ''}`}
- onClick={e => {
- e.stopPropagation();
- onSelectVersion();
- onNavigateToVersion();
- }}>
- <div className={`version-item-field ${isHeader ? 'header-field item-version' : 'item-version'}`}>{name}</div>
- <div className={`version-item-field ${isHeader ? 'header-field item-status' : 'item-status'}`}>{status}</div>
- <div className={`version-item-field ${isHeader ? 'header-field' : 'item-last-edited'}`}>{modificationText}</div>
- <DescriptionField
- className={`version-item-field ${isHeader ? 'header-field header-description' : 'item-description'}`}
- useTooltip={!isHeader && description}
- text={description} />
-
- {
- isHeader ?
- <div className='version-item-field header-field actions'>{i18n('Actions')}</div>
- :
- <div className='version-item-field item-actions'>
- <div className='version-item-field item-select'>
- <SVGIcon
- name='check-circle'
- data-test-id='versions-page-select-version'
- onClick={e => {e.stopPropagation(); onNavigateToVersion();}}
- label={i18n('Go to this Version')}
- labelPosition='right' />
- </div>
- <div className='version-item-field item-create'>
- {!isHeader && isCollaborator && additionalInfo.OptionalCreationMethods.length > 0 && onCreateVersion &&
- <SVGIcon
- name='plus-circle'
- data-test-id='versions-page-create-version'
- onClick={e => { e.stopPropagation(); onCreateVersion(); }}
- label={i18n('Create New Version')}
- labelPosition='right'
- disabled={!isCollaborator || !onCreateVersion} />
- }
- </div>
- </div>
- }
- </div>
- );
-
+ {isHeader ? (
+ <div className="version-item-field header-field actions">
+ {i18n('Actions')}
+ </div>
+ ) : (
+ <div className="version-item-field item-actions">
+ <div className="version-item-field item-select">
+ <SVGIcon
+ name="check-circle"
+ data-test-id="versions-page-select-version"
+ onClick={e => {
+ e.stopPropagation();
+ onNavigateToVersion();
+ }}
+ label={i18n('Go to this Version')}
+ labelPosition="right"
+ />
+ </div>
+ <div className="version-item-field item-create">
+ {!isHeader &&
+ isCollaborator &&
+ additionalInfo.OptionalCreationMethods.length > 0 &&
+ onCreateVersion && (
+ <SVGIcon
+ name="plus-circle"
+ data-test-id="versions-page-create-version"
+ onClick={e => {
+ e.stopPropagation();
+ onCreateVersion();
+ }}
+ label={i18n('Create New Version')}
+ labelPosition="right"
+ disabled={
+ !isCollaborator || !onCreateVersion
+ }
+ />
+ )}
+ </div>
+ </div>
+ )}
+ </div>
+ );
};
-const VersionList = ({ versions, onSelectVersion, onNavigateToVersion, onCreateVersion, selectedVersion, isCollaborator }) => (
- <div className='version-list'>
- <VersionListItem
- data={{ name: i18n('Version'), status: i18n('Status'), description: i18n('Description') }}
- isHeader />
- <div className='version-list-items'>
- {versions.map(version =>
- <VersionListItem
- key={version.id}
- data={version}
- onSelectVersion={() => onSelectVersion({version})}
- onNavigateToVersion={() => onNavigateToVersion({version})}
- onCreateVersion={onCreateVersion ? () => onCreateVersion({version}) : false}
- isSelected={selectedVersion === version.id}
- isCollaborator={isCollaborator} />
- )}
- </div>
- </div>
+const VersionList = ({
+ versions,
+ onSelectVersion,
+ onNavigateToVersion,
+ onCreateVersion,
+ selectedVersion,
+ isCollaborator
+}) => (
+ <div className="version-list">
+ <VersionListItem
+ data={{
+ name: i18n('Version'),
+ status: i18n('Status'),
+ description: i18n('Description')
+ }}
+ isHeader
+ />
+ <div className="version-list-items">
+ {versions.map(version => (
+ <VersionListItem
+ key={version.id}
+ data={version}
+ onSelectVersion={() => onSelectVersion({ version })}
+ onNavigateToVersion={() => onNavigateToVersion({ version })}
+ onCreateVersion={
+ onCreateVersion
+ ? () => onCreateVersion({ version })
+ : false
+ }
+ isSelected={selectedVersion === version.id}
+ isCollaborator={isCollaborator}
+ />
+ ))}
+ </div>
+ </div>
);
export default VersionList;