1
0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00

Add styles for details panel

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2023-04-07 13:56:52 +03:00
parent 6564f89db8
commit 88f832012d
2 changed files with 14 additions and 4 deletions

View File

@ -0,0 +1,9 @@
.matchLabels {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.lastItem + .firstItem {
margin-top: 1rem;
}

View File

@ -2,6 +2,7 @@
* Copyright (c) OpenLens Authors. All rights reserved. * Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information. * Licensed under MIT License. See LICENSE in root directory for more information.
*/ */
import styles from "./mutating-webhook-configs-details.module.css";
import React from "react"; import React from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
@ -29,7 +30,7 @@ export class MutatingWebhookDetails extends React.Component<MutatingWebhookDetai
)} )}
{webhookConfig.getWebhooks()?.map((webhook) => ( {webhookConfig.getWebhooks()?.map((webhook) => (
<React.Fragment key={webhook.name}> <React.Fragment key={webhook.name}>
<DrawerItem name="Name"> <DrawerItem name="Name" className={styles.firstItem}>
<strong>{webhook.name}</strong> <strong>{webhook.name}</strong>
</DrawerItem> </DrawerItem>
<DrawerItem name="Client Config"> <DrawerItem name="Client Config">
@ -92,7 +93,7 @@ export class MutatingWebhookDetails extends React.Component<MutatingWebhookDetai
{webhook.namespaceSelector.matchLabels && ( {webhook.namespaceSelector.matchLabels && (
<div> <div>
<div>Match Labels:</div> <div>Match Labels:</div>
<div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}> <div className={styles.matchLabels}>
{Object.entries(webhook.namespaceSelector.matchLabels).map(([key, value], index) => ( {Object.entries(webhook.namespaceSelector.matchLabels).map(([key, value], index) => (
<Badge label={`${key}=${value}`} key={index} /> <Badge label={`${key}=${value}`} key={index} />
))} ))}
@ -128,7 +129,7 @@ export class MutatingWebhookDetails extends React.Component<MutatingWebhookDetai
{webhook.objectSelector.matchLabels && ( {webhook.objectSelector.matchLabels && (
<div> <div>
<div>Match Labels:</div> <div>Match Labels:</div>
<div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}> <div className={styles.matchLabels}>
{Object.entries(webhook.objectSelector.matchLabels).map(([key, value], index) => ( {Object.entries(webhook.objectSelector.matchLabels).map(([key, value], index) => (
<Badge label={`${key}=${value}`} key={index} /> <Badge label={`${key}=${value}`} key={index} />
))} ))}
@ -138,7 +139,7 @@ export class MutatingWebhookDetails extends React.Component<MutatingWebhookDetai
</div> </div>
)} )}
</DrawerItem> </DrawerItem>
<DrawerItem name="Rules"> <DrawerItem name="Rules" className={styles.lastItem}>
{webhook.rules?.map((rule, index) => ( {webhook.rules?.map((rule, index) => (
<div key={index}> <div key={index}>
<div> <div>