EPMRPP-96345 || Fix the problems with the organization card

reportportal · Oct 21, 2024 · 1b7726c · 1b7726c
1 parent c81dbad
commit 1b7726c
Show file tree

Hide file tree

Showing 12 changed files with 48 additions and 14 deletions.
diff --git a/app/localization/translated/be.json b/app/localization/translated/be.json
@@ -1562,6 +1562,7 @@
   "OrganizationsPage.createNewOrganization": "Стварыце новую арганізацыю, каб пачаць свой шлях на партале справаздач",
   "OrganizationsPage.noOrganizationsYet": "Пакуль няма арганізацый",
   "OrganizationsPage.noOrganizationsAvailableYet": "Пакуль няма даступных арганізацый",
+  "OrganizationsPage.noLaunches": "Ніякіх запускаў",
   "OrganizationsPage.noResultsDescription": "Вашым крытэрам пошуку або фільтра не знойдзена ніводнага выніку. Калі ласка, паспрабуйце іншыя ключавыя словы або змяніце налады фільтра.",
   "OrganizationsPage.searchPlaceholder": "Пошук па назве",
   "OrganizationsPage.synchedOrganization": "Сінхранізаваная арганізацыя",

diff --git a/app/localization/translated/es.json b/app/localization/translated/es.json
@@ -1553,6 +1553,7 @@
   "OrganizationsPage.createNewOrganization": "Create a new organization to begin your ReportPortal journey",
   "OrganizationsPage.noOrganizationsYet": "No organizations yet",
   "OrganizationsPage.noOrganizationsAvailableYet": "No organizations available yet",
+  "OrganizationsPage.noLaunches": "No launches",
   "OrganizationsPage.noResultsDescription": "Your search or filter criteria didn't match any results. Please try different keywords or adjust your filter settings.",
   "OrganizationsPage.searchPlaceholder": "Buscar por nombre",
   "OrganizationsPage.synchedOrganization": "Synched organization",

diff --git a/app/localization/translated/ru.json b/app/localization/translated/ru.json
@@ -1562,6 +1562,7 @@
   "OrganizationsPage.createNewOrganization": "Создайте новую организацию, чтобы начать свой путь на портале отчетов",
   "OrganizationsPage.noOrganizationsYet": "Пока нет организаций",
   "OrganizationsPage.noOrganizationsAvailableYet": "Пока нет доступных организаций",
+  "OrganizationsPage.noLaunches": "Никаких запусков",
   "OrganizationsPage.noResultsDescription": "Ваши критерии поиска или фильтра не дали никаких результатов. Попробуйте другие ключевые слова или измените настройки фильтра.",
   "OrganizationsPage.searchPlaceholder": "Поиск по названию",
   "OrganizationsPage.synchedOrganization": "Синхронизированная организация",

diff --git a/app/localization/translated/uk.json b/app/localization/translated/uk.json
@@ -1562,6 +1562,7 @@
   "OrganizationsPage.createNewOrganization": "Створіть нову організацію, щоб розпочати свій шлях на порталі звітів",
   "OrganizationsPage.noOrganizationsYet": "Поки немає організацій",
   "OrganizationsPage.noOrganizationsAvailableYet": "Поки що немає доступних організацій",
+  "OrganizationsPage.noLaunches": "Ніяких запусків",
   "OrganizationsPage.noResultsDescription": "Ваші критерії пошуку чи фільтра не відповідають жодному результату. Будь ласка, спробуйте інші ключові слова або змініть налаштування фільтра.",
   "OrganizationsPage.searchPlaceholder": "Пошук по назві",
   "OrganizationsPage.synchedOrganization": "Синхронізована організація",

diff --git a/app/localization/translated/zh.json b/app/localization/translated/zh.json
@@ -1562,6 +1562,7 @@
   "OrganizationsPage.createNewOrganization": "Create a new organization to begin your ReportPortal journey",
   "OrganizationsPage.noOrganizationsYet": "No organizations yet",
   "OrganizationsPage.noOrganizationsAvailableYet": "No organizations available yet",
+  "OrganizationsPage.noLaunches": "No launches",
   "OrganizationsPage.noResultsDescription": "Your search or filter criteria didn't match any results. Please try different keywords or adjust your filter settings.",
   "OrganizationsPage.searchPlaceholder": "按名称搜索",
   "OrganizationsPage.synchedOrganization": "Synched organization",

diff --git a/app/src/components/main/navLink/navLinkWrapper.jsx b/app/src/components/main/navLink/navLinkWrapper.jsx
@@ -35,6 +35,7 @@ export class NavLinkWrapper extends Component {
     onFocus: PropTypes.func,
     onBlur: PropTypes.func,
     location: PropTypes.object,
+    title: PropTypes.string,
   };
 
   static defaultProps = {
@@ -46,6 +47,7 @@ export class NavLinkWrapper extends Component {
     onFocus: () => {},
     onBlur: () => {},
     location: null,
+    title: null,
   };
 
   /*
@@ -97,7 +99,16 @@ export class NavLinkWrapper extends Component {
   };
 
   render() {
-    const { onClick, onFocus, onBlur, children, to, className, activeClassName } = this.props;
+    const {
+      onClick,
+      onFocus,
+      onBlur,
+      children,
+      to,
+      className,
+      activeClassName,
+      title,
+    } = this.props;
 
     return (
       <NavLink
@@ -108,6 +119,7 @@ export class NavLinkWrapper extends Component {
         isActive={this.isActive}
         onFocus={onFocus}
         onBlur={onBlur}
+        title={title}
       >
         {children}
       </NavLink>

diff --git a/app/src/pages/instance/organizationsPage/messages.js b/app/src/pages/instance/organizationsPage/messages.js
@@ -61,6 +61,10 @@ export const messages = defineMessages({
     id: 'OrganizationsPage.latestLaunch',
     defaultMessage: 'The latest launch execution',
   },
+  noLaunches: {
+    id: 'OrganizationsPage.noLaunches',
+    defaultMessage: 'No launches',
+  },
   noResultsDescription: {
     id: 'OrganizationsPage.noResultsDescription',
     defaultMessage:

diff --git a/...s/instance/organizationsPage/organizationsPanelView/organizationCard/organizationCard.jsx b/...s/instance/organizationsPage/organizationsPanelView/organizationCard/organizationCard.jsx
@@ -41,7 +41,7 @@ import { messages } from '../../messages';
 import styles from './organizationCard.scss';
 
 const cx = classNames.bind(styles);
-const THREE_MONTHS = 3600 * 24 * 30 * 1000;
+const THREE_MONTHS = 1000 * 60 * 60 * 24 * 30 * 3;
 
 export const OrganizationCard = ({ organization }) => {
   const { formatMessage } = useIntl();
@@ -55,7 +55,7 @@ export const OrganizationCard = ({ organization }) => {
   const projectsCount = organization.relationships.projects.meta.count;
   const lastLaunch = organization.relationships.launches.meta.last_occurred_at;
   const { value: relativeTime, unit } = getRelativeUnits(new Date(lastLaunch));
-  const isOutdated = Date.now() - new Date(lastLaunch).getTime() > THREE_MONTHS;
+  const isOutdated = lastLaunch && Date.now() - new Date(lastLaunch).getTime() > THREE_MONTHS;
 
   const cartInfo = [
     {
@@ -74,7 +74,11 @@ export const OrganizationCard = ({ organization }) => {
       icon: LastUpdateIcon,
       className: cx('last-update'),
       content: formatMessage(messages.latestLaunch),
-      bottomElement: <FormattedRelativeTime value={relativeTime} unit={unit} numeric="auto" />,
+      bottomElement: lastLaunch ? (
+        <FormattedRelativeTime value={relativeTime} unit={unit} numeric="auto" />
+      ) : (
+        formatMessage(messages.noLaunches)
+      ),
     },
   ];
 
@@ -87,6 +91,7 @@ export const OrganizationCard = ({ organization }) => {
             payload: { organizationSlug: organization.slug },
           }}
           className={cx('organization-link')}
+          title={organization.name}
         >
           {organization.name}
         </NavLink>

diff --git a/.../instance/organizationsPage/organizationsPanelView/organizationCard/organizationCard.scss b/.../instance/organizationsPage/organizationsPanelView/organizationCard/organizationCard.scss
@@ -15,15 +15,15 @@
  */
 
 .organization-card {
+  width: 384px;
+  place-self: center;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   padding: 16px;
   box-sizing: border-box;
   height: 160px;
   border-radius: 8px;
-  min-width: 320px;
-  max-width: 400px;
   box-shadow: $BOX_SHADOW--item;
   background-color: $COLOR--white-two;
 

diff --git a/app/src/pages/instance/organizationsPage/organizationsPanelView/organizationsPanelView.jsx b/app/src/pages/instance/organizationsPage/organizationsPanelView/organizationsPanelView.jsx
@@ -49,10 +49,12 @@ const OrganizationsPanelViewWrapped = ({
     changePage={onChangePage}
     changePageSize={onChangePageSize}
   >
-    <div className={cx('organizations-list')}>
-      {organizationsList.map((organization) => (
-        <OrganizationCard key={organization.id} organization={organization} />
-      ))}
+    <div className={cx('organizations-list-wrapper')}>
+      <div className={cx('organizations-list')}>
+        {organizationsList.map((organization) => (
+          <OrganizationCard key={organization.id} organization={organization} />
+        ))}
+      </div>
     </div>
   </PaginationWrapper>
 );

diff --git a/app/src/pages/instance/organizationsPage/organizationsPanelView/organizationsPanelView.scss b/app/src/pages/instance/organizationsPage/organizationsPanelView/organizationsPanelView.scss
@@ -15,10 +15,16 @@
  */
 
 .organizations-list {
-  display: flex;
-  flex-direction: row;
+  display: grid;
+  grid-template-columns: auto auto;
+  grid-template-columns: repeat(auto-fill, minmax(384px, 384px));
   justify-content: center;
-  flex-wrap: wrap;
   gap: 24px;
   padding-top: 24px;
+  width: 100%;
+}
+
+.organizations-list-wrapper {
+  padding: 0px 96px;
+  width: calc(100% - 192px);
 }
diff --git a/app/src/pages/organization/organizationProjectsPage/modals/addProjectModal.jsx b/app/src/pages/organization/organizationProjectsPage/modals/addProjectModal.jsx
@@ -42,7 +42,7 @@ export const AddProjectModal = ({ data = {}, handleSubmit, anyTouched, invalid }
     <Modal
       title={formatMessage(messages.addProject)}
       okButton={{
-        children: formatMessage(messages.createProject),
+        children: formatMessage(COMMON_LOCALE_KEYS.CREATE),
         onClick: () => {
           handleSubmit(onCreateProject)();
         },