Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

EPMRPP-79223 || add max-width and change onClick target integration item #3363

Merged
merged 5 commits into from
Dec 27, 2022
Merged

EPMRPP-79223 || add max-width and change onClick target integration item #3363

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c758d4d
EPMRPP-79223 || add max-width and change onClick target integration item
Dec 20, 2022
4c9d16a
EPMRPP-79223 || fix: add fill color on arrow if hover item
Dec 22, 2022
f46c47b
EPMRPP-79223, EPMRPP-79899 || fix: create container component
Dec 27, 2022
d8b7442
EPMRPP-79223, EPMRPP-79899 || fix: small formatting
Dec 27, 2022
b011fc1
EPMRPP-79223, EPMRPP-79899 || fix: move to separate component
Dec 27, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions app/src/pages/inside/projectSettingsPageContainer/content/defectTypes/defectTypes.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ import {
MAX_DEFECT_TYPES_COUNT,
WARNING_DEFECT_TYPES_COUNT,
} from 'pages/inside/projectSettingsPageContainer/content/defectTypes/constants';
import { CenteredContainerForPage } from 'pages/inside/projectSettingsPageContainer';
import { SystemMessage } from 'componentLibrary/systemMessage';
import { COMMON_LOCALE_KEYS } from 'common/constants/localization';
import { PROJECT_SETTINGS_DEFECT_TYPES_EVENTS } from 'analyticsEvents/projectSettingsPageEvents';
Expand Down Expand Up @@ -145,7 +146,7 @@ export const DefectTypes = ({ setHeaderTitleNode }) => {
}, [defectTypes, canAddNewDefectType, isEditable]);

return (
<>
<CenteredContainerForPage>
<TabDescription>{formatMessage(messages.description)}</TabDescription>
<Divider />
{(isInformationMessage || !canAddNewDefectType) && (
Expand Down Expand Up @@ -218,7 +219,7 @@ export const DefectTypes = ({ setHeaderTitleNode }) => {
);
})}
</div>
</>
</CenteredContainerForPage>
);
};
DefectTypes.propTypes = {
Expand Down
2 changes: 1 addition & 1 deletion app/src/pages/inside/projectSettingsPageContainer/content/integrations/integrations.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ export const Integrations = () => {
{query.subPage && !!Object.keys(plugin).length ? (
<IntegrationInfo goBackHandler={goBackHandler} data={plugin} integrationId={query.id} />
) : (
<div className={cx('integrations')}>
<div>
Bam6ycha marked this conversation as resolved.
Show resolved Hide resolved
<IntegrationsList
availableIntegrations={availableGroupedPlugins}
onItemClick={onItemClick}
Expand Down
7 changes: 0 additions & 7 deletions app/src/pages/inside/projectSettingsPageContainer/content/integrations/integrations.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,6 @@
* limitations under the License.
*/

.integrations {
margin-left: 49px;
@media (max-width: $SCREEN_XS_MAX) {
margin-left: 0;
}
}

.preloader {
position: absolute;
top: 50%;
Expand Down
6 changes: 2 additions & 4 deletions ...grationInfo/integrationCollection/integrationCollectionItem/integrationCollectionItem.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ export const IntegrationCollectionItem = ({
openIntegration(item);
};
return (
<li className={cx('instances-list-item', { disabled })}>
<li onClick={itemClickHandler} role="row" className={cx('instances-list-item', { disabled })}>
<div className={cx('item-data')}>
<div className={cx('general-info')}>
<h4 className={cx('integration-name')}>{title}</h4>
Expand All @@ -78,9 +78,7 @@ export const IntegrationCollectionItem = ({
</span>
</div>

<div onClick={itemClickHandler} className={cx('arrow-control')}>
{Parser(ArrowIcon)}
</div>
<div className={cx('arrow-control')}>{Parser(ArrowIcon)}</div>
</li>
);
};
Expand Down
13 changes: 8 additions & 5 deletions ...rationInfo/integrationCollection/integrationCollectionItem/integrationCollectionItem.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,20 @@
border-radius: 8px;
background-color: $COLOR--bg-000;
margin-bottom: 8px;
cursor: pointer;

&:hover {
box-shadow: $BOX_SHADOW--item-hover;
.arrow-control {
svg {
fill: $COLOR--e-400;
}
}
}

&.disabled {
cursor: default;

.integration-name {
opacity: 0.4;
}
Expand Down Expand Up @@ -84,15 +92,10 @@
.arrow-control {
width: 16px;
height: 16px;
cursor: pointer;

svg {
fill: $COLOR--e-300;

&:hover {
fill: $COLOR--e-400;
}

&:active {
fill: $COLOR--e-200;
}
Expand Down
1 change: 1 addition & 0 deletions .../projectSettingsPageContainer/content/integrations/integrationsList/integrationsList.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
.integrations-list {
display: flex;
flex-direction: column;
align-items: center;
}

.integrations-group {
Expand Down
5 changes: 3 additions & 2 deletions app/src/pages/inside/projectSettingsPageContainer/content/notifications/notifications.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import { isEmailIntegrationAvailableSelector } from 'controllers/plugins';
import { showModalAction } from 'controllers/modal';
import { activeProjectRoleSelector, userAccountRoleSelector } from 'controllers/user';
import { EmptyStatePage } from 'pages/inside/projectSettingsPageContainer/content/emptyStatePage';
import { CenteredContainerForPage } from 'pages/inside/projectSettingsPageContainer';
import { Button } from 'componentLibrary/button';
import { Checkbox } from 'componentLibrary/checkbox';
import {
Expand Down Expand Up @@ -224,7 +225,7 @@ export const Notifications = ({ setHeaderTitleNode }) => {
return (
<>
{notifications.length ? (
<>
<CenteredContainerForPage>
<Layout description={formatMessage(messages.tabDescription)}>
<FieldElement
withoutProvider
Expand All @@ -251,7 +252,7 @@ export const Notifications = ({ setHeaderTitleNode }) => {
dataAutomationId="notificationsRulesList"
/>
</div>
</>
</CenteredContainerForPage>
) : (
<EmptyStatePage
title={formatMessage(messages.noItemsMessage)}
Expand Down
15 changes: 9 additions & 6 deletions ...src/pages/inside/projectSettingsPageContainer/content/patternAnalysis/patternAnalysis.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import { useIntl } from 'react-intl';
import { canUpdateSettings } from 'common/utils/permissions';
import { activeProjectRoleSelector, userAccountRoleSelector } from 'controllers/user';
import PropTypes from 'prop-types';
import { CenteredContainerForPage } from 'pages/inside/projectSettingsPageContainer';
import { PatternAnalysisContent } from './patternAnalysisContent';
import { EmptyStatePage } from '../emptyStatePage/';
import { messages } from './messages';
Expand Down Expand Up @@ -66,12 +67,14 @@ export const PatternAnalysis = ({ setHeaderTitleNode }) => {
return (
<>
{patterns.length > 0 ? (
<PatternAnalysisContent
setHeaderTitleNode={setHeaderTitleNode}
onAddPattern={onAddPattern}
patterns={patterns}
disabled={!isAbleToCreate}
/>
<CenteredContainerForPage>
<PatternAnalysisContent
setHeaderTitleNode={setHeaderTitleNode}
onAddPattern={onAddPattern}
patterns={patterns}
disabled={!isAbleToCreate}
/>
</CenteredContainerForPage>
) : (
<EmptyStatePage
title={formatMessage(messages.noPatternAnalysisTitle)}
Expand Down
5 changes: 4 additions & 1 deletion app/src/pages/inside/projectSettingsPageContainer/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,4 +14,7 @@
* limitations under the License.
*/

export { ProjectSettingsPageContainer } from './projectSettingsPageContainer';
export {
ProjectSettingsPageContainer,
CenteredContainerForPage,
} from './projectSettingsPageContainer';
9 changes: 9 additions & 0 deletions app/src/pages/inside/projectSettingsPageContainer/projectSettingsPageContainer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
import React, { useCallback, useMemo, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { FormattedMessage, useIntl } from 'react-intl';
import PropTypes from 'prop-types';
import classNames from 'classnames/bind';
import {
PROJECT_SETTINGS_TAB_PAGE,
Expand Down Expand Up @@ -199,3 +200,11 @@ export const ProjectSettingsPageContainer = () => {
</SettingsLayout>
);
};

export const CenteredContainerForPage = ({ children }) => (
AmsterGet marked this conversation as resolved.
Show resolved Hide resolved
<div className={cx('centred-content')}>{children}</div>
);

Bam6ycha marked this conversation as resolved.
Show resolved Hide resolved
CenteredContainerForPage.propTypes = {
children: PropTypes.node.isRequired,
};
5 changes: 5 additions & 0 deletions app/src/pages/inside/projectSettingsPageContainer/projectSettingsPageContainer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,3 +25,8 @@ $Z-INDEX-PAGE-CONTAINER-HEADER: 2;
.content {
padding: 33px 32px 60px;
}

.centred-content {
margin: 0 auto;
max-width: 1200px;
}