Skip to content

Commit 630d7dd

Browse files
authored
[Automatic Import V2] Redesign Sidebar in Browse Integrations (elastic#258532)
## Summary Redesign the Sidebar in *Browse Integrations UI* to remove the collapsable sections `Your created Integrations` and `Developed by Elastic` and have the list of integrations in one single categorization and just have the `Manage my integraitons` section on top ## WIthout Auto Import Integrations <img width="1586" height="612" alt="image" src="https://github.com/user-attachments/assets/9e31cd71-0eb2-4451-a87a-54b64b848659" /> ## With Auto Import integrations <img width="580" height="482" alt="image" src="https://github.com/user-attachments/assets/1eae0e78-2c60-45ee-9420-aebcd0e81723" />
1 parent 432228d commit 630d7dd

1 file changed

Lines changed: 35 additions & 65 deletions

File tree

  • x-pack/platform/plugins/shared/fleet/public/applications/integrations/sections/epm/screens/browse_integrations/components

x-pack/platform/plugins/shared/fleet/public/applications/integrations/sections/epm/screens/browse_integrations/components/side_bar.tsx

Lines changed: 35 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@
66
*/
77

88
import {
9-
EuiAccordion,
109
EuiFacetButton,
1110
EuiFacetGroup,
1211
EuiFlexItem,
12+
EuiHorizontalRule,
1313
EuiIcon,
1414
EuiLink,
1515
EuiSpacer,
@@ -111,74 +111,44 @@ export const Sidebar: React.FC<SidebarProps> = ({
111111
<StickySidebar>
112112
{CreateIntegrationCardButton && (
113113
<>
114-
<EuiAccordion
115-
id="categoriesUserIntegrationsAccordion"
116-
buttonContent={i18n.translate('xpack.fleet.epmList.userIntegrationAccordionLabel', {
117-
defaultMessage: 'Your created integrations',
118-
})}
119-
buttonProps={{
120-
style: {
121-
fontWeight: euiTheme.font.weight.bold,
122-
},
123-
}}
124-
initialIsOpen={true}
125-
paddingSize="none"
126-
>
127-
<EuiSpacer size="s" />
128-
{hasCreatedIntegrations ? (
129-
<EuiLink
130-
color="text"
131-
onClick={onManageIntegrationsClick}
132-
data-test-subj="manageCreatedIntegrationsLink"
133-
css={{
134-
display: 'inline-flex',
135-
alignItems: 'center',
136-
gap: euiTheme.size.s,
137-
textDecoration: 'none',
114+
<EuiSpacer size="s" />
115+
{hasCreatedIntegrations ? (
116+
<EuiLink
117+
color="text"
118+
onClick={onManageIntegrationsClick}
119+
data-test-subj="manageCreatedIntegrationsLink"
120+
css={{
121+
display: 'inline-flex',
122+
alignItems: 'center',
123+
gap: euiTheme.size.s,
124+
textDecoration: 'none',
125+
}}
126+
>
127+
<EuiIcon type="gear" aria-hidden={true} />
128+
<span
129+
style={{
130+
color: euiTheme.colors.text,
131+
fontSize: euiTheme.size.m,
132+
fontWeight: euiTheme.font.weight.bold,
138133
}}
139134
>
140-
<EuiIcon type="gear" aria-hidden={true} />
141-
<span
142-
style={{
143-
color: euiTheme.colors.text,
144-
fontSize: euiTheme.size.m,
145-
fontWeight: euiTheme.font.weight.bold,
146-
textDecoration: 'underline',
147-
}}
148-
>
149-
{i18n.translate('xpack.fleet.epmList.manageCreatedIntegrationsLinkLabel', {
150-
defaultMessage: 'Manage my integrations',
151-
})}
152-
</span>
153-
</EuiLink>
154-
) : (
155-
<CreateIntegrationCardButton />
156-
)}
157-
</EuiAccordion>
158-
<EuiSpacer size="m" />
135+
{i18n.translate('xpack.fleet.epmList.manageCreatedIntegrationsLinkLabel', {
136+
defaultMessage: 'Manage my integrations',
137+
})}
138+
</span>
139+
</EuiLink>
140+
) : (
141+
<CreateIntegrationCardButton />
142+
)}
143+
<EuiHorizontalRule margin="m" />
159144
</>
160145
)}
161-
<EuiAccordion
162-
id="categoriesDevelopedByElasticAccordion"
163-
buttonContent={i18n.translate('xpack.fleet.epmList.filterByCategoryAccordionLabel', {
164-
defaultMessage: 'Developed by Elastic',
165-
})}
166-
buttonProps={{
167-
style: {
168-
fontWeight: euiTheme.font.weight.bold,
169-
},
170-
}}
171-
initialIsOpen={true}
172-
paddingSize="none"
173-
>
174-
<EuiSpacer size="s" />
175-
<CategoryFacets
176-
isLoading={isLoading}
177-
categories={categories}
178-
selectedCategory={selectedCategory}
179-
onCategoryChange={onCategoryChange}
180-
/>
181-
</EuiAccordion>
146+
<CategoryFacets
147+
isLoading={isLoading}
148+
categories={categories}
149+
selectedCategory={selectedCategory}
150+
onCategoryChange={onCategoryChange}
151+
/>
182152
</StickySidebar>
183153
);
184154
};

0 commit comments

Comments
 (0)