From c4360c5cf5c952786860d03f5d426ac555e03955 Mon Sep 17 00:00:00 2001
From: Lisa Knox <lisaknox83@gmail.com>
Date: Mon, 26 Feb 2024 09:48:41 -0500
Subject: [PATCH] 21224: added chevron, moved description section
 Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox@curii.com>

---
 .../expand-chevron-right.tsx                  |  48 +++++++
 .../project-details-card.tsx                  | 128 ++++++++++--------
 2 files changed, 121 insertions(+), 55 deletions(-)
 create mode 100644 services/workbench2/src/components/expand-chevron-right/expand-chevron-right.tsx

diff --git a/services/workbench2/src/components/expand-chevron-right/expand-chevron-right.tsx b/services/workbench2/src/components/expand-chevron-right/expand-chevron-right.tsx
new file mode 100644
index 0000000000..7bb0b14fa2
--- /dev/null
+++ b/services/workbench2/src/components/expand-chevron-right/expand-chevron-right.tsx
@@ -0,0 +1,48 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import React from 'react';
+import { ChevronRight } from '@material-ui/icons';
+import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
+import { ArvadosTheme } from 'common/custom-theme';
+
+type CssRules = 'root' | 'default' | 'expanded';
+
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+    root: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '24px',
+        height: '24px',
+        cursor: 'pointer',
+    },
+    default: {
+        transition: 'all 0.1s ease',
+        transform: 'rotate(0deg)',
+    },
+    expanded: {
+        transition: 'all 0.1s ease',
+        transform: 'rotate(90deg)',
+    },
+});
+
+export interface ExpandChevronRightDataProps {
+    expanded: boolean;
+}
+
+type ExpandChevronRightProps = ExpandChevronRightDataProps & WithStyles<CssRules>;
+
+export const ExpandChevronRight = withStyles(styles)(
+    class extends React.Component<ExpandChevronRightProps, {}> {
+        render() {
+            const { classes, expanded } = this.props;
+            return (
+                <div className={classes.root}>
+                    <ChevronRight className={expanded ? classes.expanded : classes.default} />
+                </div>
+            );
+        }
+    }
+);
\ No newline at end of file
diff --git a/services/workbench2/src/views-components/project-details-card/project-details-card.tsx b/services/workbench2/src/views-components/project-details-card/project-details-card.tsx
index a3a1458acc..5447dd58bf 100644
--- a/services/workbench2/src/views-components/project-details-card/project-details-card.tsx
+++ b/services/workbench2/src/views-components/project-details-card/project-details-card.tsx
@@ -24,6 +24,7 @@ import { ContextMenuKind } from 'views-components/context-menu/context-menu';
 import { Dispatch } from 'redux';
 import classNames from 'classnames';
 import { loadDetailsPanel } from 'store/details-panel/details-panel-action';
+import { ExpandChevronRight } from 'components/expand-chevron-right/expand-chevron-right';
 
 type CssRules =
     | 'root'
@@ -34,6 +35,7 @@ type CssRules =
     | 'noDescription'
     | 'userNameContainer'
     | 'cardContent'
+    | 'nameSection'
     | 'namePlate'
     | 'faveIcon'
     | 'frozenIcon'
@@ -67,12 +69,22 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         padding: '0.2rem 0.4rem 0.1rem 1rem',
     },
     descriptionLabel: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        cursor: 'pointer',
     },
     cardContent: {
         display: 'flex',
         flexDirection: 'column',
         marginTop: '-1.75rem',
     },
+    nameSection: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
     namePlate: {
         display: 'flex',
         flexDirection: 'row',
@@ -287,56 +299,50 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ classes, currentResource, fro
             <CardHeader
                 className={classes.cardHeader}
                 title={
-                    <section className={classes.namePlate}>
-                        <Typography
-                            noWrap
-                            variant='h6'
-                            style={{ marginRight: '1rem' }}
-                        >
-                            {name}
-                        </Typography>
-                        <FavoriteStar
-                            className={classes.faveIcon}
-                            resourceUuid={currentResource.uuid}
-                        />
-                        <PublicFavoriteStar
-                            className={classes.faveIcon}
-                            resourceUuid={currentResource.uuid}
-                        />
-                        {!!frozenByFullName && (
-                            <Tooltip
-                                className={classes.frozenIcon}
-                                disableFocusListener
-                                title={<span>Project was frozen by {frozenByFullName}</span>}
+                    <section className={classes.nameSection}>
+                        <section className={classes.namePlate}>
+                            <Typography
+                                noWrap
+                                variant='h6'
+                                style={{ marginRight: '1rem' }}
                             >
-                                <FreezeIcon style={{ fontSize: 'inherit' }} />
-                            </Tooltip>
-                        )}
+                                {name}
+                            </Typography>
+                            <FavoriteStar
+                                className={classes.faveIcon}
+                                resourceUuid={currentResource.uuid}
+                            />
+                            <PublicFavoriteStar
+                                className={classes.faveIcon}
+                                resourceUuid={currentResource.uuid}
+                            />
+                            {!!frozenByFullName && (
+                                <Tooltip
+                                    className={classes.frozenIcon}
+                                    disableFocusListener
+                                    title={<span>Project was frozen by {frozenByFullName}</span>}
+                                >
+                                    <FreezeIcon style={{ fontSize: 'inherit' }} />
+                                </Tooltip>
+                            )}
+                        </section>
+                        <section onClick={(ev) => ev.stopPropagation()}>
+                            {typeof currentResource.properties === 'object' && Object.keys(currentResource.properties).length > 0 && (
+                                <CardContent className={classes.cardContent}>
+                                    <Typography component='div'>
+                                        {Object.keys(currentResource.properties).map((k) =>
+                                            Array.isArray(currentResource.properties[k])
+                                                ? currentResource.properties[k].map((v: string) => getPropertyChip(k, v, undefined, classes.tag))
+                                                : getPropertyChip(k, currentResource.properties[k], undefined, classes.tag)
+                                        )}
+                                    </Typography>
+                                </CardContent>
+                            )}
+                        </section>
                     </section>
                 }
                 action={
                     <section className={classes.contextMenuSection}>
-                        <section
-                            className={classes.descriptionLabel}
-                            onClick={(ev) => ev.stopPropagation()}
-                        >
-                            {description ? (
-                                <Typography
-                                    className={classes.showMore}
-                                    onClick={toggleDescription}
-                                    data-cy='toggle-description'
-                                >
-                                    {!showDescription ? 'Show full description' : 'Hide full description'}
-                                </Typography>
-                            ) : (
-                                <Typography
-                                    className={classes.noDescription}
-                                    data-cy='no-description'
-                                >
-                                    no description available
-                                </Typography>
-                            )}
-                        </section>
                         <Tooltip
                             title='More options'
                             disableFocusListener
@@ -351,17 +357,29 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ classes, currentResource, fro
                     </section>
                 }
             />
-            {typeof currentResource.properties === 'object' && Object.keys(currentResource.properties).length > 0 && (
-                <CardContent className={classes.cardContent}>
-                        <Typography component='div'>
-                            {Object.keys(currentResource.properties).map((k) =>
-                                Array.isArray(currentResource.properties[k])
-                                    ? currentResource.properties[k].map((v: string) => getPropertyChip(k, v, undefined, classes.tag))
-                                    : getPropertyChip(k, currentResource.properties[k], undefined, classes.tag)
-                            )}
+            <section onClick={(ev) => ev.stopPropagation()}>
+                {description ? (
+                    <section
+                        className={classes.descriptionLabel}
+                        onClick={toggleDescription}
+                    >
+                        <ExpandChevronRight expanded={showDescription} />
+                        <Typography
+                            className={classes.showMore}
+                            data-cy='toggle-description'
+                        >
+                            {!showDescription ? 'Show full description' : 'Hide full description'}
                         </Typography>
-                </CardContent>
-            )}
+                    </section>
+                ) : (
+                    <Typography
+                        className={classes.noDescription}
+                        data-cy='no-description'
+                    >
+                        no description available
+                    </Typography>
+                )}
+            </section>
             <Collapse
                 in={showDescription}
                 timeout='auto'
-- 
2.30.2