github.com/tilt-dev/tilt@v0.33.15-0.20240515162809-0a22ed45d8a0/web/src/ResourceGroups.tsx (about)

     1  import styled from "styled-components"
     2  import { ReactComponent as CaretSvg } from "./assets/svg/caret.svg"
     3  import { Color, SizeUnit } from "./style-helpers"
     4  import { TiltInfoTooltip } from "./Tooltip"
     5  
     6  /**
     7   * This file contains style-reset versions of the Material UI Accordion
     8   * component (which ships with a bunch of opinionated, intricate styles
     9   * that don't align with our design implementation and can be difficult
    10   * to reset).
    11   *
    12   * This Accordion component is used for resource groups that are grouped
    13   * by label. This feature is composed of three components, structured like:
    14   *    <Accordion>
    15   *      <AccordionSummary> {content} </AccordionSummary>
    16   *      <AccordionDetails> {content} </AccordionDetails>
    17   *    </Accordion>
    18   *
    19   *    where Accordion is the parent wrapper component.
    20   *          AccordionSummary contains the clickable button that expands and
    21   *            collapses the content in Accordion details; the content in the
    22   *            Summary is always visible.
    23   *          AccordionDetails contains the content that is expanded and
    24   *            collapsed by clicking on the Summary.
    25   *
    26   * Note: the Accordion resource groups components are only used in the table
    27   * and detail views. If they need to be used in more locations, these components
    28   * and styles should be refactored to be more reusable.
    29   */
    30  
    31  export const AccordionStyleResetMixin = `
    32    &.MuiPaper-root {
    33      background-color: unset;
    34    }
    35  
    36    &.MuiPaper-elevation1 {
    37      box-shadow: unset;
    38    }
    39  
    40    &.MuiAccordion-root,
    41    &.MuiAccordion-root.Mui-expanded {
    42      margin: unset;
    43      position: unset; /* Removes a mysterious top border only visible on collapse */
    44    }
    45  `
    46  
    47  export const AccordionSummaryStyleResetMixin = `
    48    &.MuiAccordionSummary-root,
    49    &.MuiAccordionSummary-root.Mui-expanded {
    50      min-height: unset;
    51      padding: unset;
    52    }
    53  
    54    .MuiAccordionSummary-content {
    55      margin: 0;
    56  
    57      &.Mui-expanded {
    58        margin: 0;
    59      }
    60    }
    61  `
    62  
    63  export const AccordionDetailsStyleResetMixin = `
    64    &.MuiAccordionDetails-root {
    65      display: unset;
    66      padding: unset;
    67    }
    68  `
    69  
    70  // Helper (non-Material UI) components
    71  
    72  /**
    73   * Caret icon used to indicate a section is collapsed
    74   * or expanded; animates between states.
    75   *
    76   * Should be used within a <AccordionSummary /> component
    77   */
    78  export const ResourceGroupSummaryIcon = styled(CaretSvg)`
    79    flex-shrink: 0;
    80    padding: ${SizeUnit(1 / 4)};
    81    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; /* Copied from MUI accordion */
    82  
    83    .fillStd {
    84      fill: ${Color.gray50};
    85    }
    86  `
    87  
    88  // Helper (non-Material UI) styles
    89  /**
    90   * Common Tilt-specific styles for resource grouping;
    91   * should be used with a <AccordionSummary />.
    92   */
    93  export const ResourceGroupSummaryMixin = `
    94    .MuiAccordionSummary-content {
    95      align-items: center;
    96      box-sizing: border-box;
    97      color: ${Color.white};
    98      display: flex;
    99      padding: ${SizeUnit(1 / 8)};
   100      width: 100%;
   101  
   102      &.Mui-expanded {
   103        ${ResourceGroupSummaryIcon} {
   104          transform: rotate(90deg);
   105        }
   106      }
   107    }
   108  `
   109  
   110  const BottomLeftContainer = styled.aside`
   111    bottom: 0;
   112    left: 0;
   113    padding: 10px 10px 5px 10px;
   114    position: fixed;
   115    z-index: 2;
   116  `
   117  
   118  export function ResourceGroupsInfoTip(props: { idForIcon: string }) {
   119    const tooltipInfo = (
   120      <>
   121        Resources can be grouped by adding custom labels.{" "}
   122        <a
   123          href="https://docs.tilt.dev/tiltfile_concepts.html#resource-groups"
   124          target="_blank"
   125        >
   126          See docs for more info
   127        </a>
   128        .
   129      </>
   130    )
   131  
   132    return (
   133      <BottomLeftContainer>
   134        <TiltInfoTooltip
   135          title={tooltipInfo}
   136          displayShadow={true}
   137          idForIcon={props.idForIcon}
   138          dismissId="resource-groups"
   139        />
   140      </BottomLeftContainer>
   141    )
   142  }