feat(instances): adds cli-details UI
This commit is contained in:
johnytiago
Sérgio Ramos
parent
a1ff036db1
commit
078513f603
@ -21,11 +21,9 @@ exports[`renders <Menu links /> without throwing 1`] = `
|
||||
.c6 {
|
||||
color: rgb(59,70,204);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
}
|
||||
|
||||
.c6:hover {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
-webkit-text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
@ -57,10 +55,10 @@ exports[`renders <Menu links /> without throwing 1`] = `
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.c5.active:after {
|
||||
.c5:after {
|
||||
width: 100%;
|
||||
height: 0.0625rem;
|
||||
background: rgb(73,73,73);
|
||||
background: rgb(216,216,216);
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
@ -68,6 +66,14 @@ exports[`renders <Menu links /> without throwing 1`] = `
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.c5.active:after {
|
||||
background: rgb(73,73,73);
|
||||
}
|
||||
|
||||
.c5.active {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
background: rgb(250,250,250);
|
||||
list-style-type: none;
|
||||
|
||||
@ -54,11 +54,9 @@ exports[`renders <InstanceList /> without throwing 1`] = `
|
||||
.c21 {
|
||||
color: rgb(59,70,204);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
}
|
||||
|
||||
.c21:hover {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
-webkit-text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.c11 {
|
||||
@ -798,11 +796,9 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
|
||||
.c21 {
|
||||
color: rgb(59,70,204);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
}
|
||||
|
||||
.c21:hover {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
-webkit-text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.c11 {
|
||||
@ -1542,11 +1538,9 @@ exports[`renders <InstanceList sortBy /> without throwing 1`] = `
|
||||
.c21 {
|
||||
color: rgb(59,70,204);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
}
|
||||
|
||||
.c21:hover {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
-webkit-text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.c12 {
|
||||
@ -2286,11 +2280,9 @@ exports[`renders <InstanceList sortBy sortOrder /> without throwing 1`] = `
|
||||
.c21 {
|
||||
color: rgb(59,70,204);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
}
|
||||
|
||||
.c21:hover {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
-webkit-text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.c12 {
|
||||
@ -3030,11 +3022,9 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
|
||||
.c21 {
|
||||
color: rgb(59,70,204);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
}
|
||||
|
||||
.c21:hover {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
-webkit-text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.c11 {
|
||||
@ -3774,11 +3764,9 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
|
||||
.c21 {
|
||||
color: rgb(59,70,204);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
}
|
||||
|
||||
.c21:hover {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
-webkit-text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.c11 {
|
||||
@ -4512,11 +4500,9 @@ exports[`renders <Item /> without throwing 1`] = `
|
||||
.c11 {
|
||||
color: rgb(59,70,204);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
}
|
||||
|
||||
.c11:hover {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
-webkit-text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.c12 {
|
||||
@ -5039,11 +5025,9 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
|
||||
.c11 {
|
||||
color: rgb(59,70,204);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
}
|
||||
|
||||
.c11:hover {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
-webkit-text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.c12 {
|
||||
@ -5568,11 +5552,9 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
|
||||
.c11 {
|
||||
color: rgb(59,70,204);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
}
|
||||
|
||||
.c11:hover {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
-webkit-text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.c12 {
|
||||
@ -6095,11 +6077,9 @@ exports[`renders <Item mutating /> without throwing 1`] = `
|
||||
.c11 {
|
||||
color: rgb(59,70,204);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
}
|
||||
|
||||
.c11:hover {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
-webkit-text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.c13 {
|
||||
|
||||
@ -691,8 +691,8 @@ exports[`renders <AddForm /> without throwing 1`] = `
|
||||
.c23 {
|
||||
box-sizing: border-box;
|
||||
width: 18.75rem;
|
||||
height: 6rem;
|
||||
min-height: 6rem;
|
||||
height: 12rem;
|
||||
min-height: 12rem;
|
||||
padding: 0.8125rem 0.75rem;
|
||||
border-radius: 0.25rem;
|
||||
background-color: rgb(255,255,255);
|
||||
@ -706,6 +706,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
outline: 0;
|
||||
white-space: pre-wrap;
|
||||
font-family: "Roboto Mono",monospace;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
@ -1760,8 +1761,8 @@ exports[`renders <EditForm /> without throwing 1`] = `
|
||||
.c23 {
|
||||
box-sizing: border-box;
|
||||
width: 18.75rem;
|
||||
height: 6rem;
|
||||
min-height: 6rem;
|
||||
height: 12rem;
|
||||
min-height: 12rem;
|
||||
padding: 0.8125rem 0.75rem;
|
||||
border-radius: 0.25rem;
|
||||
background-color: rgb(255,255,255);
|
||||
@ -1775,6 +1776,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
outline: 0;
|
||||
white-space: pre-wrap;
|
||||
font-family: "Roboto Mono",monospace;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
|
||||
@ -497,7 +497,7 @@ Array [
|
||||
.c6 {
|
||||
margin: 0;
|
||||
color: rgb(73,73,73);
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.625rem;
|
||||
font-size: 1.3125rem;
|
||||
}
|
||||
@ -2401,7 +2401,7 @@ Array [
|
||||
.c6 {
|
||||
margin: 0;
|
||||
color: rgb(73,73,73);
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.625rem;
|
||||
font-size: 1.3125rem;
|
||||
}
|
||||
@ -3289,7 +3289,7 @@ Array [
|
||||
.c6 {
|
||||
margin: 0;
|
||||
color: rgb(73,73,73);
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.625rem;
|
||||
font-size: 1.3125rem;
|
||||
}
|
||||
@ -4177,7 +4177,7 @@ Array [
|
||||
.c6 {
|
||||
margin: 0;
|
||||
color: rgb(73,73,73);
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.625rem;
|
||||
font-size: 1.3125rem;
|
||||
}
|
||||
@ -5065,7 +5065,7 @@ Array [
|
||||
.c6 {
|
||||
margin: 0;
|
||||
color: rgb(73,73,73);
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.625rem;
|
||||
font-size: 1.3125rem;
|
||||
}
|
||||
@ -5953,7 +5953,7 @@ Array [
|
||||
.c6 {
|
||||
margin: 0;
|
||||
color: rgb(73,73,73);
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.625rem;
|
||||
font-size: 1.3125rem;
|
||||
}
|
||||
|
||||
@ -231,15 +231,13 @@ exports[`renders <Summary /> without throwing 1`] = `
|
||||
.c36 {
|
||||
color: rgb(59,70,204);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
cursor: pointer;
|
||||
-webkit-text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
color: rgb(255,255,255);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
}
|
||||
|
||||
.c36:hover {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.c29 {
|
||||
min-width: 7.5rem;
|
||||
}
|
||||
@ -885,7 +883,7 @@ exports[`renders <Summary /> without throwing 1`] = `
|
||||
.c9 {
|
||||
margin: 0;
|
||||
color: rgb(73,73,73);
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.875rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
@ -952,6 +950,7 @@ exports[`renders <Summary /> without throwing 1`] = `
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
outline: 0;
|
||||
white-space: pre-wrap;
|
||||
font-family: "Roboto Mono",monospace;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
@ -1031,6 +1030,7 @@ exports[`renders <Summary /> without throwing 1`] = `
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
outline: 0;
|
||||
white-space: pre-wrap;
|
||||
font-family: "Roboto Mono",monospace;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
@ -2087,15 +2087,13 @@ exports[`renders <Summary instance /> without throwing 1`] = `
|
||||
.c35 {
|
||||
color: rgb(59,70,204);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
cursor: pointer;
|
||||
-webkit-text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
color: rgb(255,255,255);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
}
|
||||
|
||||
.c35:hover {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.c29 {
|
||||
min-width: 7.5rem;
|
||||
}
|
||||
@ -2580,7 +2578,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
|
||||
.c9 {
|
||||
margin: 0;
|
||||
color: rgb(73,73,73);
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.875rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
@ -2647,6 +2645,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
outline: 0;
|
||||
white-space: pre-wrap;
|
||||
font-family: "Roboto Mono",monospace;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
@ -4020,15 +4019,13 @@ exports[`renders <Summary instance /> without throwing 2`] = `
|
||||
.c35 {
|
||||
color: rgb(59,70,204);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
cursor: pointer;
|
||||
-webkit-text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
color: rgb(255,255,255);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
}
|
||||
|
||||
.c35:hover {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.c29 {
|
||||
min-width: 7.5rem;
|
||||
}
|
||||
@ -4513,7 +4510,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
|
||||
.c9 {
|
||||
margin: 0;
|
||||
color: rgb(73,73,73);
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.875rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
@ -4580,6 +4577,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
outline: 0;
|
||||
white-space: pre-wrap;
|
||||
font-family: "Roboto Mono",monospace;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
@ -5949,15 +5947,13 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
|
||||
.c39 {
|
||||
color: rgb(59,70,204);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
cursor: pointer;
|
||||
-webkit-text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
color: rgb(255,255,255);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
}
|
||||
|
||||
.c39:hover {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.c32 {
|
||||
fill: rgb(59,70,204);
|
||||
stroke: rgb(59,70,204);
|
||||
@ -6648,7 +6644,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
|
||||
.c9 {
|
||||
margin: 0;
|
||||
color: rgb(73,73,73);
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.875rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
@ -6715,6 +6711,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
outline: 0;
|
||||
white-space: pre-wrap;
|
||||
font-family: "Roboto Mono",monospace;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
@ -6794,6 +6791,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
outline: 0;
|
||||
white-space: pre-wrap;
|
||||
font-family: "Roboto Mono",monospace;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
@ -7874,15 +7872,13 @@ exports[`renders <Summary state /> without throwing 1`] = `
|
||||
.c35 {
|
||||
color: rgb(59,70,204);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
cursor: pointer;
|
||||
-webkit-text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
color: rgb(255,255,255);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
}
|
||||
|
||||
.c35:hover {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.c29 {
|
||||
min-width: 7.5rem;
|
||||
}
|
||||
@ -8367,7 +8363,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
|
||||
.c9 {
|
||||
margin: 0;
|
||||
color: rgb(73,73,73);
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.875rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
@ -8434,6 +8430,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
outline: 0;
|
||||
white-space: pre-wrap;
|
||||
font-family: "Roboto Mono",monospace;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
@ -8513,6 +8510,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
outline: 0;
|
||||
white-space: pre-wrap;
|
||||
font-family: "Roboto Mono",monospace;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
@ -9569,15 +9567,13 @@ exports[`renders <Summary state /> without throwing 2`] = `
|
||||
.c35 {
|
||||
color: rgb(59,70,204);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
cursor: pointer;
|
||||
-webkit-text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
color: rgb(255,255,255);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
}
|
||||
|
||||
.c35:hover {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.c29 {
|
||||
min-width: 7.5rem;
|
||||
}
|
||||
@ -10062,7 +10058,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
|
||||
.c9 {
|
||||
margin: 0;
|
||||
color: rgb(73,73,73);
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.875rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
@ -10129,6 +10125,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
outline: 0;
|
||||
white-space: pre-wrap;
|
||||
font-family: "Roboto Mono",monospace;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
@ -10208,6 +10205,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
outline: 0;
|
||||
white-space: pre-wrap;
|
||||
font-family: "Roboto Mono",monospace;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
@ -11264,15 +11262,13 @@ exports[`renders <Summary state /> without throwing 3`] = `
|
||||
.c36 {
|
||||
color: rgb(59,70,204);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
cursor: pointer;
|
||||
-webkit-text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
color: rgb(255,255,255);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
}
|
||||
|
||||
.c36:hover {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.c29 {
|
||||
min-width: 7.5rem;
|
||||
}
|
||||
@ -11919,7 +11915,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
|
||||
.c9 {
|
||||
margin: 0;
|
||||
color: rgb(73,73,73);
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.875rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
@ -11986,6 +11982,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
outline: 0;
|
||||
white-space: pre-wrap;
|
||||
font-family: "Roboto Mono",monospace;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
@ -12065,6 +12062,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
outline: 0;
|
||||
white-space: pre-wrap;
|
||||
font-family: "Roboto Mono",monospace;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
|
||||
@ -24,7 +24,7 @@ export default ({
|
||||
onReboot,
|
||||
onRemove
|
||||
}) => (
|
||||
<StickyFooter fill="#FAFAFA" fixed bottom>
|
||||
<StickyFooter fill="disabled" fixed bottom>
|
||||
<Row between="xs" middle="xs">
|
||||
<Col xs="7">
|
||||
<Flex>
|
||||
|
||||
@ -18,6 +18,7 @@ export const Forms = {
|
||||
};
|
||||
|
||||
export const Values = {
|
||||
IC_SHOW_CLI: 'INSTANCE_CREATION_SHOW_CLI',
|
||||
IC_AFF_V_ADD_OPEN: 'INSTANCE_CREATION_AFFINITY_VALUE_ADD_OPEN',
|
||||
IC_AFF_V_EDIT_OPEN: 'INSTANCE_CREATION_AFFINITY_VALUE_EDIT_OPEN',
|
||||
IC_AFF_V_AFF: 'INSTANCE_CREATION_AFFINITY_VALUE_AFFINITY',
|
||||
|
||||
@ -1,15 +1,14 @@
|
||||
import React, { Component } from 'react';
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import { Margin, Padding } from 'styled-components-spacing';
|
||||
import { graphql, compose } from 'react-apollo';
|
||||
import ReduxForm from 'declarative-redux-form';
|
||||
import { connect } from 'react-redux';
|
||||
import { SubmissionError, destroy } from 'redux-form';
|
||||
import { set, destroyAll } from 'react-redux-values';
|
||||
import Flex, { FlexItem } from 'styled-flex-component';
|
||||
import intercept from 'apr-intercept';
|
||||
import get from 'lodash.get';
|
||||
|
||||
import { H3, ViewContainer, Button } from 'joyent-ui-toolkit';
|
||||
import { Provider as ResourceSteps } from 'joyent-ui-resource-step';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import {
|
||||
Name,
|
||||
@ -22,14 +21,20 @@ import {
|
||||
Firewall,
|
||||
CNS,
|
||||
Affinity,
|
||||
generatePayload
|
||||
generatePayload,
|
||||
Footer
|
||||
} from 'joyent-ui-instance-steps';
|
||||
|
||||
import { Forms } from '@root/constants';
|
||||
import { Provider as ResourceSteps } from 'joyent-ui-resource-step';
|
||||
import { Anchor, H3, ViewContainer, Button } from 'joyent-ui-toolkit';
|
||||
|
||||
import { Forms, Values } from '@root/constants';
|
||||
import parseError from '@state/parse-error';
|
||||
import CreateInstanceMutation from '@graphql/create-instance.gql';
|
||||
|
||||
const { IC_F } = Forms;
|
||||
const { IC_SHOW_CLI } = Values;
|
||||
|
||||
const names = {
|
||||
name: 'IC_NAME',
|
||||
image: 'IC_IMAGE',
|
||||
@ -86,7 +91,16 @@ class CreateInstance extends Component {
|
||||
};
|
||||
|
||||
render() {
|
||||
const { match, steps, handleDefocus, handleSubmit, disabled } = this.props;
|
||||
const {
|
||||
match,
|
||||
steps,
|
||||
showCli = false,
|
||||
handleDefocus,
|
||||
handleToggleShowCli,
|
||||
handleSubmit,
|
||||
disabled
|
||||
} = this.props;
|
||||
|
||||
const { params } = match;
|
||||
const { step } = params;
|
||||
|
||||
@ -102,6 +116,16 @@ class CreateInstance extends Component {
|
||||
affinity
|
||||
} = steps;
|
||||
|
||||
const Mask = styled.div`
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
position: absolute;
|
||||
display: ${showCli ? 'block' : 'none'};
|
||||
`;
|
||||
|
||||
return (
|
||||
<ViewContainer main>
|
||||
<Margin top="5">
|
||||
@ -218,20 +242,43 @@ class CreateInstance extends Component {
|
||||
</Margin>
|
||||
</ResourceSteps>
|
||||
<Margin bottom="5">
|
||||
<ReduxForm form={IC_F} onSubmit={handleSubmit}>
|
||||
{({ handleSubmit, submitting }) => (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Button
|
||||
<Flex alignCenter>
|
||||
<FlexItem>
|
||||
<ReduxForm form={IC_F} onSubmit={handleSubmit}>
|
||||
{({ handleSubmit, submitting }) => (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Button
|
||||
disabled={disabled || !this.isFormValid()}
|
||||
loading={submitting}
|
||||
>
|
||||
Deploy
|
||||
</Button>
|
||||
</form>
|
||||
)}
|
||||
</ReduxForm>
|
||||
</FlexItem>
|
||||
<FlexItem>
|
||||
<Margin left={3}>
|
||||
<Anchor
|
||||
disabled={disabled || !this.isFormValid()}
|
||||
loading={submitting}
|
||||
onClick={() => handleToggleShowCli(!showCli)}
|
||||
>
|
||||
Deploy
|
||||
</Button>
|
||||
</form>
|
||||
)}
|
||||
</ReduxForm>
|
||||
View CLI Details
|
||||
</Anchor>
|
||||
</Margin>
|
||||
</FlexItem>
|
||||
</Flex>
|
||||
</Margin>
|
||||
</Padding>
|
||||
{showCli ? (
|
||||
<Fragment>
|
||||
<Footer
|
||||
getData={() => generatePayload(steps)}
|
||||
onCloseCli={() => handleToggleShowCli(!showCli)}
|
||||
/>
|
||||
<Mask onClick={() => handleToggleShowCli(!showCli)} />
|
||||
</Fragment>
|
||||
) : null}
|
||||
</ViewContainer>
|
||||
);
|
||||
}
|
||||
@ -254,6 +301,7 @@ export default compose(
|
||||
};
|
||||
|
||||
const error = get(form, `${IC_F}.error`, null);
|
||||
const showCli = Boolean(values[IC_SHOW_CLI]);
|
||||
|
||||
// Maybe re-use saved to only write the rule once
|
||||
const disabled = !(
|
||||
@ -270,6 +318,7 @@ export default compose(
|
||||
|
||||
return {
|
||||
disabled,
|
||||
showCli,
|
||||
forms: Object.keys(form), // improve this
|
||||
error,
|
||||
steps
|
||||
@ -277,10 +326,12 @@ export default compose(
|
||||
}),
|
||||
connect(null, (dispatch, { steps = {}, forms, history, createInstance }) => {
|
||||
return {
|
||||
handleToggleShowCli: value => {
|
||||
return dispatch(set({ name: IC_SHOW_CLI, value }));
|
||||
},
|
||||
handleDefocus: name => value => {
|
||||
return dispatch(set({ name: names[name], value }));
|
||||
},
|
||||
|
||||
handleSubmit: async () => {
|
||||
const [err, res] = await intercept(
|
||||
createInstance({
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -172,7 +172,7 @@ exports[`renders <List /> without throwing 1`] = `
|
||||
.c3 {
|
||||
margin: 0;
|
||||
color: rgb(73,73,73);
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.625rem;
|
||||
font-size: 1.3125rem;
|
||||
}
|
||||
@ -1153,7 +1153,7 @@ exports[`renders <List error /> without throwing 1`] = `
|
||||
.c3 {
|
||||
margin: 0;
|
||||
color: rgb(73,73,73);
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.625rem;
|
||||
font-size: 1.3125rem;
|
||||
}
|
||||
@ -2090,11 +2090,9 @@ exports[`renders <List instances /> without throwing 1`] = `
|
||||
.c33 {
|
||||
color: rgb(59,70,204);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
}
|
||||
|
||||
.c33:hover {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
-webkit-text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.c13 {
|
||||
@ -2230,7 +2228,7 @@ exports[`renders <List instances /> without throwing 1`] = `
|
||||
.c3 {
|
||||
margin: 0;
|
||||
color: rgb(73,73,73);
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.625rem;
|
||||
font-size: 1.3125rem;
|
||||
}
|
||||
@ -3669,11 +3667,9 @@ exports[`renders <List instances selected /> without throwing 1`] = `
|
||||
.c33 {
|
||||
color: rgb(59,70,204);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
}
|
||||
|
||||
.c33:hover {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
-webkit-text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.c58 {
|
||||
@ -4384,7 +4380,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
|
||||
.c3 {
|
||||
margin: 0;
|
||||
color: rgb(73,73,73);
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.625rem;
|
||||
font-size: 1.3125rem;
|
||||
}
|
||||
@ -4425,12 +4421,10 @@ exports[`renders <List instances selected /> without throwing 1`] = `
|
||||
-webkit-box-align: stretch;
|
||||
-ms-flex-align: stretch;
|
||||
align-items: stretch;
|
||||
background-color: rgb(250,250,250);
|
||||
border-top: 0.0625rem solid rgb(216,216,216);
|
||||
max-height: 3.3125rem;
|
||||
min-height: 3.3125rem;
|
||||
line-height: 1.5625rem;
|
||||
height: 4.375rem;
|
||||
max-height: 4.375rem;
|
||||
z-index: 1;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
@ -5843,10 +5837,11 @@ exports[`renders <List instances selected /> without throwing 1`] = `
|
||||
</form>
|
||||
<div
|
||||
className="c51"
|
||||
fill="#FAFAFA"
|
||||
fill="disabled"
|
||||
>
|
||||
<div
|
||||
className="c52 c53 c1"
|
||||
fill="disabled"
|
||||
>
|
||||
<div
|
||||
className="c54"
|
||||
@ -6294,11 +6289,9 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
|
||||
.c33 {
|
||||
color: rgb(59,70,204);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
}
|
||||
|
||||
.c33:hover {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
-webkit-text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.c58 {
|
||||
@ -7009,7 +7002,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
|
||||
.c3 {
|
||||
margin: 0;
|
||||
color: rgb(73,73,73);
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.625rem;
|
||||
font-size: 1.3125rem;
|
||||
}
|
||||
@ -7050,12 +7043,10 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
|
||||
-webkit-box-align: stretch;
|
||||
-ms-flex-align: stretch;
|
||||
align-items: stretch;
|
||||
background-color: rgb(250,250,250);
|
||||
border-top: 0.0625rem solid rgb(216,216,216);
|
||||
max-height: 3.3125rem;
|
||||
min-height: 3.3125rem;
|
||||
line-height: 1.5625rem;
|
||||
height: 4.375rem;
|
||||
max-height: 4.375rem;
|
||||
z-index: 1;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
@ -8468,10 +8459,11 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
|
||||
</form>
|
||||
<div
|
||||
className="c51"
|
||||
fill="#FAFAFA"
|
||||
fill="disabled"
|
||||
>
|
||||
<div
|
||||
className="c52 c53 c1"
|
||||
fill="disabled"
|
||||
>
|
||||
<div
|
||||
className="c54"
|
||||
@ -8919,11 +8911,9 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
|
||||
.c33 {
|
||||
color: rgb(59,70,204);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
}
|
||||
|
||||
.c33:hover {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
-webkit-text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.c58 {
|
||||
@ -9829,7 +9819,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
|
||||
.c3 {
|
||||
margin: 0;
|
||||
color: rgb(73,73,73);
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.625rem;
|
||||
font-size: 1.3125rem;
|
||||
}
|
||||
@ -9870,12 +9860,10 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
|
||||
-webkit-box-align: stretch;
|
||||
-ms-flex-align: stretch;
|
||||
align-items: stretch;
|
||||
background-color: rgb(250,250,250);
|
||||
border-top: 0.0625rem solid rgb(216,216,216);
|
||||
max-height: 3.3125rem;
|
||||
min-height: 3.3125rem;
|
||||
line-height: 1.5625rem;
|
||||
height: 4.375rem;
|
||||
max-height: 4.375rem;
|
||||
z-index: 1;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
@ -11288,10 +11276,11 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
|
||||
</form>
|
||||
<div
|
||||
className="c51"
|
||||
fill="#FAFAFA"
|
||||
fill="disabled"
|
||||
>
|
||||
<div
|
||||
className="c52 c53 c1"
|
||||
fill="disabled"
|
||||
>
|
||||
<div
|
||||
className="c54"
|
||||
@ -11831,7 +11820,7 @@ exports[`renders <List loading /> without throwing 1`] = `
|
||||
.c3 {
|
||||
margin: 0;
|
||||
color: rgb(73,73,73);
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.625rem;
|
||||
font-size: 1.3125rem;
|
||||
}
|
||||
|
||||
@ -169,7 +169,7 @@ exports[`renders <Metadata /> without throwing 1`] = `
|
||||
.c19 {
|
||||
margin: 0;
|
||||
color: rgb(73,73,73);
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.625rem;
|
||||
font-size: 1.3125rem;
|
||||
}
|
||||
@ -977,7 +977,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
|
||||
.c19 {
|
||||
margin: 0;
|
||||
color: rgb(73,73,73);
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.625rem;
|
||||
font-size: 1.3125rem;
|
||||
}
|
||||
@ -1309,8 +1309,8 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
|
||||
.c39 {
|
||||
box-sizing: border-box;
|
||||
width: 18.75rem;
|
||||
height: 6rem;
|
||||
min-height: 6rem;
|
||||
height: 12rem;
|
||||
min-height: 12rem;
|
||||
padding: 0.8125rem 0.75rem;
|
||||
border-radius: 0.25rem;
|
||||
background-color: rgb(255,255,255);
|
||||
@ -1324,6 +1324,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
outline: 0;
|
||||
white-space: pre-wrap;
|
||||
font-family: "Roboto Mono",monospace;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
@ -1986,7 +1987,7 @@ exports[`renders <Metadata error /> without throwing 1`] = `
|
||||
.c25 {
|
||||
margin: 0;
|
||||
color: rgb(73,73,73);
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.625rem;
|
||||
font-size: 1.3125rem;
|
||||
}
|
||||
@ -3578,7 +3579,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
|
||||
.c19 {
|
||||
margin: 0;
|
||||
color: rgb(73,73,73);
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.625rem;
|
||||
font-size: 1.3125rem;
|
||||
}
|
||||
@ -3904,8 +3905,8 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
|
||||
.c39 {
|
||||
box-sizing: border-box;
|
||||
width: 18.75rem;
|
||||
height: 6rem;
|
||||
min-height: 6rem;
|
||||
height: 12rem;
|
||||
min-height: 12rem;
|
||||
padding: 0.8125rem 0.75rem;
|
||||
border-radius: 0.25rem;
|
||||
background-color: rgb(255,255,255);
|
||||
@ -3919,6 +3920,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
outline: 0;
|
||||
white-space: pre-wrap;
|
||||
font-family: "Roboto Mono",monospace;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
|
||||
@ -65,7 +65,7 @@ exports[`renders <Networks /> without throwing 1`] = `
|
||||
.c7 {
|
||||
margin: 0;
|
||||
color: rgb(73,73,73);
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.625rem;
|
||||
font-size: 1.3125rem;
|
||||
}
|
||||
@ -608,7 +608,7 @@ exports[`renders <Networks error /> without throwing 1`] = `
|
||||
.c7 {
|
||||
margin: 0;
|
||||
color: rgb(73,73,73);
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.625rem;
|
||||
font-size: 1.3125rem;
|
||||
}
|
||||
@ -888,7 +888,7 @@ exports[`renders <Networks loading /> without throwing 1`] = `
|
||||
.c7 {
|
||||
margin: 0;
|
||||
color: rgb(73,73,73);
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.625rem;
|
||||
font-size: 1.3125rem;
|
||||
}
|
||||
@ -1121,7 +1121,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
|
||||
.c7 {
|
||||
margin: 0;
|
||||
color: rgb(73,73,73);
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.625rem;
|
||||
font-size: 1.3125rem;
|
||||
}
|
||||
|
||||
@ -985,15 +985,13 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
|
||||
.c37 {
|
||||
color: rgb(59,70,204);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
cursor: pointer;
|
||||
-webkit-text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
color: rgb(255,255,255);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
}
|
||||
|
||||
.c37:hover {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.c31 {
|
||||
min-width: 7.5rem;
|
||||
}
|
||||
@ -1597,7 +1595,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
|
||||
.c11 {
|
||||
margin: 0;
|
||||
color: rgb(73,73,73);
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.875rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
@ -1701,6 +1699,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
outline: 0;
|
||||
white-space: pre-wrap;
|
||||
font-family: "Roboto Mono",monospace;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
@ -2973,15 +2972,13 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
|
||||
.c37 {
|
||||
color: rgb(59,70,204);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
cursor: pointer;
|
||||
-webkit-text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
color: rgb(255,255,255);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
}
|
||||
|
||||
.c37:hover {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.c31 {
|
||||
min-width: 7.5rem;
|
||||
}
|
||||
@ -3585,7 +3582,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
|
||||
.c11 {
|
||||
margin: 0;
|
||||
color: rgb(73,73,73);
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.875rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
@ -3689,6 +3686,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
outline: 0;
|
||||
white-space: pre-wrap;
|
||||
font-family: "Roboto Mono",monospace;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
|
||||
@ -169,7 +169,7 @@ exports[`renders <Tags /> without throwing 1`] = `
|
||||
.c19 {
|
||||
margin: 0;
|
||||
color: rgb(73,73,73);
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.625rem;
|
||||
font-size: 1.3125rem;
|
||||
}
|
||||
@ -998,7 +998,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
|
||||
.c47 {
|
||||
margin: 0;
|
||||
color: rgb(73,73,73);
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.625rem;
|
||||
font-size: 1.3125rem;
|
||||
}
|
||||
@ -1995,7 +1995,7 @@ exports[`renders <Tags editable /> without throwing 1`] = `
|
||||
.c19 {
|
||||
margin: 0;
|
||||
color: rgb(73,73,73);
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.625rem;
|
||||
font-size: 1.3125rem;
|
||||
}
|
||||
@ -2846,7 +2846,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
|
||||
.c49 {
|
||||
margin: 0;
|
||||
color: rgb(73,73,73);
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.625rem;
|
||||
font-size: 1.3125rem;
|
||||
}
|
||||
@ -4354,7 +4354,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
|
||||
.c52 {
|
||||
margin: 0;
|
||||
color: rgb(73,73,73);
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.625rem;
|
||||
font-size: 1.3125rem;
|
||||
}
|
||||
@ -5407,7 +5407,7 @@ exports[`renders <Tags error /> without throwing 1`] = `
|
||||
.c19 {
|
||||
margin: 0;
|
||||
color: rgb(73,73,73);
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.625rem;
|
||||
font-size: 1.3125rem;
|
||||
}
|
||||
@ -6368,7 +6368,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
|
||||
.c19 {
|
||||
margin: 0;
|
||||
color: rgb(73,73,73);
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.625rem;
|
||||
font-size: 1.3125rem;
|
||||
}
|
||||
|
||||
@ -26,6 +26,7 @@
|
||||
"apr-reduce": "^3.0.3",
|
||||
"constant-case": "^2.0.0",
|
||||
"declarative-redux-form": "^2.0.8",
|
||||
"force-array": "^3.1.0",
|
||||
"joyent-ui-resource-step": "^1.0.0",
|
||||
"joyent-ui-resource-widgets": "^1.0.0",
|
||||
"joyent-ui-toolkit": "^6.0.0",
|
||||
|
||||
131
packages/instance-steps/src/footer/cli-details.js
Normal file
131
packages/instance-steps/src/footer/cli-details.js
Normal file
@ -0,0 +1,131 @@
|
||||
const ForceArray = require('force-array');
|
||||
|
||||
export const generateTerraform = data => {
|
||||
const {
|
||||
name,
|
||||
package: pkg,
|
||||
image,
|
||||
affinity,
|
||||
metadata: _metadata,
|
||||
tags: _tags,
|
||||
firewall_enabled,
|
||||
networks
|
||||
} = formatData(data);
|
||||
|
||||
const cns = ForceArray(
|
||||
(_tags.filter(({ name }) => name === 'triton.cns.services').pop() || {})
|
||||
.value
|
||||
);
|
||||
const userScript = (
|
||||
_metadata.filter(({ name }) => name === 'user-script').pop() || {}
|
||||
).value;
|
||||
|
||||
const tags = _tags.filter(({ name }) => !/^triton./.test(name));
|
||||
const metadata = _metadata.filter(({ name }) => name !== 'user-script');
|
||||
|
||||
return (
|
||||
`resource "triton_machine" ${name} {
|
||||
name = "${name}"
|
||||
package = "${pkg}"
|
||||
image = "${image}"
|
||||
networks = ["${networks.join('","')}"]
|
||||
firewall_enabled = ${Boolean(firewall_enabled)}` +
|
||||
`${
|
||||
affinity
|
||||
? `
|
||||
affinity = ["${affinity}"]`
|
||||
: ''
|
||||
}` +
|
||||
`${
|
||||
userScript && userScript.length
|
||||
? `\n
|
||||
user_script = "${userScript}"`
|
||||
: ''
|
||||
}` +
|
||||
`${
|
||||
cns.length
|
||||
? `\n
|
||||
cns {
|
||||
services = ["${cns.join('", "')}"]
|
||||
}`
|
||||
: ''
|
||||
}` +
|
||||
`${
|
||||
tags.length
|
||||
? `\n
|
||||
tags {
|
||||
${tags.map(e => `${e.name} = "${e.value}"`).join('\n ')}
|
||||
}`
|
||||
: ''
|
||||
}` +
|
||||
`${
|
||||
metadata.length
|
||||
? `\n
|
||||
metadata {
|
||||
${metadata.map(e => `${e.name} = "${e.value}"`).join('\n ')}
|
||||
}`
|
||||
: ''
|
||||
}` +
|
||||
`\n}`
|
||||
);
|
||||
};
|
||||
|
||||
export const generateCLI = data => {
|
||||
const {
|
||||
metadata,
|
||||
tags,
|
||||
firewall_enabled,
|
||||
networks,
|
||||
name,
|
||||
package: pkg,
|
||||
image
|
||||
} = data;
|
||||
|
||||
const { affinity } = formatData(data);
|
||||
|
||||
const _networks = `--network="${networks.join('","')}"`;
|
||||
const _affinity = affinity ? `--affinity="${affinity}"` : '';
|
||||
|
||||
const _tags = tags.length
|
||||
? `--tag=${JSON.stringify(
|
||||
tags.reduce((acc, t) => Object.assign(acc, { [t.name]: t.value }))
|
||||
)}`
|
||||
: '';
|
||||
|
||||
const _metadata = metadata.length
|
||||
? `--metadata=${JSON.stringify(
|
||||
metadata.reduce(
|
||||
(acc, m) => Object.assign(acc, { [m.name]: m.value }),
|
||||
{}
|
||||
)
|
||||
)}`
|
||||
: '';
|
||||
|
||||
const _firewall = firewall_enabled ? `--firewall` : '';
|
||||
return `triton instance create -w --name=${name} ${_networks} ${_affinity} ${_tags} ${_metadata} ${_firewall} ${image} ${pkg}`;
|
||||
};
|
||||
|
||||
const formatData = ({ affinity, metadata = [], tags = [], ...rest }) => ({
|
||||
affinity:
|
||||
affinity &&
|
||||
affinity.length &&
|
||||
`${affinity[0].key}${getAffinityOp(affinity[0].type)}${affinity[0].value}`,
|
||||
tags: tags.filter(
|
||||
e => e.name !== 'triton.cns.services' || e.name !== 'triton.cns.disable'
|
||||
),
|
||||
metadata: metadata.filter(e => e.name !== 'user-script'),
|
||||
...rest
|
||||
});
|
||||
|
||||
const getAffinityOp = type => {
|
||||
switch (type.toUpperCase()) {
|
||||
case 'MUST_EQUAL':
|
||||
return '==';
|
||||
case 'MUST_NOT_EQUAL':
|
||||
return '!=';
|
||||
case 'SHOULD_EQUAL':
|
||||
return '==~';
|
||||
case 'SHOULD_NOT_EQUAL':
|
||||
return '!=~';
|
||||
}
|
||||
};
|
||||
141
packages/instance-steps/src/footer/index.js
Normal file
141
packages/instance-steps/src/footer/index.js
Normal file
@ -0,0 +1,141 @@
|
||||
import React from 'react';
|
||||
import { Row, Col } from 'joyent-react-styled-flexboxgrid';
|
||||
import { Margin, Padding } from 'styled-components-spacing';
|
||||
import Flex from 'styled-flex-component';
|
||||
import styled from 'styled-components';
|
||||
import remcalc from 'remcalc';
|
||||
|
||||
import {
|
||||
Anchor,
|
||||
CloseIcon as Close,
|
||||
H3,
|
||||
Textarea,
|
||||
Input,
|
||||
P,
|
||||
SectionList,
|
||||
SectionListAnchor,
|
||||
SectionListItem,
|
||||
StickyFooter,
|
||||
ViewContainer
|
||||
} from 'joyent-ui-toolkit';
|
||||
|
||||
import { generateTerraform, generateCLI } from './cli-details';
|
||||
|
||||
export default class CLIFooter extends React.Component {
|
||||
state = {
|
||||
active: 'triton'
|
||||
};
|
||||
|
||||
render() {
|
||||
const { active } = this.state;
|
||||
const { getData, onCloseCli } = this.props;
|
||||
|
||||
return (
|
||||
<StickyFooter borderless auto fixed bottom fill="#494949">
|
||||
<div>
|
||||
<Padding vertical="8">
|
||||
<CloseIcon onClick={onCloseCli} />
|
||||
<Row>
|
||||
<Col xs="12" sm="8">
|
||||
<Margin bottom="2">
|
||||
<Flex>
|
||||
<H3 white>CLI details</H3>
|
||||
</Flex>
|
||||
</Margin>
|
||||
<Margin bottom="5">
|
||||
<P white>
|
||||
Below you can find the command line instructions to deploy
|
||||
this exact instance, or a copy of it, directly from either
|
||||
the Triton CLI or Terraform.
|
||||
</P>
|
||||
</Margin>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col sm="12">
|
||||
<ViewContainer plain>
|
||||
<Margin bottom="3">
|
||||
<SectionList clear>
|
||||
<SectionListItem>
|
||||
<SectionListAnchor
|
||||
white
|
||||
active={active === 'triton'}
|
||||
onClick={() => this.setState({ active: 'triton' })}
|
||||
>
|
||||
Triton CLI
|
||||
</SectionListAnchor>
|
||||
</SectionListItem>
|
||||
<SectionListItem>
|
||||
<SectionListAnchor
|
||||
white
|
||||
active={active === 'terraform'}
|
||||
onClick={() => this.setState({ active: 'terraform' })}
|
||||
>
|
||||
Terraform
|
||||
</SectionListAnchor>
|
||||
</SectionListItem>
|
||||
</SectionList>
|
||||
</Margin>
|
||||
</ViewContainer>
|
||||
<Margin bottom="3">
|
||||
{active === 'triton' ? (
|
||||
<Input
|
||||
readOnly
|
||||
borderless
|
||||
monospace
|
||||
fluid
|
||||
white
|
||||
dark
|
||||
resize
|
||||
rows="15"
|
||||
value={generateCLI(getData())}
|
||||
/>
|
||||
) : (
|
||||
<Textarea
|
||||
readOnly
|
||||
borderless
|
||||
monospace
|
||||
fluid
|
||||
white
|
||||
dark
|
||||
resize
|
||||
value={generateTerraform(getData())}
|
||||
/>
|
||||
)}
|
||||
</Margin>
|
||||
<Margin>
|
||||
<Anchor white>{`Learn how to configure ${
|
||||
active === 'triton' ? 'Triton CLI' : 'Terraform'
|
||||
}`}</Anchor>
|
||||
</Margin>
|
||||
</Col>
|
||||
</Row>
|
||||
</Padding>
|
||||
</div>
|
||||
</StickyFooter>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const Frame = styled.div`
|
||||
border-radius: 50%;
|
||||
border: ${remcalc(1)} solid ${props => props.theme.white};
|
||||
height: ${remcalc(30)};
|
||||
width: ${remcalc(30)};
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
float: right;
|
||||
`;
|
||||
|
||||
const CloseIcon = props => (
|
||||
<Frame {...props}>
|
||||
<Margin all="1">
|
||||
<Close fill="white" />
|
||||
</Margin>
|
||||
</Frame>
|
||||
);
|
||||
@ -66,7 +66,7 @@ export const generatePayload = steps => {
|
||||
});
|
||||
|
||||
if (cns.serviceNames.length) {
|
||||
metadata.push({
|
||||
tags.push({
|
||||
name: 'triton.cns.services',
|
||||
value: cns.serviceNames.join(',')
|
||||
});
|
||||
@ -94,3 +94,4 @@ export { default as UserScript } from './user-script';
|
||||
export { default as Firewall, Preview as FirewallPreview } from './firewall';
|
||||
export { default as CNS, Preview as CnsPreview } from './cns';
|
||||
export { default as Affinity } from './affinity';
|
||||
export { default as Footer } from './footer';
|
||||
|
||||
@ -45,10 +45,6 @@ const RandomizeIcon = styled(BaseRandomizeIcon)`
|
||||
width: ${remcalc(16)};
|
||||
`;
|
||||
|
||||
const Form = styled.form`
|
||||
margin-bottom: 0;
|
||||
`;
|
||||
|
||||
const NameContainer = ({
|
||||
history,
|
||||
randomizable = false,
|
||||
@ -86,7 +82,7 @@ const NameContainer = ({
|
||||
keepDirtyOnReinitialize
|
||||
>
|
||||
{({ invalid }) => (
|
||||
<Form onSubmit={() => history.push(next)}>
|
||||
<form onSubmit={() => history.push(next)}>
|
||||
<FormGroup id="input-name" name="name" fluid field={Field}>
|
||||
<FormLabel>Instance name</FormLabel>
|
||||
<Margin top="0.5">
|
||||
@ -159,7 +155,7 @@ const NameContainer = ({
|
||||
Next
|
||||
</Button>
|
||||
</Margin>
|
||||
</Form>
|
||||
</form>
|
||||
)}
|
||||
</ReduxForm>
|
||||
</Margin>
|
||||
|
||||
@ -9,8 +9,7 @@ import get from 'lodash.get';
|
||||
import forceArray from 'force-array';
|
||||
import includes from 'lodash.includes';
|
||||
import find from 'lodash.find';
|
||||
import styled, { withTheme } from 'styled-components';
|
||||
import remcalc from 'remcalc';
|
||||
import { withTheme } from 'styled-components';
|
||||
|
||||
import Step, {
|
||||
Header as StepHeader,
|
||||
|
||||
@ -223,4 +223,4 @@ export default compose(
|
||||
]);
|
||||
}
|
||||
}))
|
||||
)(withTheme(({ ...rest }) => <Metadata {...rest} />));
|
||||
)(withTheme(({ ...rest }) => <TagsContainer {...rest} />));
|
||||
|
||||
@ -58,13 +58,13 @@ export const Saved = ({ inverted, children }) => {
|
||||
};
|
||||
|
||||
export const Error = ({ inverted = false, noLabel = false, children }) => {
|
||||
const fill = inverted ? 'red' : 'white';
|
||||
const statusFill = inverted ? 'red' : 'white';
|
||||
const iconFill = inverted ? 'white' : 'redDark';
|
||||
|
||||
return (
|
||||
<StatusIcon
|
||||
border="redDark"
|
||||
fill={fill}
|
||||
border={'redDark'}
|
||||
fill={statusFill}
|
||||
Icon={() => <CloseIcon fill={iconFill} />}
|
||||
>
|
||||
{noLabel ? null : (
|
||||
|
||||
@ -5,15 +5,15 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
|
||||
margin-bottom: 1.125rem;
|
||||
}
|
||||
|
||||
.c8 {
|
||||
.c7 {
|
||||
margin-top: 0.1875rem;
|
||||
}
|
||||
|
||||
.c10 {
|
||||
.c9 {
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
.c1 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
@ -40,7 +40,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
.c3 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
@ -60,7 +60,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
|
||||
align-content: stretch;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
.c2 {
|
||||
-webkit-order: 0;
|
||||
-ms-flex-order: 0;
|
||||
order: 0;
|
||||
@ -77,7 +77,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
|
||||
display: block;
|
||||
}
|
||||
|
||||
.c14 {
|
||||
.c13 {
|
||||
font-family: sans-serif;
|
||||
font-size: 100%;
|
||||
line-height: 1.15;
|
||||
@ -89,30 +89,30 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
|
||||
appearance: button;
|
||||
}
|
||||
|
||||
.c14::-moz-focus-inner,
|
||||
.c14[type='button']::-moz-focus-inner,
|
||||
.c14[type='reset']::-moz-focus-inner,
|
||||
.c14[type='submit']::-moz-focus-inner {
|
||||
.c13::-moz-focus-inner,
|
||||
.c13[type='button']::-moz-focus-inner,
|
||||
.c13[type='reset']::-moz-focus-inner,
|
||||
.c13[type='submit']::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.c14:-moz-focusring,
|
||||
.c14[type='button']:-moz-focusring,
|
||||
.c14[type='reset']:-moz-focusring,
|
||||
.c14[type='submit']:-moz-focusring {
|
||||
.c13:-moz-focusring,
|
||||
.c13[type='button']:-moz-focusring,
|
||||
.c13[type='reset']:-moz-focusring,
|
||||
.c13[type='submit']:-moz-focusring {
|
||||
outline: 0.0625rem dotted ButtonText;
|
||||
}
|
||||
|
||||
.c13 {
|
||||
.c12 {
|
||||
min-width: 7.5rem;
|
||||
}
|
||||
|
||||
.c12 {
|
||||
.c11 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.c11 {
|
||||
.c10 {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
-webkit-box-pack: center;
|
||||
@ -151,7 +151,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
|
||||
border: solid 0.0625rem rgb(45,56,132);
|
||||
}
|
||||
|
||||
.c11:focus {
|
||||
.c10:focus {
|
||||
outline: 0;
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
@ -159,26 +159,26 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
|
||||
border-color: rgb(45,56,132);
|
||||
}
|
||||
|
||||
.c11:hover {
|
||||
.c10:hover {
|
||||
background-color: rgb(72,83,217);
|
||||
border-color: rgb(45,56,132);
|
||||
}
|
||||
|
||||
.c11:active,
|
||||
.c11:active:hover,
|
||||
.c11:active:focus {
|
||||
.c10:active,
|
||||
.c10:active:hover,
|
||||
.c10:active:focus {
|
||||
background-image: none;
|
||||
outline: 0;
|
||||
background-color: rgb(45,56,132);
|
||||
border-color: rgb(45,56,132);
|
||||
}
|
||||
|
||||
.c11[disabled] {
|
||||
.c10[disabled] {
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.c7 {
|
||||
.c6 {
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.125rem;
|
||||
font-style: normal;
|
||||
@ -188,7 +188,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.c5 {
|
||||
.c4 {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
border: none;
|
||||
@ -200,7 +200,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
|
||||
-webkit-padding-after: 0;
|
||||
}
|
||||
|
||||
.c9 {
|
||||
.c8 {
|
||||
box-sizing: border-box;
|
||||
width: 18.75rem;
|
||||
height: 3rem;
|
||||
@ -222,89 +222,84 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.c9:focus {
|
||||
.c8:focus {
|
||||
border-color: rgb(59,70,204);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.c9::-webkit-input-placeholder {
|
||||
.c8::-webkit-input-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c9::-moz-placeholder {
|
||||
.c8::-moz-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c9:-ms-input-placeholder {
|
||||
.c8:-ms-input-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c9:invalid {
|
||||
.c8:invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.c9:disabled {
|
||||
.c8:disabled {
|
||||
background-color: rgb(250,250,250);
|
||||
color: rgb(216,216,216);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.c9:disabled::-webkit-input-placeholder {
|
||||
.c8:disabled::-webkit-input-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c9:disabled::-moz-placeholder {
|
||||
.c8:disabled::-moz-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c9:disabled:-ms-input-placeholder {
|
||||
.c8:disabled:-ms-input-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c6 {
|
||||
.c5 {
|
||||
font-weight: 600;
|
||||
white-space: pre;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<form
|
||||
className="c1"
|
||||
onSubmit={undefined}
|
||||
>
|
||||
<div
|
||||
className="c2"
|
||||
className="c1"
|
||||
wrap={true}
|
||||
>
|
||||
<div
|
||||
className="c3"
|
||||
className="c2"
|
||||
>
|
||||
<div
|
||||
className="c4"
|
||||
className="c3"
|
||||
>
|
||||
<div
|
||||
className="c5"
|
||||
className="c4"
|
||||
name="name"
|
||||
role="group"
|
||||
style={undefined}
|
||||
>
|
||||
<label
|
||||
className="c6 c7"
|
||||
className="c5 c6"
|
||||
htmlFor="k"
|
||||
>
|
||||
Attach to new CNS service name
|
||||
</label>
|
||||
<div
|
||||
className="c8"
|
||||
className="c7"
|
||||
>
|
||||
<input
|
||||
className="c9"
|
||||
className="c8"
|
||||
disabled={false}
|
||||
id="k"
|
||||
onBlur={null}
|
||||
@ -315,13 +310,13 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="c3"
|
||||
className="c2"
|
||||
>
|
||||
<div
|
||||
className="c10"
|
||||
className="c9"
|
||||
>
|
||||
<button
|
||||
className="c11 c12 c13 c14"
|
||||
className="c10 c11 c12 c13"
|
||||
data-ui-button="true"
|
||||
disabled={undefined}
|
||||
href=""
|
||||
@ -341,15 +336,15 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
|
||||
margin-bottom: 1.125rem;
|
||||
}
|
||||
|
||||
.c8 {
|
||||
.c7 {
|
||||
margin-top: 0.1875rem;
|
||||
}
|
||||
|
||||
.c10 {
|
||||
.c9 {
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
.c1 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
@ -376,7 +371,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
.c3 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
@ -396,7 +391,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
|
||||
align-content: stretch;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
.c2 {
|
||||
-webkit-order: 0;
|
||||
-ms-flex-order: 0;
|
||||
order: 0;
|
||||
@ -413,7 +408,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
|
||||
display: block;
|
||||
}
|
||||
|
||||
.c14 {
|
||||
.c13 {
|
||||
font-family: sans-serif;
|
||||
font-size: 100%;
|
||||
line-height: 1.15;
|
||||
@ -425,30 +420,30 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
|
||||
appearance: button;
|
||||
}
|
||||
|
||||
.c14::-moz-focus-inner,
|
||||
.c14[type='button']::-moz-focus-inner,
|
||||
.c14[type='reset']::-moz-focus-inner,
|
||||
.c14[type='submit']::-moz-focus-inner {
|
||||
.c13::-moz-focus-inner,
|
||||
.c13[type='button']::-moz-focus-inner,
|
||||
.c13[type='reset']::-moz-focus-inner,
|
||||
.c13[type='submit']::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.c14:-moz-focusring,
|
||||
.c14[type='button']:-moz-focusring,
|
||||
.c14[type='reset']:-moz-focusring,
|
||||
.c14[type='submit']:-moz-focusring {
|
||||
.c13:-moz-focusring,
|
||||
.c13[type='button']:-moz-focusring,
|
||||
.c13[type='reset']:-moz-focusring,
|
||||
.c13[type='submit']:-moz-focusring {
|
||||
outline: 0.0625rem dotted ButtonText;
|
||||
}
|
||||
|
||||
.c13 {
|
||||
.c12 {
|
||||
min-width: 7.5rem;
|
||||
}
|
||||
|
||||
.c12 {
|
||||
.c11 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.c11 {
|
||||
.c10 {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
-webkit-box-pack: center;
|
||||
@ -487,7 +482,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
|
||||
border: solid 0.0625rem rgb(45,56,132);
|
||||
}
|
||||
|
||||
.c11:focus {
|
||||
.c10:focus {
|
||||
outline: 0;
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
@ -495,26 +490,26 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
|
||||
border-color: rgb(45,56,132);
|
||||
}
|
||||
|
||||
.c11:hover {
|
||||
.c10:hover {
|
||||
background-color: rgb(72,83,217);
|
||||
border-color: rgb(45,56,132);
|
||||
}
|
||||
|
||||
.c11:active,
|
||||
.c11:active:hover,
|
||||
.c11:active:focus {
|
||||
.c10:active,
|
||||
.c10:active:hover,
|
||||
.c10:active:focus {
|
||||
background-image: none;
|
||||
outline: 0;
|
||||
background-color: rgb(45,56,132);
|
||||
border-color: rgb(45,56,132);
|
||||
}
|
||||
|
||||
.c11[disabled] {
|
||||
.c10[disabled] {
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.c7 {
|
||||
.c6 {
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.125rem;
|
||||
font-style: normal;
|
||||
@ -524,7 +519,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.c5 {
|
||||
.c4 {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
border: none;
|
||||
@ -536,7 +531,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
|
||||
-webkit-padding-after: 0;
|
||||
}
|
||||
|
||||
.c9 {
|
||||
.c8 {
|
||||
box-sizing: border-box;
|
||||
width: 18.75rem;
|
||||
height: 3rem;
|
||||
@ -558,89 +553,84 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.c9:focus {
|
||||
.c8:focus {
|
||||
border-color: rgb(59,70,204);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.c9::-webkit-input-placeholder {
|
||||
.c8::-webkit-input-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c9::-moz-placeholder {
|
||||
.c8::-moz-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c9:-ms-input-placeholder {
|
||||
.c8:-ms-input-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c9:invalid {
|
||||
.c8:invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.c9:disabled {
|
||||
.c8:disabled {
|
||||
background-color: rgb(250,250,250);
|
||||
color: rgb(216,216,216);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.c9:disabled::-webkit-input-placeholder {
|
||||
.c8:disabled::-webkit-input-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c9:disabled::-moz-placeholder {
|
||||
.c8:disabled::-moz-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c9:disabled:-ms-input-placeholder {
|
||||
.c8:disabled:-ms-input-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c6 {
|
||||
.c5 {
|
||||
font-weight: 600;
|
||||
white-space: pre;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<form
|
||||
className="c1"
|
||||
onSubmit={undefined}
|
||||
>
|
||||
<div
|
||||
className="c2"
|
||||
className="c1"
|
||||
wrap={true}
|
||||
>
|
||||
<div
|
||||
className="c3"
|
||||
className="c2"
|
||||
>
|
||||
<div
|
||||
className="c4"
|
||||
className="c3"
|
||||
>
|
||||
<div
|
||||
className="c5"
|
||||
className="c4"
|
||||
name="name"
|
||||
role="group"
|
||||
style={undefined}
|
||||
>
|
||||
<label
|
||||
className="c6 c7"
|
||||
className="c5 c6"
|
||||
htmlFor="l"
|
||||
>
|
||||
Attach to new CNS service name
|
||||
</label>
|
||||
<div
|
||||
className="c8"
|
||||
className="c7"
|
||||
>
|
||||
<input
|
||||
className="c9"
|
||||
className="c8"
|
||||
disabled={false}
|
||||
id="l"
|
||||
onBlur={null}
|
||||
@ -651,13 +641,13 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="c3"
|
||||
className="c2"
|
||||
>
|
||||
<div
|
||||
className="c10"
|
||||
className="c9"
|
||||
>
|
||||
<button
|
||||
className="c11 c12 c13 c14"
|
||||
className="c10 c11 c12 c13"
|
||||
data-ui-button="true"
|
||||
disabled={undefined}
|
||||
href=""
|
||||
@ -692,7 +682,7 @@ exports[`renders <Header/> without throwing 1`] = `
|
||||
.c2 {
|
||||
margin: 0;
|
||||
color: rgb(73,73,73);
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.625rem;
|
||||
font-size: 1.3125rem;
|
||||
}
|
||||
@ -944,6 +934,7 @@ exports[`renders <Hostname values /> without throwing 1`] = `
|
||||
background-color: rgb(250,250,250);
|
||||
color: rgb(216,216,216);
|
||||
cursor: not-allowed;
|
||||
white-space: pre-wrap;
|
||||
font-family: "Roboto Mono",monospace;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
@ -1116,7 +1107,7 @@ exports[`renders <HostnamesHeader /> without throwing 1`] = `
|
||||
.c2 {
|
||||
margin: 0;
|
||||
color: rgb(73,73,73);
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.625rem;
|
||||
font-size: 1.3125rem;
|
||||
}
|
||||
|
||||
@ -5,7 +5,7 @@ Array [
|
||||
.c0 {
|
||||
margin: 0;
|
||||
color: rgb(73,73,73);
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.625rem;
|
||||
font-size: 1.3125rem;
|
||||
}
|
||||
@ -30,7 +30,7 @@ Array [
|
||||
.c0 {
|
||||
margin: 0;
|
||||
color: rgb(73,73,73);
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.625rem;
|
||||
font-size: 1.3125rem;
|
||||
}
|
||||
@ -351,7 +351,7 @@ Array [
|
||||
.c0 {
|
||||
margin: 0;
|
||||
color: rgb(73,73,73);
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.625rem;
|
||||
font-size: 1.3125rem;
|
||||
}
|
||||
@ -376,7 +376,7 @@ Array [
|
||||
.c0 {
|
||||
margin: 0;
|
||||
color: rgb(73,73,73);
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.625rem;
|
||||
font-size: 1.3125rem;
|
||||
}
|
||||
@ -499,12 +499,12 @@ Array [
|
||||
`;
|
||||
|
||||
exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
|
||||
.c10 {
|
||||
.c9 {
|
||||
margin-right: 0.75rem;
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
|
||||
.c5 {
|
||||
.c4 {
|
||||
font-family: sans-serif;
|
||||
font-size: 100%;
|
||||
line-height: 1.15;
|
||||
@ -512,39 +512,39 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.c5[type='checkbox'],
|
||||
.c5[type='radio'] {
|
||||
.c4[type='checkbox'],
|
||||
.c4[type='radio'] {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.c5[type='number']::-webkit-inner-spin-button,
|
||||
.c5[type='number']::-webkit-outer-spin-button {
|
||||
.c4[type='number']::-webkit-inner-spin-button,
|
||||
.c4[type='number']::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.c5[type='search'] {
|
||||
.c4[type='search'] {
|
||||
-webkit-appearance: textfield;
|
||||
-moz-appearance: textfield;
|
||||
appearance: textfield;
|
||||
outline-offset: -0.125rem;
|
||||
}
|
||||
|
||||
.c5[type='search']::-webkit-search-cancel-button,
|
||||
.c5[type='search']::-webkit-search-decoration {
|
||||
.c4[type='search']::-webkit-search-cancel-button,
|
||||
.c4[type='search']::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.c5::-webkit-file-upload-button {
|
||||
.c4::-webkit-file-upload-button {
|
||||
-webkit-appearance: button;
|
||||
-moz-appearance: button;
|
||||
appearance: button;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.c9 {
|
||||
.c8 {
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.125rem;
|
||||
font-style: normal;
|
||||
@ -554,33 +554,33 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
.c3 {
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.c4:checked + label::after {
|
||||
.c3:checked + label::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.c4:selected + label::after {
|
||||
.c3:selected + label::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.c4:checked + label {
|
||||
.c3:checked + label {
|
||||
border-color: rgb(59,70,204);
|
||||
}
|
||||
|
||||
.c4:selected + label {
|
||||
.c3:selected + label {
|
||||
border-color: rgb(59,70,204);
|
||||
}
|
||||
|
||||
.c4:disabled + label {
|
||||
.c3:disabled + label {
|
||||
background-color: rgb(249,249,249);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.c6 {
|
||||
.c5 {
|
||||
color: rgb(100,100,100);
|
||||
position: absolute;
|
||||
width: 1.125rem;
|
||||
@ -597,7 +597,7 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
|
||||
height: 1.125rem;
|
||||
}
|
||||
|
||||
.c6::after {
|
||||
.c5::after {
|
||||
opacity: 0;
|
||||
content: '';
|
||||
position: absolute;
|
||||
@ -614,7 +614,7 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.c3 {
|
||||
.c2 {
|
||||
display: inline-block;
|
||||
vertical-align: text-bottom;
|
||||
width: 1.125rem;
|
||||
@ -623,12 +623,12 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.c7 label {
|
||||
.c6 label {
|
||||
font-weight: normal;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
.c1 {
|
||||
list-style-type: none;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
@ -652,25 +652,25 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.c2 label {
|
||||
.c1 label {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.c2 label::after {
|
||||
.c1 label::after {
|
||||
width: 0.475rem;
|
||||
height: 0.205rem;
|
||||
top: 0.4125rem;
|
||||
left: 0.35rem;
|
||||
}
|
||||
|
||||
.c2 div[type='checkbox'],
|
||||
.c2 div[type='checkbox'] input,
|
||||
.c2 div[type='checkbox'] label {
|
||||
.c1 div[type='checkbox'],
|
||||
.c1 div[type='checkbox'] input,
|
||||
.c1 div[type='checkbox'] label {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
.c0 {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
border: none;
|
||||
@ -682,23 +682,18 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
|
||||
-webkit-padding-after: 0;
|
||||
}
|
||||
|
||||
.c8 {
|
||||
.c7 {
|
||||
font-weight: 600;
|
||||
white-space: pre;
|
||||
font-size: 0.8125rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
<form
|
||||
className="c0"
|
||||
onChange={undefined}
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
className="c0"
|
||||
id="fw-toggle-firewall"
|
||||
name="enabled"
|
||||
role="group"
|
||||
@ -706,11 +701,11 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
|
||||
type="checkbox"
|
||||
>
|
||||
<li
|
||||
className="c2"
|
||||
className="c1"
|
||||
>
|
||||
<div
|
||||
checked={false}
|
||||
className="c3"
|
||||
className="c2"
|
||||
disabled={false}
|
||||
id="fw-toggle-firewall"
|
||||
onBlur={undefined}
|
||||
@ -718,30 +713,30 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
|
||||
>
|
||||
<input
|
||||
checked={false}
|
||||
className="c4 c5"
|
||||
className="c3 c4"
|
||||
disabled={false}
|
||||
id="l"
|
||||
onBlur={undefined}
|
||||
type="checkbox"
|
||||
/>
|
||||
<label
|
||||
className="c6"
|
||||
className="c5"
|
||||
htmlFor="l"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
checked={false}
|
||||
className="c7"
|
||||
className="c6"
|
||||
disabled={false}
|
||||
id="fw-toggle-firewall"
|
||||
onBlur={undefined}
|
||||
>
|
||||
<label
|
||||
className="c8 c9"
|
||||
className="c7 c8"
|
||||
htmlFor="l"
|
||||
>
|
||||
<div
|
||||
className="c10"
|
||||
className="c9"
|
||||
>
|
||||
Enable Firewall
|
||||
</div>
|
||||
@ -753,12 +748,12 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
|
||||
`;
|
||||
|
||||
exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
|
||||
.c10 {
|
||||
.c9 {
|
||||
margin-right: 0.75rem;
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
|
||||
.c5 {
|
||||
.c4 {
|
||||
font-family: sans-serif;
|
||||
font-size: 100%;
|
||||
line-height: 1.15;
|
||||
@ -766,39 +761,39 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.c5[type='checkbox'],
|
||||
.c5[type='radio'] {
|
||||
.c4[type='checkbox'],
|
||||
.c4[type='radio'] {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.c5[type='number']::-webkit-inner-spin-button,
|
||||
.c5[type='number']::-webkit-outer-spin-button {
|
||||
.c4[type='number']::-webkit-inner-spin-button,
|
||||
.c4[type='number']::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.c5[type='search'] {
|
||||
.c4[type='search'] {
|
||||
-webkit-appearance: textfield;
|
||||
-moz-appearance: textfield;
|
||||
appearance: textfield;
|
||||
outline-offset: -0.125rem;
|
||||
}
|
||||
|
||||
.c5[type='search']::-webkit-search-cancel-button,
|
||||
.c5[type='search']::-webkit-search-decoration {
|
||||
.c4[type='search']::-webkit-search-cancel-button,
|
||||
.c4[type='search']::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.c5::-webkit-file-upload-button {
|
||||
.c4::-webkit-file-upload-button {
|
||||
-webkit-appearance: button;
|
||||
-moz-appearance: button;
|
||||
appearance: button;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.c9 {
|
||||
.c8 {
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.125rem;
|
||||
font-style: normal;
|
||||
@ -808,33 +803,33 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
.c3 {
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.c4:checked + label::after {
|
||||
.c3:checked + label::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.c4:selected + label::after {
|
||||
.c3:selected + label::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.c4:checked + label {
|
||||
.c3:checked + label {
|
||||
border-color: rgb(59,70,204);
|
||||
}
|
||||
|
||||
.c4:selected + label {
|
||||
.c3:selected + label {
|
||||
border-color: rgb(59,70,204);
|
||||
}
|
||||
|
||||
.c4:disabled + label {
|
||||
.c3:disabled + label {
|
||||
background-color: rgb(249,249,249);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.c6 {
|
||||
.c5 {
|
||||
color: rgb(100,100,100);
|
||||
position: absolute;
|
||||
width: 1.125rem;
|
||||
@ -851,7 +846,7 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
|
||||
height: 1.125rem;
|
||||
}
|
||||
|
||||
.c6::after {
|
||||
.c5::after {
|
||||
opacity: 0;
|
||||
content: '';
|
||||
position: absolute;
|
||||
@ -868,7 +863,7 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.c3 {
|
||||
.c2 {
|
||||
display: inline-block;
|
||||
vertical-align: text-bottom;
|
||||
width: 1.125rem;
|
||||
@ -877,12 +872,12 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.c7 label {
|
||||
.c6 label {
|
||||
font-weight: normal;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
.c1 {
|
||||
list-style-type: none;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
@ -906,25 +901,25 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.c2 label {
|
||||
.c1 label {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.c2 label::after {
|
||||
.c1 label::after {
|
||||
width: 0.475rem;
|
||||
height: 0.205rem;
|
||||
top: 0.4125rem;
|
||||
left: 0.35rem;
|
||||
}
|
||||
|
||||
.c2 div[type='checkbox'],
|
||||
.c2 div[type='checkbox'] input,
|
||||
.c2 div[type='checkbox'] label {
|
||||
.c1 div[type='checkbox'],
|
||||
.c1 div[type='checkbox'] input,
|
||||
.c1 div[type='checkbox'] label {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
.c0 {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
border: none;
|
||||
@ -936,23 +931,18 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
|
||||
-webkit-padding-after: 0;
|
||||
}
|
||||
|
||||
.c8 {
|
||||
.c7 {
|
||||
font-weight: 600;
|
||||
white-space: pre;
|
||||
font-size: 0.8125rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
<form
|
||||
className="c0"
|
||||
onChange={undefined}
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
className="c0"
|
||||
id="fw-toggle-firewall"
|
||||
name="enabled"
|
||||
role="group"
|
||||
@ -960,11 +950,11 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
|
||||
type="checkbox"
|
||||
>
|
||||
<li
|
||||
className="c2"
|
||||
className="c1"
|
||||
>
|
||||
<div
|
||||
checked={false}
|
||||
className="c3"
|
||||
className="c2"
|
||||
disabled={true}
|
||||
id="fw-toggle-firewall"
|
||||
onBlur={undefined}
|
||||
@ -972,30 +962,30 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
|
||||
>
|
||||
<input
|
||||
checked={false}
|
||||
className="c4 c5"
|
||||
className="c3 c4"
|
||||
disabled={true}
|
||||
id="n"
|
||||
onBlur={undefined}
|
||||
type="checkbox"
|
||||
/>
|
||||
<label
|
||||
className="c6"
|
||||
className="c5"
|
||||
htmlFor="n"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
checked={false}
|
||||
className="c7"
|
||||
className="c6"
|
||||
disabled={true}
|
||||
id="fw-toggle-firewall"
|
||||
onBlur={undefined}
|
||||
>
|
||||
<label
|
||||
className="c8 c9"
|
||||
className="c7 c8"
|
||||
htmlFor="n"
|
||||
>
|
||||
<div
|
||||
className="c10"
|
||||
className="c9"
|
||||
>
|
||||
Enable Firewall
|
||||
</div>
|
||||
@ -1007,12 +997,12 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
|
||||
`;
|
||||
|
||||
exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
|
||||
.c10 {
|
||||
.c9 {
|
||||
margin-right: 0.75rem;
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
|
||||
.c5 {
|
||||
.c4 {
|
||||
font-family: sans-serif;
|
||||
font-size: 100%;
|
||||
line-height: 1.15;
|
||||
@ -1020,39 +1010,39 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.c5[type='checkbox'],
|
||||
.c5[type='radio'] {
|
||||
.c4[type='checkbox'],
|
||||
.c4[type='radio'] {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.c5[type='number']::-webkit-inner-spin-button,
|
||||
.c5[type='number']::-webkit-outer-spin-button {
|
||||
.c4[type='number']::-webkit-inner-spin-button,
|
||||
.c4[type='number']::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.c5[type='search'] {
|
||||
.c4[type='search'] {
|
||||
-webkit-appearance: textfield;
|
||||
-moz-appearance: textfield;
|
||||
appearance: textfield;
|
||||
outline-offset: -0.125rem;
|
||||
}
|
||||
|
||||
.c5[type='search']::-webkit-search-cancel-button,
|
||||
.c5[type='search']::-webkit-search-decoration {
|
||||
.c4[type='search']::-webkit-search-cancel-button,
|
||||
.c4[type='search']::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.c5::-webkit-file-upload-button {
|
||||
.c4::-webkit-file-upload-button {
|
||||
-webkit-appearance: button;
|
||||
-moz-appearance: button;
|
||||
appearance: button;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.c9 {
|
||||
.c8 {
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.125rem;
|
||||
font-style: normal;
|
||||
@ -1062,33 +1052,33 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
.c3 {
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.c4:checked + label::after {
|
||||
.c3:checked + label::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.c4:selected + label::after {
|
||||
.c3:selected + label::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.c4:checked + label {
|
||||
.c3:checked + label {
|
||||
border-color: rgb(59,70,204);
|
||||
}
|
||||
|
||||
.c4:selected + label {
|
||||
.c3:selected + label {
|
||||
border-color: rgb(59,70,204);
|
||||
}
|
||||
|
||||
.c4:disabled + label {
|
||||
.c3:disabled + label {
|
||||
background-color: rgb(249,249,249);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.c6 {
|
||||
.c5 {
|
||||
color: rgb(100,100,100);
|
||||
position: absolute;
|
||||
width: 1.125rem;
|
||||
@ -1105,7 +1095,7 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
|
||||
height: 1.125rem;
|
||||
}
|
||||
|
||||
.c6::after {
|
||||
.c5::after {
|
||||
opacity: 0;
|
||||
content: '';
|
||||
position: absolute;
|
||||
@ -1122,7 +1112,7 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.c3 {
|
||||
.c2 {
|
||||
display: inline-block;
|
||||
vertical-align: text-bottom;
|
||||
width: 1.125rem;
|
||||
@ -1131,12 +1121,12 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.c7 label {
|
||||
.c6 label {
|
||||
font-weight: normal;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
.c1 {
|
||||
list-style-type: none;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
@ -1160,25 +1150,25 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.c2 label {
|
||||
.c1 label {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.c2 label::after {
|
||||
.c1 label::after {
|
||||
width: 0.475rem;
|
||||
height: 0.205rem;
|
||||
top: 0.4125rem;
|
||||
left: 0.35rem;
|
||||
}
|
||||
|
||||
.c2 div[type='checkbox'],
|
||||
.c2 div[type='checkbox'] input,
|
||||
.c2 div[type='checkbox'] label {
|
||||
.c1 div[type='checkbox'],
|
||||
.c1 div[type='checkbox'] input,
|
||||
.c1 div[type='checkbox'] label {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
.c0 {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
border: none;
|
||||
@ -1190,22 +1180,16 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
|
||||
-webkit-padding-after: 0;
|
||||
}
|
||||
|
||||
.c8 {
|
||||
.c7 {
|
||||
font-weight: 600;
|
||||
white-space: pre;
|
||||
font-size: 0.8125rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
<form
|
||||
className="c0"
|
||||
>
|
||||
<form>
|
||||
<div
|
||||
className="c1"
|
||||
className="c0"
|
||||
id="fw-toggle-inactive"
|
||||
name="inactive"
|
||||
role="group"
|
||||
@ -1213,11 +1197,11 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
|
||||
type="checkbox"
|
||||
>
|
||||
<li
|
||||
className="c2"
|
||||
className="c1"
|
||||
>
|
||||
<div
|
||||
checked={false}
|
||||
className="c3"
|
||||
className="c2"
|
||||
disabled={false}
|
||||
id="fw-toggle-inactive"
|
||||
onBlur={undefined}
|
||||
@ -1225,30 +1209,30 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
|
||||
>
|
||||
<input
|
||||
checked={false}
|
||||
className="c4 c5"
|
||||
className="c3 c4"
|
||||
disabled={false}
|
||||
id="p"
|
||||
onBlur={undefined}
|
||||
type="checkbox"
|
||||
/>
|
||||
<label
|
||||
className="c6"
|
||||
className="c5"
|
||||
htmlFor="p"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
checked={false}
|
||||
className="c7"
|
||||
className="c6"
|
||||
disabled={false}
|
||||
id="fw-toggle-inactive"
|
||||
onBlur={undefined}
|
||||
>
|
||||
<label
|
||||
className="c8 c9"
|
||||
className="c7 c8"
|
||||
htmlFor="p"
|
||||
>
|
||||
<div
|
||||
className="c10"
|
||||
className="c9"
|
||||
>
|
||||
Show inactive rules
|
||||
</div>
|
||||
|
||||
@ -4362,6 +4362,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
outline: 0;
|
||||
white-space: pre-wrap;
|
||||
font-family: "Roboto Mono",monospace;
|
||||
max-width: 22.1875rem;
|
||||
width: 22.1875rem;
|
||||
|
||||
@ -50,10 +50,6 @@ const ShortDivider = styled(Divider)`
|
||||
margin-right: 0;
|
||||
`;
|
||||
|
||||
const Form = styled.form`
|
||||
margin-bottom: 0;
|
||||
`;
|
||||
|
||||
export const Header = () => (
|
||||
<Margin bottom="5">
|
||||
<H3>CNS Default Hostnames</H3>
|
||||
@ -104,7 +100,7 @@ export const AddServiceForm = ({
|
||||
invalid
|
||||
}) => (
|
||||
<Margin bottom="3">
|
||||
<Form onSubmit={handleSubmit}>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Flex wrap alignCenter={invalid} alignEnd={!invalid}>
|
||||
<FlexItem>
|
||||
<Flex collumn>
|
||||
@ -135,7 +131,7 @@ export const AddServiceForm = ({
|
||||
</Margin>
|
||||
</FlexItem>
|
||||
</Flex>
|
||||
</Form>
|
||||
</form>
|
||||
</Margin>
|
||||
);
|
||||
|
||||
|
||||
@ -3,13 +3,11 @@ import { Field } from 'redux-form';
|
||||
import { Margin, Padding } from 'styled-components-spacing';
|
||||
import Flex, { FlexItem } from 'styled-flex-component';
|
||||
import { Row, Col } from 'joyent-react-styled-flexboxgrid';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import {
|
||||
H3,
|
||||
FormGroup,
|
||||
FormLabel,
|
||||
Toggle,
|
||||
TagList,
|
||||
TagItem,
|
||||
P,
|
||||
@ -21,10 +19,6 @@ import {
|
||||
|
||||
const { SmallOnly, MediumDown, Medium, Large } = QueryBreakpoints;
|
||||
|
||||
const Form = styled.form`
|
||||
margin-bottom: 0 !important;
|
||||
`;
|
||||
|
||||
const capitalizeFirstLetter = string =>
|
||||
string.charAt(0).toUpperCase() + string.slice(1);
|
||||
|
||||
@ -250,7 +244,7 @@ export const ToggleFirewallForm = ({
|
||||
: undefined;
|
||||
|
||||
return (
|
||||
<Form onChange={onChange}>
|
||||
<form onChange={onChange}>
|
||||
<FormGroup
|
||||
id="fw-toggle-firewall"
|
||||
type="checkbox"
|
||||
@ -265,12 +259,12 @@ export const ToggleFirewallForm = ({
|
||||
</FormLabel>
|
||||
</Checkbox>
|
||||
</FormGroup>
|
||||
</Form>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export const ToggleInactiveForm = () => (
|
||||
<Form>
|
||||
<form>
|
||||
<FormGroup
|
||||
id="fw-toggle-inactive"
|
||||
type="checkbox"
|
||||
@ -285,5 +279,5 @@ export const ToggleInactiveForm = () => (
|
||||
</FormLabel>
|
||||
</Checkbox>
|
||||
</FormGroup>
|
||||
</Form>
|
||||
</form>
|
||||
);
|
||||
|
||||
@ -2931,8 +2931,8 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
|
||||
.c23 {
|
||||
box-sizing: border-box;
|
||||
width: 18.75rem;
|
||||
height: 6rem;
|
||||
min-height: 6rem;
|
||||
height: 12rem;
|
||||
min-height: 12rem;
|
||||
padding: 0.8125rem 0.75rem;
|
||||
border-radius: 0.25rem;
|
||||
background-color: rgb(255,255,255);
|
||||
@ -2946,6 +2946,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
outline: 0;
|
||||
white-space: pre-wrap;
|
||||
font-family: "Roboto Mono",monospace;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
|
||||
@ -14,11 +14,9 @@ exports[`Anchor Default Anchor 1`] = `
|
||||
.c0 {
|
||||
color: rgb(59,70,204);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
}
|
||||
|
||||
.c0:hover {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
-webkit-text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
<a
|
||||
@ -43,21 +41,14 @@ exports[`Anchor Disabled Anchor 1`] = `
|
||||
.c0 {
|
||||
color: rgb(59,70,204);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
cursor: pointer;
|
||||
-webkit-text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
color: rgb(216,216,216);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.c0:hover {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.c0:hover {
|
||||
-webkit-text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
<a
|
||||
className="c0 c1 c2"
|
||||
disabled={true}
|
||||
@ -81,15 +72,13 @@ exports[`Anchor Reversed Anchor 1`] = `
|
||||
.c0 {
|
||||
color: rgb(59,70,204);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
cursor: pointer;
|
||||
-webkit-text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
color: rgb(255,255,255);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
}
|
||||
|
||||
.c0:hover {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
<a
|
||||
className="c0 c1 c2"
|
||||
href="https://joyent.com"
|
||||
|
||||
@ -13,12 +13,10 @@ const BaseLink = styled(({ component, children, ...rest }) =>
|
||||
)`
|
||||
color: ${props => props.theme.primary};
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
${isOr('secondary', 'reversed')`
|
||||
${isOr('secondary', 'reversed', 'white')`
|
||||
color: ${props => props.theme.white};
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
`};
|
||||
@ -32,10 +30,6 @@ const BaseLink = styled(({ component, children, ...rest }) =>
|
||||
color: ${props => props.theme.grey};
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
pointer-events: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
`};
|
||||
`;
|
||||
|
||||
|
||||
@ -44,6 +44,10 @@ export default ({ theme }) => css`
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
form {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.CodeMirror {
|
||||
border: solid ${remcalc(1)} ${theme.grey};
|
||||
margin: ${remcalc(8)} 0 ${remcalc(8)} 0;
|
||||
|
||||
@ -14,11 +14,9 @@ exports[`Button Default Button 1`] = `
|
||||
.c2 {
|
||||
color: rgb(59,70,204);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
}
|
||||
|
||||
.c2:hover {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
-webkit-text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
@ -114,21 +112,14 @@ exports[`Button Disabled Button 1`] = `
|
||||
.c2 {
|
||||
color: rgb(59,70,204);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
cursor: pointer;
|
||||
-webkit-text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
color: rgb(216,216,216);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.c2:hover {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.c2:hover {
|
||||
-webkit-text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
display: inline-block;
|
||||
}
|
||||
@ -245,11 +236,9 @@ exports[`Button Error Button 1`] = `
|
||||
.c2 {
|
||||
color: rgb(59,70,204);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
}
|
||||
|
||||
.c2:hover {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
-webkit-text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
@ -368,21 +357,14 @@ exports[`Button Loading Button 1`] = `
|
||||
.c2 {
|
||||
color: rgb(59,70,204);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
cursor: pointer;
|
||||
-webkit-text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
color: rgb(216,216,216);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.c2:hover {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.c2:hover {
|
||||
-webkit-text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
display: inline-block;
|
||||
}
|
||||
@ -499,15 +481,13 @@ exports[`Button Secondary Button 1`] = `
|
||||
.c2 {
|
||||
color: rgb(59,70,204);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
cursor: pointer;
|
||||
-webkit-text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
color: rgb(255,255,255);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
}
|
||||
|
||||
.c2:hover {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
export { default } from './card';
|
||||
export { default as Outlet } from './outlet';
|
||||
|
||||
export {
|
||||
default as Header,
|
||||
Meta as HeaderMeta,
|
||||
|
||||
@ -10,7 +10,10 @@ const Container = styled(ViewContainer)`
|
||||
flex-wrap: nowrap;
|
||||
align-content: stretch;
|
||||
align-items: stretch;
|
||||
background: ${props => props.theme.background};
|
||||
background: ${props =>
|
||||
props.fill
|
||||
? props.theme[props.fill] ? props.theme[props.fill] : props.fill
|
||||
: props.theme.background};
|
||||
`;
|
||||
|
||||
const Footer = styled.div`
|
||||
@ -20,15 +23,22 @@ const Footer = styled.div`
|
||||
align-content: stretch;
|
||||
align-items: stretch;
|
||||
background-color: ${props =>
|
||||
props.fill ? props.theme[props.fill] : 'rgba(241, 241, 241, 1)'};
|
||||
props.fill
|
||||
? props.theme[props.fill] ? props.theme[props.fill] : props.fill
|
||||
: 'rgba(241, 241, 241, 1)'};
|
||||
border-top: ${remcalc(1)} solid ${props => props.theme.grey};
|
||||
max-height: ${remcalc(53)};
|
||||
min-height: ${remcalc(53)};
|
||||
line-height: ${remcalc(25)};
|
||||
height: ${remcalc(70)};
|
||||
max-height: ${remcalc(70)};
|
||||
z-index: 1;
|
||||
|
||||
${is('auto')`
|
||||
height: auto;
|
||||
`};
|
||||
|
||||
${is('borderless')`
|
||||
border: none;
|
||||
`};
|
||||
|
||||
${is('fixed')`
|
||||
position: fixed;
|
||||
left: 0;
|
||||
@ -38,10 +48,16 @@ const Footer = styled.div`
|
||||
${is('bottom', 'fixed')`
|
||||
bottom: 0;
|
||||
`};
|
||||
|
||||
${is('top', 'fixed')`
|
||||
top: 0;
|
||||
`};
|
||||
`;
|
||||
|
||||
export default ({ children, fluid, ...rest }) => (
|
||||
export default ({ children, fluid, innerFill, ...rest }) => (
|
||||
<Footer {...rest}>
|
||||
<Container fluid={fluid}>{children}</Container>
|
||||
<Container fill={innerFill || rest.fill} fluid={fluid}>
|
||||
{children}
|
||||
</Container>
|
||||
</Footer>
|
||||
);
|
||||
|
||||
@ -726,8 +726,8 @@ exports[`Form Textarea 1`] = `
|
||||
.c1 {
|
||||
box-sizing: border-box;
|
||||
width: 18.75rem;
|
||||
height: 6rem;
|
||||
min-height: 6rem;
|
||||
height: 12rem;
|
||||
min-height: 12rem;
|
||||
padding: 0.8125rem 0.75rem;
|
||||
border-radius: 0.25rem;
|
||||
background-color: rgb(255,255,255);
|
||||
|
||||
@ -17,7 +17,7 @@ const color = props =>
|
||||
props.defaultValue ? colorWithDefaultValue(props) : colorWithDisabled(props);
|
||||
|
||||
const height = props =>
|
||||
props.multiple ? 'auto' : props.textarea ? remcalc(96) : remcalc(48);
|
||||
props.multiple ? 'auto' : props.textarea ? remcalc(192) : remcalc(48);
|
||||
|
||||
const paddingTop = props => (props.multiple ? remcalc(20) : remcalc(13));
|
||||
|
||||
@ -106,6 +106,7 @@ const style = css`
|
||||
`};
|
||||
|
||||
${is('monospace')`
|
||||
white-space: pre-wrap;
|
||||
font-family: ${props => props.theme.monoFont.families};
|
||||
|
||||
&:disabled {
|
||||
@ -164,6 +165,10 @@ const style = css`
|
||||
width: ${remcalc(120)};
|
||||
`};
|
||||
|
||||
${is('borderless')`
|
||||
border: none;
|
||||
`};
|
||||
|
||||
${is('success')`
|
||||
border-color: ${props => props.theme.greenDark}
|
||||
`};
|
||||
@ -199,6 +204,14 @@ const style = css`
|
||||
text-align: center;
|
||||
border-radius: 0;
|
||||
`};
|
||||
|
||||
${is('white')`
|
||||
color: ${props => props.theme.white};
|
||||
`};
|
||||
|
||||
${is('dark')`
|
||||
background: ${props => props.theme.greyDarker};
|
||||
`};
|
||||
`;
|
||||
|
||||
const BaseInput = Component => ({ resize, onBlur, type, ...props }) => {
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import remcalc from 'remcalc';
|
||||
import is from 'styled-is';
|
||||
|
||||
const UnorderedList = styled.ul`
|
||||
background: ${props => props.theme.disabled};
|
||||
@ -24,6 +25,10 @@ const UnorderedList = styled.ul`
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
${is('clear')`
|
||||
background: none !important;
|
||||
`};
|
||||
`;
|
||||
|
||||
/**
|
||||
|
||||
@ -1,20 +1,9 @@
|
||||
import styled, { css } from 'styled-components';
|
||||
import styled from 'styled-components';
|
||||
import remcalc from 'remcalc';
|
||||
import is from 'styled-is';
|
||||
import is, { isNot } from 'styled-is';
|
||||
|
||||
import BaseAnchor from '../anchor';
|
||||
|
||||
const border = css`
|
||||
width: 100%;
|
||||
height: ${remcalc(1)};
|
||||
background: ${props => props.theme.text};
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
`;
|
||||
|
||||
export default styled.li`
|
||||
font-size: ${remcalc(15)};
|
||||
line-height: 1.6;
|
||||
@ -23,25 +12,53 @@ export default styled.li`
|
||||
|
||||
export const Anchor = styled(BaseAnchor)`
|
||||
color: ${props => props.theme.text};
|
||||
font-weight: ${props => props.theme.font.weight.text};
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
padding: 0 ${remcalc(12)};
|
||||
padding-bottom: ${remcalc(15)};
|
||||
position: relative;
|
||||
|
||||
&.active {
|
||||
font-weight: ${props => props.theme.font.weight.text};
|
||||
&:after {
|
||||
width: 100%;
|
||||
height: ${remcalc(1)};
|
||||
background: ${props => props.theme.grey};
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&.active {
|
||||
&:after {
|
||||
${border};
|
||||
background: ${props => props.theme.font.regular};
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
font-weight: ${props => props.theme.font.weight.semibold};
|
||||
}
|
||||
|
||||
${is('active')`
|
||||
font-weight: ${props => props.theme.font.weight.text};
|
||||
font-weight: ${props => props.theme.font.weight.semibold}
|
||||
`};
|
||||
|
||||
${is('white')`
|
||||
color: ${props => props.theme.white};
|
||||
|
||||
${isNot('active')`
|
||||
color: ${props => props.theme.greyDark};
|
||||
`};
|
||||
|
||||
&:after {
|
||||
${border}
|
||||
background: ${props => props.theme.greyDarker};
|
||||
};
|
||||
`};
|
||||
|
||||
${is('white', 'active')`
|
||||
&:after {
|
||||
background: ${props => props.theme.white};
|
||||
}
|
||||
`};
|
||||
`;
|
||||
|
||||
@ -14,7 +14,7 @@ exports[`Button H1 1`] = `
|
||||
line-height: 2.8125rem;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@ -29,7 +29,7 @@ exports[`Button H2 1`] = `
|
||||
.c0 {
|
||||
margin: 0;
|
||||
color: rgb(73,73,73);
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.875rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
@ -45,7 +45,7 @@ exports[`Button H3 1`] = `
|
||||
.c0 {
|
||||
margin: 0;
|
||||
color: rgb(73,73,73);
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.625rem;
|
||||
font-size: 1.3125rem;
|
||||
}
|
||||
|
||||
@ -12,7 +12,7 @@ export const H1 = styled(NH1)`
|
||||
line-height: ${remcalc(45)};
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
font-weight: normal;
|
||||
font-weight: ${props => props.theme.font.weight.normal};
|
||||
margin: 0;
|
||||
|
||||
${is('inline')`
|
||||
@ -36,7 +36,7 @@ export const H1 = styled(NH1)`
|
||||
export const H2 = styled.h2`
|
||||
margin: 0;
|
||||
color: ${props => props.theme.text};
|
||||
font-weight: normal;
|
||||
font-weight: ${props => props.theme.font.weight.normal};
|
||||
line-height: ${remcalc(30)};
|
||||
font-size: ${remcalc(24)};
|
||||
|
||||
@ -61,7 +61,7 @@ export const H2 = styled.h2`
|
||||
export const H3 = styled.h3`
|
||||
margin: 0;
|
||||
color: ${props => props.theme.text};
|
||||
font-weight: normal;
|
||||
font-weight: ${props => props.theme.font.weight.normal};
|
||||
line-height: ${remcalc(26)};
|
||||
font-size: ${remcalc(21)};
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user