Skip to content

Commit

Permalink
HeaderControl update style, UI Adjustments Integrations (#2171)
Browse files Browse the repository at this point in the history 
* UI refactor, adjust headercontrolls

Signed-off-by: Adam Tackett <[email protected]>

* comments addressed, ui final feedback

Signed-off-by: Adam Tackett <[email protected]>

* update name

Signed-off-by: Adam Tackett <[email protected]>

---------

Signed-off-by: Adam Tackett <[email protected]>
Co-authored-by: Adam Tackett <[email protected]>
  • Loading branch information
@TackAdam
TackAdam and Adam Tackett authored Sep 18, 2024
1 parent ce6fba4 commit 929d67d
Show file tree
Hide file tree
Showing 21 changed files with 807 additions and 647 deletions.
2 changes: 1 addition & 1 deletion .cypress/integration/integrations_test/integrations.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ describe('Add nginx integration instance flow', () => {

cy.get('button[data-test-subj="popoverModal__deleteButton"]').should('be.disabled');

cy.get(`input.euiFieldText[placeholder="${testInstance}"]`).focus().type(testInstance, {
cy.get(`input.euiFieldText[placeholder="delete"]`).focus().type("delete", {
delay: 50,
});
cy.get('button[data-test-subj="popoverModal__deleteButton"]').should('not.be.disabled');
Expand Down
34 changes: 25 additions & 9 deletions public/components/application_analytics/components/app_table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ import { setNavBreadCrumbs } from '../../../../common/utils/set_nav_bread_crumbs
import { DeleteModal } from '../../common/helpers/delete_modal';
import { HeaderControlledComponentsWrapper } from '../../../../public/plugin_helpers/plugin_headerControl';
import { coreRefs } from '../../../framework/core_refs';
import { TopNavControlButtonData } from '../../../../../../src/plugins/navigation/public';

const newNavigation = coreRefs.chrome?.navGroup.getNavGroupEnabled();

Expand Down Expand Up @@ -234,6 +235,30 @@ export function AppTable(props: AppTableProps) {
<h3>Applications {` (${applications.length})`}</h3>
</EuiTitle>
)}
<EuiFlexItem grow={false}>
<HeaderControlledComponentsWrapper
components={
newNavigation
? [
{
label: createButtonText,
run: () => {
window.location.href = '#/create';
},
iconType: 'plus',
iconSide: 'left',
fill: true,
controlType: 'button',
} as TopNavControlButtonData,
]
: [
<EuiSmallButton fill href="#/create" iconType="plus" iconSide="left">
{createButtonText}
</EuiSmallButton>,
]
}
/>
</EuiFlexItem>
</EuiPageHeader>
<EuiPageContent id="applicationArea" paddingSize="m">
<EuiPageContentHeader>
Expand All @@ -249,15 +274,6 @@ export function AppTable(props: AppTableProps) {
aria-label="Search applications"
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<HeaderControlledComponentsWrapper
components={[
<EuiSmallButton fill href="#/create" iconType="plus" iconSide="left">
{createButtonText}
</EuiSmallButton>,
]}
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPageContentHeader>
{filteredApplications.length > 0 ? (
Expand Down
3 changes: 1 addition & 2 deletions public/components/getting_started/components/getting_started_integrationCards.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,13 +136,12 @@ export const IntegrationCards = () => {
icon={
integration.statics && integration.statics.logo && integration.statics.logo.path ? (
<img
style={{ height: 100, width: 100 }}
alt=""
className="synopsisIcon"
src={`/api/integrations/repository/${integration.name}/static/${integration.statics.logo.path}`}
/>
) : (
<div style={{ height: 100, width: 100, backgroundColor: '#ccc' }} />
<div className="synopsisIcon" style={{ backgroundColor: '#ccc' }} />
)
}
title={integration.displayName || integration.name}
Expand Down
239 changes: 134 additions & 105 deletions ...omponents/integrations/components/__tests__/__snapshots__/added_integration.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -219,63 +219,90 @@ exports[`Added Integration View Test Renders added integration view using dummy
<div
className="euiFlexItem euiFlexItem--flexGrowZero"
>
<EuiSmallButtonIcon
aria-label="Delete"
color="danger"
data-test-subj="deleteInstanceButton"
iconType="trash"
onClick={[Function]}
<EuiToolTip
content={
<FormattedMessage
defaultMessage="Delete this instance"
id="integration.deleteButtonTooltip"
values={Object {}}
/>
}
delay="regular"
position="top"
>
<EuiButtonIcon
aria-label="Delete"
color="danger"
data-test-subj="deleteInstanceButton"
iconType="trash"
onClick={[Function]}
size="s"
<span
className="euiToolTipAnchor"
onKeyUp={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
>
<button
<EuiSmallButtonIcon
aria-label="Delete"
className="euiButtonIcon euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--small"
color="danger"
data-test-subj="deleteInstanceButton"
disabled={false}
display="base"
iconType="trash"
onBlur={[Function]}
onClick={[Function]}
type="button"
onFocus={[Function]}
>
<EuiIcon
aria-hidden="true"
className="euiButtonIcon__icon"
color="inherit"
size="m"
type="trash"
<EuiButtonIcon
aria-label="Delete"
color="danger"
data-test-subj="deleteInstanceButton"
display="base"
iconType="trash"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
size="s"
>
<EuiIconBeaker
aria-hidden={true}
className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
focusable="false"
role="img"
style={null}
<button
aria-label="Delete"
className="euiButtonIcon euiButtonIcon--danger euiButtonIcon--small"
data-test-subj="deleteInstanceButton"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
type="button"
>
<svg
aria-hidden={true}
className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
focusable="false"
height={16}
role="img"
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
<EuiIcon
aria-hidden="true"
className="euiButtonIcon__icon"
color="inherit"
size="m"
type="trash"
>
<path
d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
/>
</svg>
</EuiIconBeaker>
</EuiIcon>
</button>
</EuiButtonIcon>
</EuiSmallButtonIcon>
<EuiIconBeaker
aria-hidden={true}
className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
focusable="false"
role="img"
style={null}
>
<svg
aria-hidden={true}
className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
focusable="false"
height={16}
role="img"
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
/>
</svg>
</EuiIconBeaker>
</EuiIcon>
</button>
</EuiButtonIcon>
</EuiSmallButtonIcon>
</span>
</EuiToolTip>
</div>
</EuiFlexItem>
</div>
Expand All @@ -286,58 +313,68 @@ exports[`Added Integration View Test Renders added integration view using dummy
</EuiPageHeaderSection>
</header>
</EuiPageHeader>
<EuiFlexGroup>
<EuiPanel>
<div
className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
>
<EuiFlexItem>
<EuiFlexGroup>
<div
className="euiFlexItem"
className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
>
<EuiText>
<EuiFlexItem>
<div
className="euiText euiText--medium"
className="euiFlexItem"
>
<h4>
Template
</h4>
<EuiText
size="m"
>
<div
className="euiText euiText--medium"
>
<h4>
Template
</h4>
</div>
</EuiText>
<EuiLink
href="#/available/undefined"
>
<a
className="euiLink euiLink--primary"
href="#/available/undefined"
rel="noreferrer"
/>
</EuiLink>
</div>
</EuiText>
<EuiLink
href="#/available/undefined"
>
<a
className="euiLink euiLink--primary"
href="#/available/undefined"
rel="noreferrer"
/>
</EuiLink>
</div>
</EuiFlexItem>
<EuiFlexItem>
<div
className="euiFlexItem"
>
<EuiText>
</EuiFlexItem>
<EuiFlexItem>
<div
className="euiText euiText--medium"
className="euiFlexItem"
>
<h4>
Date Added
</h4>
<EuiText
size="m"
>
<div
className="euiText euiText--medium"
>
<h4>
Date Added
</h4>
</div>
</EuiText>
<EuiText
size="m"
>
<div
className="euiText euiText--medium"
/>
</EuiText>
</div>
</EuiText>
<EuiText
size="m"
>
<div
className="euiText euiText--medium"
/>
</EuiText>
</EuiFlexItem>
</div>
</EuiFlexItem>
</EuiFlexGroup>
</div>
</EuiFlexGroup>
</EuiPanel>
<EuiSpacer
size="s"
>
Expand All @@ -349,28 +386,20 @@ exports[`Added Integration View Test Renders added integration view using dummy
<div
className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
>
<PanelTitle
title="Assets List"
<EuiTitle
size="s"
>
<EuiText
size="m"
<h3
className="euiTitle euiTitle--small"
>
<div
className="euiText euiText--medium"
>
<span
className="panel-title"
>
Assets List
</span>
</div>
</EuiText>
</PanelTitle>
Assets List
</h3>
</EuiTitle>
<EuiSpacer
size="l"
size="s"
>
<div
className="euiSpacer euiSpacer--l"
className="euiSpacer euiSpacer--s"
/>
</EuiSpacer>
<EuiInMemoryTable
Expand Down
Loading

0 comments on commit 929d67d

Please sign in to comment.