basic doppler attach flow

dashboard/src/main/home/app-dashboard/validate-apply/app-settings/EnvGroupModal.tsx

@@ -24,9 +24,10 @@ type Props = {
   baseEnvGroups: PopulatedEnvGroup[];
   setOpen: Dispatch<SetStateAction<boolean>>;
   append: (inp: IterableElement<PorterAppFormData["app"]["envGroups"]>) => void;
+  setDopplerEnvGroup: Dispatch<SetStateAction<string>>;
 };
 
-const EnvGroupModal: React.FC<Props> = ({ append, setOpen, baseEnvGroups }) => {
+const EnvGroupModal: React.FC<Props> = ({ append, setOpen, baseEnvGroups, setDopplerEnvGroup }) => {
   const [
     selectedEnvGroup,
     setSelectedEnvGroup,
@@ -36,6 +37,8 @@ const EnvGroupModal: React.FC<Props> = ({ append, setOpen, baseEnvGroups }) => {
     setSelectedDopplerEnvGroup
   ] = useState<string>("");
 
+  const { setValue } = useFormContext<PorterAppFormData>();
+
   const [dopplerEnvGroups, setDopplerEnvGroups] = useState<any[]>([]);
 
   // DOPPLER_TODO: call endpoint to get doppler env groups
@@ -65,6 +68,21 @@ const EnvGroupModal: React.FC<Props> = ({ append, setOpen, baseEnvGroups }) => {
       });
       setOpen(false);
     }
+
+    // DOPPLER_TODO: rename "dopplerEnvGroup" to whatever the helm value key should be
+    if (selectedDopplerEnvGroup) {
+      console.log("attempted submit");
+      try {
+        const jsonValues = JSON.stringify({
+          dopplerEnvGroup: selectedDopplerEnvGroup
+        });
+        setValue("app.helmOverrides", jsonValues);
+        setDopplerEnvGroup(selectedDopplerEnvGroup);
+        setOpen(false);
+      } catch (e) {
+        console.log("could not attach env group");
+      }
+    }
   }, [selectedEnvGroup]);
 
   const remainingEnvGroupOptions = useMemo(() => {
@@ -107,7 +125,7 @@ const EnvGroupModal: React.FC<Props> = ({ append, setOpen, baseEnvGroups }) => {
                     ))}
                     {dopplerEnvGroups.map((x, i) => (
                       <EnvGroupRow
-                        key={i}
+                        key={i*100}
                         lastItem={i === dopplerEnvGroups.length - 1}
                         isSelected={x.name === selectedDopplerEnvGroup}
                         onClick={() => { 
@@ -155,7 +173,7 @@ const EnvGroupModal: React.FC<Props> = ({ append, setOpen, baseEnvGroups }) => {
           )}
         </ScrollableContainer>
       </ColumnContainer>
-      <Button onClick={onSubmit} disabled={!selectedEnvGroup}>
+      <Button onClick={onSubmit} disabled={!selectedEnvGroup && !selectedDopplerEnvGroup}>
         Load env group
       </Button>
     </Modal>

dashboard/src/main/home/app-dashboard/validate-apply/app-settings/EnvGroups.tsx

@@ -3,6 +3,7 @@ import styled from "styled-components";
 import { useFieldArray, useFormContext } from "react-hook-form";
 
 import sliders from "assets/sliders.svg";
+import doppler from "assets/doppler.png";
 
 import Spacer from "components/porter/Spacer";
 import Text from "components/porter/Text";
@@ -13,6 +14,7 @@ import { PopulatedEnvGroup } from "./types";
 import { valueExists } from "shared/util";
 import EnvGroupModal from "./EnvGroupModal";
 import { IterableElement } from "type-fest";
+import Container from "components/porter/Container";
 
 type Props = {
   baseEnvGroups?: PopulatedEnvGroup[];
@@ -26,6 +28,8 @@ const EnvGroups: React.FC<Props> = ({
   const [showEnvModal, setShowEnvModal] = useState(false);
   const [hovered, setHovered] = useState(false);
 
+  const [dopplerEnvGroup, setDopplerEnvGroup] = useState<string>("");
+
   const { control } = useFormContext<PorterAppFormData>();
   const { append, remove, fields: envGroups } = useFieldArray({
     control,
@@ -114,6 +118,17 @@ const EnvGroups: React.FC<Props> = ({
           Max 3 Env Groups allowed
         </TooltipText>
       </TooltipWrapper>
+      {dopplerEnvGroup && (
+        <>
+          <Spacer y={1} />
+          <DopplerRow>
+            <Container row>
+              <Icon src={doppler} />
+              <Text>{dopplerEnvGroup}</Text>
+            </Container>
+          </DopplerRow>
+        </>
+      )}
       {populatedEnvWithFallback.length > 0 && (
         <>
           <Spacer y={0.5} />
@@ -135,6 +150,7 @@ const EnvGroups: React.FC<Props> = ({
           setOpen={setShowEnvModal}
           baseEnvGroups={baseEnvGroups}
           append={onAdd}
+          setDopplerEnvGroup={setDopplerEnvGroup}
         />
       ) : null}
     </div>
@@ -143,6 +159,25 @@ const EnvGroups: React.FC<Props> = ({
 
 export default EnvGroups;
 
+const Icon = styled.img`
+  height: 20px;
+  margin-right: 10px;
+`;
+
+const DopplerRow = styled.div`
+  position: relative;
+  padding: 15px;
+  border-radius: 5px;
+  background: ${props => props.theme.clickable.bg};
+  border: 1px solid #494b4f;
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px;
+  cursor: not-allowed;
+  justify-content: space-between;
+`;
+
 const AddRowButton = styled.div`
   display: flex;
   align-items: center;