starling-devex 0.1.2

Starling: a local dev orchestrator with a central daemon, shared named-URL proxy, and a k9s-style TUI (a Rust port of Tilt + portless)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

import React from "react"
import styled from "styled-components"
import { ReactComponent as StarSvg } from "./assets/svg/star.svg"
import { InstrumentedButton } from "./instrumentedComponents"
import { StarredResourcesContext } from "./StarredResourcesContext"
import { AnimDuration, Color, mixinResetButtonStyle } from "./style-helpers"

export const StyledTableStarResourceButton = styled(InstrumentedButton)`
  ${mixinResetButtonStyle};
  line-height: 16px;

  & > .MuiButton-label {
    display: inline-block;
  }
`

let StyledStarSvg = styled(StarSvg)`
  width: 13px;
  height: 13px;
  transition: transform ${AnimDuration.short} ease,
    opacity ${AnimDuration.short} ease;

  &:active {
    transform: scale(1.2);
  }
  &.is-starred {
    fill: ${Color.blue};
  }
  &.is-unstarred {
    opacity: 0;
    fill: ${Color.gray50};
  }
  &.is-unstarred:hover,
  ${StyledTableStarResourceButton}:focus &.is-unstarred {
    opacity: 1;
  }
`

type StarResourceButtonProps = {
  resourceName: string
  ctx: StarredResourcesContext
}

export default function OverviewTableStarResourceButton(
  props: StarResourceButtonProps
): JSX.Element {
  let { ctx, resourceName } = props
  let isStarred =
    ctx.starredResources && ctx.starredResources.includes(resourceName)

  let icon: JSX.Element
  let classes = ""
  let title: string

  if (isStarred) {
    title = "Remove Star"
    classes = "is-starred"
  } else {
    title = "Star this Resource"
    classes = "is-unstarred"
  }

  return (
    <StyledTableStarResourceButton
      title={title}
      onClick={() => ctx.toggleStarResource(resourceName)}
    >
      <StyledStarSvg className={classes} />
    </StyledTableStarResourceButton>
  )
}