Merge branch 'master' into ipv6-account-conditional

spinnaker · Feb 3, 2021 · 1086af5 · 1086af5
2 parents a29792e + 434ec3f
commit 1086af5
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 8 deletions.
diff --git a/app/scripts/modules/core/package.json b/app/scripts/modules/core/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@spinnaker/core",
   "license": "Apache-2.0",
-  "version": "0.0.544",
+  "version": "0.0.545",
   "main": "lib/lib.js",
   "typings": "lib/index.d.ts",
   "scripts": {

diff --git a/app/scripts/modules/core/src/managed/ArtifactDetail.tsx b/app/scripts/modules/core/src/managed/ArtifactDetail.tsx
@@ -13,7 +13,7 @@ import {
   IManagedArtifactVersionEnvironment,
 } from '../domain';
 import { Application } from '../application';
-import { useEventListener, Markdown } from '../presentation';
+import { useEventListener, Markdown, CollapsibleElement } from '../presentation';
 
 import { AbsoluteTimestamp } from './AbsoluteTimestamp';
 import { ArtifactDetailHeader } from './ArtifactDetailHeader';
@@ -208,7 +208,8 @@ const EnvironmentCards = memo(
 
 const VersionMetadataItem = ({ label, value }: { label: string; value: JSX.Element | string }) => (
   <div className="flex-container-h sp-margin-xs-bottom">
-    <div className="metadata-label text-bold text-right sp-margin-l-right flex-none">{label}</div> <span>{value}</span>
+    <div className="metadata-label text-bold text-right sp-margin-l-right flex-none">{label}</div>
+    <CollapsibleElement maxHeight={150}>{value}</CollapsibleElement>
   </div>
 );
 

diff --git a/app/scripts/modules/core/src/presentation/CollapsibleElement.less b/app/scripts/modules/core/src/presentation/CollapsibleElement.less
@@ -0,0 +1,41 @@
+.collapsible-element {
+  position: relative;
+
+  .content {
+    position: relative;
+    overflow: hidden;
+
+    &.collapsed:after {
+      content: '';
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      background: linear-gradient(0deg, var(--color-white) 0px, transparent 40px);
+    }
+  }
+  .expand-button {
+    display: none;
+    position: absolute;
+    bottom: 0;
+    text-align: center;
+    padding-top: 2px;
+    border: none;
+    border-top: 2px solid #009cb8;
+    color: #009cb8;
+    width: 100%;
+    background-color: var(--color-white);
+    outline: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  &:hover {
+    .expand-button {
+      display: block;
+    }
+  }
+}
diff --git a/app/scripts/modules/core/src/presentation/CollapsibleElement.tsx b/app/scripts/modules/core/src/presentation/CollapsibleElement.tsx
@@ -0,0 +1,40 @@
+import classNames from 'classnames';
+import React from 'react';
+import './CollapsibleElement.less';
+
+export const CollapsibleElement: React.FC<{ maxHeight: number }> = ({ children, maxHeight }) => {
+  const [isCollapsed, setIsCollapsed] = React.useState(true);
+  const [isOverflowing, setIsOverflowing] = React.useState(false);
+  const contentRef = React.useRef<HTMLDivElement>(null);
+
+  const checkIsOverflowing = React.useCallback(() => {
+    if (!contentRef.current) return;
+    setIsOverflowing(contentRef.current.offsetHeight < contentRef.current.scrollHeight);
+  }, []);
+
+  React.useEffect(() => {
+    checkIsOverflowing();
+  }, [children, checkIsOverflowing]);
+
+  React.useEffect(() => {
+    window.addEventListener('resize', checkIsOverflowing);
+    return () => window.removeEventListener('resize', checkIsOverflowing);
+  }, []);
+
+  return (
+    <div className="collapsible-element">
+      <div
+        style={{ maxHeight: isCollapsed ? maxHeight : undefined }}
+        className={classNames(['content', { ['collapsed']: isCollapsed && isOverflowing }])}
+        ref={contentRef}
+      >
+        {children}
+      </div>
+      {(isOverflowing || !isCollapsed) && (
+        <button className="expand-button" onClick={() => setIsCollapsed((state) => !state)}>
+          {isCollapsed ? 'Read more' : 'Read less'}
+        </button>
+      )}
+    </div>
+  );
+};
diff --git a/app/scripts/modules/core/src/presentation/index.ts b/app/scripts/modules/core/src/presentation/index.ts
@@ -1,6 +1,7 @@
+export * from './CollapsibleElement';
 export * from './collapsibleSection/CollapsibleSection';
-export * from './details/Details';
 export * from './CustomLabels';
+export * from './details/Details';
 export * from './FormElements';
 export * from './forms';
 export * from './hooks';
@@ -20,8 +21,8 @@ export * from './RenderOutputFile';
 export * from './robotToHumanFilter/robotToHuman.filter';
 export * from './sortToggle';
 export * from './SpanDropdownTrigger';
-export * from './SpinErrorBoundary';
 export * from './spel';
+export * from './SpinErrorBoundary';
 export * from './TabBoundary';
 export * from './tables';
 export * from './TetheredCreatable';

diff --git a/app/scripts/modules/ecs/package.json b/app/scripts/modules/ecs/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@spinnaker/ecs",
   "license": "Apache-2.0",
-  "version": "0.0.275",
+  "version": "0.0.276",
   "main": "lib/lib.js",
   "typings": "lib/index.d.ts",
   "scripts": {

diff --git a/packages/pluginsdk-peerdeps/package.json b/packages/pluginsdk-peerdeps/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@spinnaker/pluginsdk-peerdeps",
   "description": "Provides package dependencies to plugin developers",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "license": "Apache-2.0",
   "scripts": {
     "usage": "cat USAGE.txt",
@@ -14,7 +14,7 @@
     "@rollup/plugin-commonjs": "16.0.0",
     "@rollup/plugin-node-resolve": "10.0.0",
     "@rollup/plugin-typescript": "6.1.0",
-    "@spinnaker/core": "0.0.540",
+    "@spinnaker/core": "0.0.544",
     "@spinnaker/eslint-plugin": "1.0.9",
     "@spinnaker/pluginsdk": "*",
     "@types/react": "16.8.25",