feat: use PatternFly LabelGroup for kubernetes Labels tab

Adds `{ spec: { as: 'labels' } }` to DescriptionList model

part of #8116

Author: starpit

packages/core/src/models/DescriptionList.ts

@@ -21,6 +21,9 @@ export default interface DescriptionList {
   kind: 'DescriptionList'
 
   spec: {
+    /** Display as a list of key-value pairs (default), or as a list of labels */
+    as?: 'default' | 'labels'
+
     groups: {
       /** The term being described */
       term: string

plugins/plugin-client-common/src/components/Content/KuiContent.tsx

@@ -146,7 +146,11 @@ export default class KuiContent extends React.PureComponent<KuiMMRProps, State>
         return (
           <div className="flex-fill flex-layout flex-align-stretch">
             <div className="scrollable scrollable-auto scrollable-x flex-fill flex-layout flex-align-stretch">
-              <DescriptionList groups={mode.content.spec.groups} className="left-pad right-pad" />
+              <DescriptionList
+                as={mode.content.spec.as}
+                groups={mode.content.spec.groups}
+                className="left-pad right-pad"
+              />
             </div>
           </div>
         )

plugins/plugin-client-common/src/components/spi/DescriptionList/impl/PatternFly.tsx

@@ -42,7 +42,7 @@ function columnModifier(maxWidth: number) {
   }
 }
 
-export default function PatternFlyDescriptionList(props: Props) {
+export default function PatternFlyDescriptionList(props: Omit<Props, 'as'>) {
   const maxWidth = props.groups.reduce(
     (max, group) => Math.max(max, group.term.length /*, group.description.toString().length */),
     0

plugins/plugin-client-common/src/components/spi/DescriptionList/impl/PatternFlyLabelList.tsx

@@ -0,0 +1,42 @@
+/*
+ * Copyright 2021 The Kubernetes Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react'
+import { LabelGroup, Label } from '@patternfly/react-core'
+
+import Props from '../model'
+
+import '../../../../../web/scss/components/DescriptionList/PatternFlyLabelList.scss'
+
+export default function PatternFlyDescriptionList(props: Omit<Props, 'as'>) {
+  return (
+    <div
+      className={[props.className, 'kui--description-list', 'kui--label-list', 'flex-fill', 'padding-content'].join(
+        ' '
+      )}
+    >
+      <LabelGroup className="kui--description-list-group" numLabels={10}>
+        {props.groups.map((group, idx) => (
+          <Label key={idx} className="kui--description-list-term" data-term={group.term}>
+            <span className="map-key">{group.term}</span>
+            <strong className="slightly-deemphasize small-left-pad small-right-pad">|</strong>
+            <span className="map-value">{group.description}</span>
+          </Label>
+        ))}
+      </LabelGroup>
+    </div>
+  )
+}

plugins/plugin-client-common/src/components/spi/DescriptionList/index.tsx

@@ -17,10 +17,15 @@
 import React from 'react'
 import Props from './model'
 
-const PatternFly4 = React.lazy(() => import('./impl/PatternFly'))
+const PatternFly4DescriptionList = React.lazy(() => import('./impl/PatternFly'))
+const PatternFly4LabelList = React.lazy(() => import('./impl/PatternFlyLabelList'))
 
 export { Props }
 
 export default function DescriptionListSpi(props: Props): React.ReactElement {
-  return <PatternFly4 {...props} />
+  if (!props.as || props.as === 'default') {
+    return <PatternFly4DescriptionList {...props} />
+  } else {
+    return <PatternFly4LabelList {...props} />
+  }
 }

plugins/plugin-client-common/src/components/spi/DescriptionList/model.ts

@@ -18,5 +18,6 @@ import { DescriptionList } from '@kui-shell/core'
 
 export default interface Props {
   className?: string
+  as: DescriptionList['spec']['as']
   groups: DescriptionList['spec']['groups']
 }

plugins/plugin-client-common/web/scss/PatternFly/kui-alignment.scss

@@ -187,8 +187,8 @@
 @mixin pf-t-dark {
   --pf-global--Color--dark-100: var(--color-base06);
   --pf-global--Color--dark-200: var(--color-base05);
-  --pf-global--Color--100: var(--pf-global--Color--light-100);
-  --pf-global--Color--200: var(--pf-global--Color--light-200);
+  --pf-global--Color--100: var(--pf-global--Color--dark-100);
+  --pf-global--Color--200: var(--pf-global--Color--dark-200);
   --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
   --pf-global--primary-color--100: var(--pf-global--primary-color--light-100);
   --pf-global--link--Color: var(--pf-global--link--Color--light);
@@ -201,7 +201,7 @@
 @mixin kui-patternfly-alignment-dark {
   @include kui-patternfly-alignment-base;
   --pf-global--palette--black-100: var(--color-base00);
-  --pf-global--palette--black-150: var(--color-base00);
+  --pf-global--palette--black-150: var(--color-base01);
   --pf-global--palette--black-200: var(--color-base01);
   --pf-global--palette--black-300: var(--color-base02);
   --pf-global--palette--black-400: var(--color-base02);

plugins/plugin-client-common/web/scss/components/DescriptionList/PatternFlyLabelList.scss

@@ -0,0 +1,25 @@
+/*
+ * Copyright 2021 The Kubernetes Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import 'mixins';
+
+@include LabelList {
+  font-size: 0.75rem;
+
+  @include DescriptionListTerm {
+    background-color: var(--color-base02);
+  }
+}

plugins/plugin-client-common/web/scss/components/DescriptionList/_mixins.scss

@@ -0,0 +1,33 @@
+/*
+ * Copyright 2021 The Kubernetes Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@mixin DescriptionList {
+  .kui--description-list {
+    @content;
+  }
+}
+
+@mixin LabelList {
+  .kui--label-list {
+    @content;
+  }
+}
+
+@mixin DescriptionListTerm {
+  .kui--description-list-term {
+    @content;
+  }
+}

plugins/plugin-client-common/web/scss/components/DescriptionList/common.scss

@@ -14,7 +14,13 @@
  * limitations under the License.
  */
 
-.kui--description-list {
+@import 'mixins';
+
+@include DescriptionList {
   /* override terminal rule on .repl */
   white-space: normal;
+
+  @include DescriptionListTerm {
+    font-size: inherit;
+  }
 }