fix(my-joy-beta): create instance - networks ui fixes

fixes #1011
2018-01-16 17:45:19 +00:00 · 2018-01-16 17:45:19 +00:00 · 39d038fa73
commit 39d038fa73
parent 35c50de56b
24 changed files with 199 additions and 115 deletions
--- a/packages/icons/src/tests/snapshots/icons.spec.js.snap
+++ b/packages/icons/src/tests/snapshots/icons.spec.js.snap
@ -2250,7 +2250,7 @@ exports[`renders <Dot /> without throwing 1`] = `
 .c0 {
  width: 0.375rem;
  height: 0.375rem;
-  border-radius: 0.1875rem;
+  border-radius: 50%;
  display: inline-block;
 }

--- a/packages/icons/src/dot.js
+++ b/packages/icons/src/dot.js
@ -4,7 +4,7 @@ import styled from 'styled-components';
 export default styled.span`
  width: ${remcalc(6)};
  height: ${remcalc(6)};
-  border-radius: ${remcalc(3)};
+  border-radius: 50%;
  background-color: ${props => props.theme[props.color]};
  display: inline-block;
 `;
--- a/packages/my-joy-beta/src/components/create-instance/tests/snapshots/affinity.spec.js.snap
+++ b/packages/my-joy-beta/src/components/create-instance/tests/snapshots/affinity.spec.js.snap
@ -123,7 +123,7 @@ exports[`renders <Rule/> without throwing 1`] = `
  -moz-appearance: none;
  appearance: none;
  min-height: 0;
-  max-width: 18.75rem;
+  max-width: 22.1875rem;
  text-overflow: ellipsis;
  font-size: 0.9375rem;
  line-height: normal !important;
@ -262,7 +262,7 @@ exports[`renders <Rule/> without throwing 1`] = `
  -moz-appearance: none;
  appearance: none;
  min-height: 0;
-  max-width: 18.75rem;
+  max-width: 22.1875rem;
  text-overflow: ellipsis;
  font-size: 0.9375rem;
  line-height: normal !important;
@ -589,7 +589,7 @@ exports[`renders <Rule/> without throwing 2`] = `
  -moz-appearance: none;
  appearance: none;
  min-height: 0;
-  max-width: 18.75rem;
+  max-width: 22.1875rem;
  text-overflow: ellipsis;
  font-size: 0.9375rem;
  line-height: normal !important;
@ -728,7 +728,7 @@ exports[`renders <Rule/> without throwing 2`] = `
  -moz-appearance: none;
  appearance: none;
  min-height: 0;
-  max-width: 18.75rem;
+  max-width: 22.1875rem;
  text-overflow: ellipsis;
  font-size: 0.9375rem;
  line-height: normal !important;
--- a/packages/my-joy-beta/src/components/create-instance/tests/snapshots/cns.spec.js.snap
+++ b/packages/my-joy-beta/src/components/create-instance/tests/snapshots/cns.spec.js.snap
@ -158,7 +158,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
-  max-width: 18.75rem;
+  max-width: 22.1875rem;
  text-overflow: ellipsis;
  font-size: 0.9375rem;
  line-height: normal !important;
@ -442,7 +442,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
-  max-width: 18.75rem;
+  max-width: 22.1875rem;
  text-overflow: ellipsis;
  font-size: 0.9375rem;
  line-height: normal !important;
--- a/packages/my-joy-beta/src/components/create-instance/tests/snapshots/name.spec.js.snap
+++ b/packages/my-joy-beta/src/components/create-instance/tests/snapshots/name.spec.js.snap
@ -194,7 +194,7 @@ exports[`renders <Name expanded /> without throwing 1`] = `
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
-  max-width: 18.75rem;
+  max-width: 22.1875rem;
  text-overflow: ellipsis;
  font-size: 0.9375rem;
  line-height: normal !important;
--- a/packages/my-joy-beta/src/components/create-instance/tests/snapshots/network.spec.js.snap
+++ b/packages/my-joy-beta/src/components/create-instance/tests/snapshots/network.spec.js.snap
@ -3961,7 +3961,7 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
                      <p
                        className="c16"
                      >
-                        Fabric
+                        Fabric network
                      </p>
                    </div>
                  </div>
@ -4352,7 +4352,7 @@ exports[`renders <Network {...network} fabric /> without throwing 2`] = `
                        <p
                          className="c7"
                        >
-                          Fabric
+                          Fabric network
                        </p>
                      </div>
                    </div>
@ -4942,7 +4942,9 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
-  max-width: 18.75rem;
+  width: 22.1875rem;
+  font-family: "Roboto Mono";
+  max-width: 22.1875rem;
  font-size: 0.9375rem;
  line-height: normal !important;
  font-style: normal;
@ -4986,6 +4988,22 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
  color: rgba(73,73,73,0.5);
 }

+.c28:disabled {
+  color: rgba(73,73,73,1);
+}
+
+.c28:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c28:disabled::-moz-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c28:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,1);
+}
+
 .c28:focus {
  border-color: rgb(59,70,204);
  outline: 0;
@ -5198,7 +5216,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
                      <p
                        className="c16"
                      >
-                        Fabric
+                        Fabric network
                      </p>
                    </div>
                  </div>
@ -5671,7 +5689,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 2`] = `
                        <p
                          className="c7"
                        >
-                          Fabric
+                          Fabric network
                        </p>
                      </div>
                    </div>
--- a/packages/my-joy-beta/src/components/create-instance/network.js
+++ b/packages/my-joy-beta/src/components/create-instance/network.js
@ -11,6 +11,8 @@ import { Row, Col } from 'react-styled-flexboxgrid';
 import {
  H4,
  P,
+  Small,
+  DotIcon,
  Card,
  CardHeader,
  CardHeaderMeta,
@ -76,7 +78,9 @@ export const Collapsed = ({ name, fabric, ...network }) => (
                          </Margin>
                        </FlexItem>
                        <FlexItem>
-                          <P>{fabric ? 'Fabric' : 'Data center network'}</P>
+                          <P>
+                            {fabric ? 'Fabric network' : 'Data center network'}
+                          </P>
                        </FlexItem>
                      </Flex>
                    </FlexItem>
@ -149,7 +153,9 @@ export const Expanded = ({
                        </Margin>
                      </FlexItem>
                      <FlexItem>
-                        <P>{fabric ? 'Fabric' : 'Data center network'}</P>
+                        <P>
+                          {fabric ? 'Fabric network' : 'Data center network'}
+                        </P>
                      </FlexItem>
                    </Flex>
                  </FlexItem>
@ -176,22 +182,47 @@ export const Expanded = ({
                      <CardOutlet>
                        <Padding all={3}>
                          <Flex column>
+                            {network.internet_nat ? (
+                              <FlexItem>
+                                <Margin bottom={3}>
+                                  <Flex alignCenter>
+                                    <Margin right={1}>
+                                      <DotIcon
+                                        width={remcalc(12)}
+                                        height={remcalc(12)}
+                                        color="green"
+                                      />
+                                    </Margin>
+                                    <Small bold noMargin>
+                                      Outbound internet access enabled
+                                    </Small>
+                                  </Flex>
+                                </Margin>
+                              </FlexItem>
+                            ) : null}
                            <FlexItem>
                              <FormGroup name="id">
                                <FormLabel>ID</FormLabel>
-                                <Input type="text" value={id} />
+                                <Input big monospace type="text" value={id} />
                              </FormGroup>
                            </FlexItem>
                            <FlexItem>
                              <FormGroup name="subnet">
                                <FormLabel>Subnet</FormLabel>
-                                <Input type="text" value={subnet} />
+                                <Input
+                                  big
+                                  monospace
+                                  type="text"
+                                  value={subnet}
+                                />
                              </FormGroup>
                            </FlexItem>
                            <FlexItem>
                              <FormGroup name="ip-range">
                                <FormLabel>IP range</FormLabel>
                                <Input
+                                  big
+                                  monospace
                                  type="text"
                                  value={`${provision_start_ip} - ${provision_end_ip}`}
                                />
--- a/packages/my-joy-beta/src/components/instances/tests/snapshots/key-value.spec.js.snap
+++ b/packages/my-joy-beta/src/components/instances/tests/snapshots/key-value.spec.js.snap
@ -665,7 +665,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
-  max-width: 18.75rem;
+  max-width: 22.1875rem;
  text-overflow: ellipsis;
  font-size: 0.9375rem;
  line-height: normal !important;
@ -1816,7 +1816,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
-  max-width: 18.75rem;
+  max-width: 22.1875rem;
  text-overflow: ellipsis;
  font-size: 0.9375rem;
  line-height: normal !important;
@ -2735,7 +2735,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
-  max-width: 18.75rem;
+  max-width: 22.1875rem;
  text-overflow: ellipsis;
  font-size: 0.9375rem;
  line-height: normal !important;
@ -3777,7 +3777,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
-  max-width: 18.75rem;
+  max-width: 22.1875rem;
  text-overflow: ellipsis;
  font-size: 0.9375rem;
  line-height: normal !important;
@ -4716,7 +4716,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
-  max-width: 18.75rem;
+  max-width: 22.1875rem;
  text-overflow: ellipsis;
  font-size: 0.9375rem;
  line-height: normal !important;
@ -5760,7 +5760,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
-  max-width: 18.75rem;
+  max-width: 22.1875rem;
  text-overflow: ellipsis;
  font-size: 0.9375rem;
  line-height: normal !important;
@ -6811,7 +6811,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
  color: rgb(250,250,250);
  background-color: rgb(250,250,250);
  color: rgb(216,216,216);
-  max-width: 18.75rem;
+  max-width: 22.1875rem;
  text-overflow: ellipsis;
  font-size: 0.9375rem;
  line-height: normal !important;
@ -7808,7 +7808,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
-  max-width: 18.75rem;
+  max-width: 22.1875rem;
  text-overflow: ellipsis;
  font-size: 0.9375rem;
  line-height: normal !important;
--- a/packages/my-joy-beta/src/components/instances/tests/snapshots/list.spec.js.snap
+++ b/packages/my-joy-beta/src/components/instances/tests/snapshots/list.spec.js.snap
@ -3220,7 +3220,7 @@ exports[`renders <Item /> without throwing 1`] = `
 .c14 {
  width: 0.375rem;
  height: 0.375rem;
-  border-radius: 0.1875rem;
+  border-radius: 50%;
  background-color: rgb(0,152,88);
  display: inline-block;
  height: 0.6875rem;
@ -3712,7 +3712,7 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
 .c14 {
  width: 0.375rem;
  height: 0.375rem;
-  border-radius: 0.1875rem;
+  border-radius: 50%;
  background-color: rgb(59,70,204);
  display: inline-block;
  height: 0.6875rem;
@ -4206,7 +4206,7 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
 .c14 {
  width: 0.375rem;
  height: 0.375rem;
-  border-radius: 0.1875rem;
+  border-radius: 50%;
  background-color: rgb(0,152,88);
  display: inline-block;
  height: 0.6875rem;
--- a/packages/my-joy-beta/src/components/instances/tests/snapshots/metadata.spec.js.snap
+++ b/packages/my-joy-beta/src/components/instances/tests/snapshots/metadata.spec.js.snap
@ -633,7 +633,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
-  max-width: 18.75rem;
+  max-width: 22.1875rem;
  text-overflow: ellipsis;
  font-size: 0.9375rem;
  line-height: normal !important;
@ -1641,7 +1641,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
-  max-width: 18.75rem;
+  max-width: 22.1875rem;
  text-overflow: ellipsis;
  font-size: 0.9375rem;
  line-height: normal !important;
--- a/packages/my-joy-beta/src/components/instances/tests/snapshots/snapshots.spec.js.snap
+++ b/packages/my-joy-beta/src/components/instances/tests/snapshots/snapshots.spec.js.snap
@ -497,7 +497,7 @@ exports[`renders <Item /> without throwing 1`] = `
 .c10 {
  width: 0.375rem;
  height: 0.375rem;
-  border-radius: 0.1875rem;
+  border-radius: 50%;
  display: inline-block;
  height: 0.6875rem;
  width: 0.6875rem;
@ -906,7 +906,7 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
 .c10 {
  width: 0.375rem;
  height: 0.375rem;
-  border-radius: 0.1875rem;
+  border-radius: 50%;
  display: inline-block;
  height: 0.6875rem;
  width: 0.6875rem;
--- a/packages/my-joy-beta/src/components/instances/tests/snapshots/summary.spec.js.snap
+++ b/packages/my-joy-beta/src/components/instances/tests/snapshots/summary.spec.js.snap
@ -748,7 +748,7 @@ exports[`renders <Summary /> without throwing 1`] = `
 .c12 {
  width: 0.375rem;
  height: 0.375rem;
-  border-radius: 0.1875rem;
+  border-radius: 50%;
  display: inline-block;
  margin-top: 0.0625rem;
  margin-right: 0.375rem;
@ -2912,7 +2912,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
 .c12 {
  width: 0.375rem;
  height: 0.375rem;
-  border-radius: 0.1875rem;
+  border-radius: 50%;
  background-color: rgb(0,152,88);
  display: inline-block;
  margin-top: 0.0625rem;
@ -5246,7 +5246,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
 .c12 {
  width: 0.375rem;
  height: 0.375rem;
-  border-radius: 0.1875rem;
+  border-radius: 50%;
  background-color: rgb(0,152,88);
  display: inline-block;
  margin-top: 0.0625rem;
@ -7467,7 +7467,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 .c12 {
  width: 0.375rem;
  height: 0.375rem;
-  border-radius: 0.1875rem;
+  border-radius: 50%;
  display: inline-block;
  margin-top: 0.0625rem;
  margin-right: 0.375rem;
@ -9523,7 +9523,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
 .c12 {
  width: 0.375rem;
  height: 0.375rem;
-  border-radius: 0.1875rem;
+  border-radius: 50%;
  background-color: rgb(0,152,88);
  display: inline-block;
  margin-top: 0.0625rem;
@ -11688,7 +11688,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
 .c12 {
  width: 0.375rem;
  height: 0.375rem;
-  border-radius: 0.1875rem;
+  border-radius: 50%;
  background-color: rgb(216,216,216);
  display: inline-block;
  margin-top: 0.0625rem;
@ -13687,7 +13687,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
 .c12 {
  width: 0.375rem;
  height: 0.375rem;
-  border-radius: 0.1875rem;
+  border-radius: 50%;
  background-color: rgb(59,70,204);
  display: inline-block;
  margin-top: 0.0625rem;
--- a/packages/my-joy-beta/src/components/instances/tests/snapshots/tags.spec.js.snap
+++ b/packages/my-joy-beta/src/components/instances/tests/snapshots/tags.spec.js.snap
@ -626,7 +626,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
-  max-width: 18.75rem;
+  max-width: 22.1875rem;
  text-overflow: ellipsis;
  font-size: 0.9375rem;
  line-height: normal !important;
@ -1599,7 +1599,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
-  max-width: 18.75rem;
+  max-width: 22.1875rem;
  text-overflow: ellipsis;
  font-size: 0.9375rem;
  line-height: normal !important;
--- a/packages/my-joy-beta/src/containers/create-instance/tests/snapshots/metadata.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/create-instance/tests/snapshots/metadata.spec.js.snap
@ -1087,7 +1087,7 @@ Array [
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
-  max-width: 18.75rem;
+  max-width: 22.1875rem;
  text-overflow: ellipsis;
  font-size: 0.9375rem;
  line-height: normal !important;
@ -2988,7 +2988,7 @@ Array [
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
-  max-width: 18.75rem;
+  max-width: 22.1875rem;
  text-overflow: ellipsis;
  font-size: 0.9375rem;
  line-height: normal !important;
@ -4021,7 +4021,7 @@ Array [
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
-  max-width: 18.75rem;
+  max-width: 22.1875rem;
  text-overflow: ellipsis;
  font-size: 0.9375rem;
  line-height: normal !important;
@ -5336,7 +5336,7 @@ Array [
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
-  max-width: 18.75rem;
+  max-width: 22.1875rem;
  text-overflow: ellipsis;
  font-size: 0.9375rem;
  line-height: normal !important;
@ -6369,7 +6369,7 @@ Array [
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
-  max-width: 18.75rem;
+  max-width: 22.1875rem;
  text-overflow: ellipsis;
  font-size: 0.9375rem;
  line-height: normal !important;
--- a/packages/my-joy-beta/src/containers/create-instance/tests/snapshots/networks.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/create-instance/tests/snapshots/networks.spec.js.snap
@ -770,6 +770,11 @@ Array [
  background-color: rgb(59,70,204);
  border-radius: 0.25rem;
  border: solid 0.0625rem rgb(45,56,132);
+  cursor: not-allowed;
+  pointer-events: none;
+  color: rgb(216,216,216);
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
 }

 .c1:focus {
@ -798,6 +803,23 @@ Array [
  pointer-events: none;
 }

+.c1:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c1:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c1:active,
+.c1:active:hover,
+.c1:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
 .c0 {
  margin-bottom: 2rem;
 }
@ -807,6 +829,7 @@ Array [
 >
    <button
        className="c1 c2 c3"
+        disabled={true}
        href=""
        onClick={undefined}
        type="button"
@ -2585,7 +2608,7 @@ Array [
                                                <p
                                                    className="c16"
                                                >
-                                                    Fabric
+                                                    Fabric network
                                                </p>
                                            </div>
                                        </div>
@ -2952,6 +2975,7 @@ Array [
 >
    <button
        className="c1 c2 c3"
+        disabled={false}
        href=""
        onClick={undefined}
        type="button"
--- a/packages/my-joy-beta/src/containers/create-instance/tests/snapshots/tag.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/create-instance/tests/snapshots/tag.spec.js.snap
@ -1070,7 +1070,7 @@ Array [
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
-  max-width: 18.75rem;
+  max-width: 22.1875rem;
  text-overflow: ellipsis;
  font-size: 0.9375rem;
  line-height: normal !important;
--- a/packages/my-joy-beta/src/containers/create-instance/networks.js
+++ b/packages/my-joy-beta/src/containers/create-instance/networks.js
@ -79,7 +79,11 @@ export const Networks = ({
      ) : null}
      <Margin bottom={4}>
        {expanded ? (
-          <Button type="button" onClick={handleNext}>
+          <Button
+            type="button"
+            disabled={!selected.length}
+            onClick={handleNext}
+          >
            Next
          </Button>
        ) : proceeded ? (
--- a/packages/my-joy-beta/src/containers/create-instance/package.js
+++ b/packages/my-joy-beta/src/containers/create-instance/package.js
@ -15,8 +15,7 @@ import {
  Filters,
  Packages,
  Package,
-  Overview,
-  NoPackages
+  Overview
 } from '@components/create-instance/package';
 import Title from '@components/create-instance/title';
 import Description from '@components/create-instance/description';
@ -56,55 +55,59 @@ const PackageContainer = ({
          </a>
        </Description>
      ) : null}
-    {!loading && expanded ? (
-      <ReduxForm
-        form={`${FORM_NAME}-filters`}
-        destroyOnUnmount={false}
-        forceUnregisterOnUnmount={true}
-      >
-        {props => <Filters {...props} resetFilters={resetFilters} />}
-      </ReduxForm>
-    ) : null}
-    {loading && expanded ? (
-      <StatusLoader />
-    ) : (
-      <ReduxForm
-        form={FORM_NAME}
-        destroyOnUnmount={false}
-        forceUnregisterOnUnmount={true}
-        onSubmit={handleSubmit}
-      >
-        {props => (
-          <Fragment>
-            {expanded ? (
-              <Fragment>
-                <Packages
-                  {...props}
+      {!loading && expanded ? (
+        <ReduxForm
+          form={`${FORM_NAME}-filters`}
+          destroyOnUnmount={false}
+          forceUnregisterOnUnmount={true}
+        >
+          {props => <Filters {...props} resetFilters={resetFilters} />}
+        </ReduxForm>
+      ) : null}
+      {loading && expanded ? (
+        <StatusLoader />
+      ) : (
+        <ReduxForm
+          form={FORM_NAME}
+          destroyOnUnmount={false}
+          forceUnregisterOnUnmount={true}
+          onSubmit={handleSubmit}
+        >
+          {props => (
+            <Fragment>
+              {expanded ? (
+                <Fragment>
+                  <Packages
+                    {...props}
+                    hasVms={hasVms}
+                    sortBy={sortBy}
+                    sortOrder={sortOrder}
+                    onSortBy={handleSortBy}
+                    packages={packages.length}
+                  >
+                    {packages.map(({ id, ...pkg }) => (
+                      <Package
+                        key={id}
+                        id={id}
+                        selected={selected.id === id}
+                        hasVms={hasVms}
+                        {...pkg}
+                      />
+                    ))}
+                  </Packages>
+                </Fragment>
+              ) : null}
+              {!expanded && selected.id ? (
+                <Overview
+                  {...selected}
                  hasVms={hasVms}
-                  sortBy={sortBy}
-                  sortOrder={sortOrder}
-                  onSortBy={handleSortBy}
-                  packages={packages.length}
-                >
-                  {packages.map(({ id, ...pkg }) => (
-                    <Package
-                      key={id}
-                      id={id}
-                      selected={selected.id === id}
-                      hasVms={hasVms}
-                      {...pkg}
-                    />
-                  ))}
-                </Packages>
-              </Fragment>
-            ) : null}
-            {!expanded && selected.id ? (
-              <Overview {...selected} hasVms={hasVms} onCancel={handleCancel} />
-            ) : null}
-          </Fragment>
-        )}
-      </ReduxForm>
-    )}
+                  onCancel={handleCancel}
+                />
+              ) : null}
+            </Fragment>
+          )}
+        </ReduxForm>
+      )}
    </div>
  </Fragment>
 );
--- a/packages/my-joy-beta/src/containers/instances/tests/snapshots/list.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/instances/tests/snapshots/list.spec.js.snap
@ -2260,7 +2260,7 @@ exports[`renders <List instances /> without throwing 1`] = `
 .c38 {
  width: 0.375rem;
  height: 0.375rem;
-  border-radius: 0.1875rem;
+  border-radius: 50%;
  background-color: rgb(0,152,88);
  display: inline-block;
  height: 0.6875rem;
@ -4338,7 +4338,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
 .c38 {
  width: 0.375rem;
  height: 0.375rem;
-  border-radius: 0.1875rem;
+  border-radius: 50%;
  background-color: rgb(0,152,88);
  display: inline-block;
  height: 0.6875rem;
@ -6959,7 +6959,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
 .c38 {
  width: 0.375rem;
  height: 0.375rem;
-  border-radius: 0.1875rem;
+  border-radius: 50%;
  background-color: rgb(0,152,88);
  display: inline-block;
  height: 0.6875rem;
@ -9789,7 +9789,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
 .c38 {
  width: 0.375rem;
  height: 0.375rem;
-  border-radius: 0.1875rem;
+  border-radius: 50%;
  background-color: rgb(0,152,88);
  display: inline-block;
  height: 0.6875rem;
--- a/packages/my-joy-beta/src/containers/instances/tests/snapshots/metadata.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/instances/tests/snapshots/metadata.spec.js.snap
@ -1382,7 +1382,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
-  max-width: 18.75rem;
+  max-width: 22.1875rem;
  text-overflow: ellipsis;
  font-size: 0.9375rem;
  line-height: normal !important;
@ -4188,7 +4188,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
-  max-width: 18.75rem;
+  max-width: 22.1875rem;
  text-overflow: ellipsis;
  font-size: 0.9375rem;
  line-height: normal !important;
--- a/packages/my-joy-beta/src/containers/instances/tests/snapshots/summary.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/instances/tests/snapshots/summary.spec.js.snap
@ -1470,7 +1470,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 .c13 {
  width: 0.375rem;
  height: 0.375rem;
-  border-radius: 0.1875rem;
+  border-radius: 50%;
  background-color: rgb(0,152,88);
  display: inline-block;
  margin-top: 0.0625rem;
@ -3842,7 +3842,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 .c13 {
  width: 0.375rem;
  height: 0.375rem;
-  border-radius: 0.1875rem;
+  border-radius: 50%;
  background-color: rgb(0,152,88);
  display: inline-block;
  margin-top: 0.0625rem;
--- a/packages/my-joy-beta/src/containers/instances/tests/snapshots/tags.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/instances/tests/snapshots/tags.spec.js.snap
@ -1391,7 +1391,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
-  max-width: 18.75rem;
+  max-width: 22.1875rem;
  text-overflow: ellipsis;
  font-size: 0.9375rem;
  line-height: normal !important;
@ -3315,7 +3315,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
-  max-width: 18.75rem;
+  max-width: 22.1875rem;
  text-overflow: ellipsis;
  font-size: 0.9375rem;
  line-height: normal !important;
@ -4824,7 +4824,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
-  max-width: 18.75rem;
+  max-width: 22.1875rem;
  text-overflow: ellipsis;
  font-size: 0.9375rem;
  line-height: normal !important;
--- a/packages/ui-toolkit/src/form/tests/snapshots/form.spec.js.snap
+++ b/packages/ui-toolkit/src/form/tests/snapshots/form.spec.js.snap
@ -303,7 +303,7 @@ exports[`Form Input 1`] = `
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
-  max-width: 18.75rem;
+  max-width: 22.1875rem;
  text-overflow: ellipsis;
  font-size: 0.9375rem;
  line-height: normal !important;
@ -593,7 +593,7 @@ exports[`Form Select 1`] = `
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
-  max-width: 18.75rem;
+  max-width: 22.1875rem;
  text-overflow: ellipsis;
  font-size: 0.9375rem;
  line-height: normal !important;
@ -693,7 +693,7 @@ exports[`Form Textarea 1`] = `
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
-  max-width: 18.75rem;
+  max-width: 22.1875rem;
  text-overflow: ellipsis;
  font-size: 0.9375rem;
  line-height: normal !important;
--- a/packages/ui-toolkit/src/form/base/input.js
+++ b/packages/ui-toolkit/src/form/base/input.js
@ -92,6 +92,10 @@ const style = css`
    width: ${remcalc(120)}
  `};

+  ${is('big')`
+    width: ${remcalc(355)}
+  `};
+
  ${is('monospace')`
    font-family: ${props => props.theme.monoSpaceFont.family};

@ -152,7 +156,7 @@ const style = css`
  `};

  ${isNot('fluid')`
-    max-width: ${remcalc(300)};
+    max-width: ${remcalc(355)};
  `};

  ${is('mono')`