Component page

src/components/actions-page/style.css

@@ -1,34 +1,5 @@
 .actions-page {
-  align-items: center;
-  display: flex;
-  background-color: var(--color-mood);
-  margin:
-    var(--space-7)
-    calc(-1 * var(--space-default-gap))
-    var(--space-7)
-    calc(-1 * var(--space-default-gap));
-  padding: var(--space-default-gap);
-}
-
-.actions-page > * {
-  margin-left: var(--space-5);
-}
-
-.actions-page > :first-child {
-  margin-left: 0;
-}
-
-@media (min-width: 50rem) {
-  .actions-page {
-    margin:
-      var(--space-7)
-      calc(-1 * var(--space-6))
-      var(--space-7)
-      calc(-1 * var(--space-7));
-    padding:
-      var(--space-default-gap)
-      var(--space-6)
-      var(--space-default-gap)
-      var(--space-7);
-  }
+  display: grid;
+  grid-template-columns: repeat(3, auto) 1fr;
+  grid-gap: var(--eds_spacing_small);
 }

src/components/component/active-component-secrets.js

@@ -6,6 +6,7 @@ import React from 'react';
 import { getEnvironment, getComponentSecret } from '../../state/environment';
 import { connect } from 'react-redux';
 import environmentModel from '../../models/environment';
+import { List } from '@equinor/eds-core-react';
 
 const ActiveComponentSecrets = ({
   appName,
@@ -16,18 +17,20 @@ const ActiveComponentSecrets = ({
 }) => {
   return (
     <React.Fragment>
-      <h2 className="o-heading-section">Secrets</h2>
-      {secrets.length === 0 && <p>This component uses no secrets</p>}
+      <h4>Secrets</h4>
+      {secrets.length === 0 && (
+        <p className="body_short">This component uses no secrets</p>
+      )}
       {secrets.length > 0 && (
-        <ul className="o-indent-list">
+        <List className="o-indent-list secrets">
           {secrets.map((secretName) => {
             let envSecret = getComponentSecret(
               environment,
               secretName,
               componentName
             );
             return (
-              <li key={secretName}>
+              <List.Item key={secretName}>
                 <Link
                   to={routing.getSecretUrl(
                     appName,
@@ -39,10 +42,10 @@ const ActiveComponentSecrets = ({
                   {secretName}
                 </Link>{' '}
                 <SecretStatus secret={envSecret} />
-              </li>
+              </List.Item>
             );
           })}
-        </ul>
+        </List>
       )}
     </React.Fragment>
   );

src/components/component/component-bread-crumb.js

@@ -1,27 +1,29 @@
-import Breadcrumb from '../breadcrumb';
 import { routeWithParams } from '../../utils/string';
 import routes from '../../routes';
 import * as routing from '../../utils/routing';
-import EnvironmentBadge from '../environment-badge';
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Breadcrumbs } from '@equinor/eds-core-react';
 
 const ComponentBreadCrumb = ({ appName, envName, componentName }) => {
   return (
-    <Breadcrumb
-      links={[
-        { label: appName, to: routeWithParams(routes.app, { appName }) },
-        { label: 'Environments', to: routing.getEnvsUrl(appName) },
-        {
-          label: <EnvironmentBadge envName={envName} />,
-          to: routeWithParams(routes.appEnvironment, {
-            appName,
-            envName,
-          }),
-        },
-        { label: componentName },
-      ]}
-    />
+    <Breadcrumbs>
+      <Breadcrumbs.Breadcrumb href={routeWithParams(routes.app, { appName })}>
+        {appName}
+      </Breadcrumbs.Breadcrumb>
+      <Breadcrumbs.Breadcrumb href={routing.getEnvsUrl(appName)}>
+        Environments
+      </Breadcrumbs.Breadcrumb>
+      <Breadcrumbs.Breadcrumb
+        href={routeWithParams(routes.appEnvironment, {
+          appName,
+          envName,
+        })}
+      >
+        {envName}
+      </Breadcrumbs.Breadcrumb>
+      <Breadcrumbs.Breadcrumb>{componentName}</Breadcrumbs.Breadcrumb>
+    </Breadcrumbs>
   );
 };
 

src/components/component/component-ports.js

@@ -1,20 +1,23 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import PortModel from '../../models/port';
+import { List } from '@equinor/eds-core-react';
 
 const ComponentPorts = ({ ports }) => {
   return (
     <React.Fragment>
       {ports.length > 0 && (
         <React.Fragment>
-          <p>Open ports:</p>
-          <ul className="o-indent-list">
-            {ports.map((port) => (
-              <li key={port.port}>
-                {port.port} ({port.name})
-              </li>
-            ))}
-          </ul>
+          <>
+            <p className="body_short">Open ports:</p>
+            <List className="o-indent-list">
+              {ports.map((port) => (
+                <List.Item key={port.port}>
+                  {port.port} ({port.name})
+                </List.Item>
+              ))}
+            </List>
+          </>
         </React.Fragment>
       )}
       {ports.length === 0 && <p>No open ports</p>}

src/components/component/env-variables.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Table } from '@equinor/eds-core-react';
 
 const EnvVariables = ({ component, includeRadixVars }) => {
   let hasRadixVars = false;
@@ -10,10 +11,12 @@ const EnvVariables = ({ component, includeRadixVars }) => {
 
     if (!isRadixVar) {
       return (
-        <React.Fragment key={varName}>
-          <dt>{varName}</dt>
-          <dd>{(component && component.variables)[varName]}</dd>
-        </React.Fragment>
+        <Table.Row key={varName}>
+          <Table.Cell>
+            {varName}{' '}
+            <strong>{(component && component.variables)[varName]}</strong>
+          </Table.Cell>
+        </Table.Row>
       );
     }
 
@@ -22,32 +25,28 @@ const EnvVariables = ({ component, includeRadixVars }) => {
     }
 
     return (
-      <React.Fragment key={varName}>
-        <dt>
-          * <em>{varName}</em>
-        </dt>
-        <dd>
-          <em>{(component && component.variables)[varName]}</em>
-        </dd>
-      </React.Fragment>
+      <Table.Row key={varName}>
+        <Table.Cell>
+          * {varName}{' '}
+          <strong>{(component && component.variables)[varName]}</strong>
+        </Table.Cell>
+      </Table.Row>
     );
   });
 
   return (
     <React.Fragment>
-      <h2 className="o-heading-section">Environment variables</h2>
+      <h4>Environment variables</h4>
+      {hasRadixVars && (
+        <p className="body_short">(* automatically added by Radix)</p>
+      )}
       {envVarNames.length === 0 && (
         <p>This component uses no environment variables</p>
       )}
       {envVarNames.length > 0 && (
-        <div>
-          <dl className="o-key-values">{varList}</dl>
-          {hasRadixVars && (
-            <p>
-              <small>* automatically added by Radix</small>
-            </p>
-          )}
-        </div>
+        <Table className="variables_table">
+          <Table.Body>{varList}</Table.Body>
+        </Table>
       )}
     </React.Fragment>
   );

src/components/docker-image/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 
-import Button from '../button';
+import { Button, Icon } from '@equinor/eds-core-react';
+import { copy } from '@equinor/eds-icons';
 
 import { copyToClipboard } from '../../utils/string';
 
@@ -19,15 +20,13 @@ const DockerImage = ({ path }) => {
   }
 
   return (
-    <span className="docker-image">
-      <span className="docker-image__tag">{tag}</span>{' '}
-      <Button
-        onClick={() => copyToClipboard(tag)}
-        btnType={['default', 'tiny']}
-      >
+    <>
+      <strong>{tag}</strong>{' '}
+      <Button onClick={() => copyToClipboard(tag)} variant="ghost">
         Copy
+        <Icon data={copy} size="12" />
       </Button>
-    </span>
+    </>
   );
 };
 

src/components/docker-image/style.css

@@ -1,9 +0,0 @@
-.docker-image {
-  font-family: var(--monospace-font-family);
-  font-size: .9375em;
-  font-weight: bold;
-}
-
-.docker-image > svg {
-  margin-left: .25em
-}

src/components/layout-app/style.css

@@ -7,7 +7,7 @@
   z-index: 100;
 }
 
-.layout-app__sidebar .o-layout-main {
+.layout-app__sidebar .o-layout-main, .layout-app__sidebar .o-layout-main .o-layout-main__content {
   height: 100%;
 }