fix image metadata display bug

webpack/css/image_flipper.scss

@@ -72,6 +72,15 @@
     display: flex;
     label {
       margin-left: 1rem;
+      margin-right: 0.5rem;
+    }
+  }
+  .image-created-at {
+    span {
+    white-space: nowrap;
+    }
+    label {
+      margin-right: 0.5rem;
     }
   }
 }

webpack/farmware/__tests__/state_to_props_test.tsx

@@ -10,7 +10,16 @@ describe("mapStateToProps()", () => {
 
   it("currentImage undefined", () => {
     const props = mapStateToProps(fakeState());
-    expect(props.currentImage).toBeFalsy();
+    expect(props.currentImage).toEqual(props.images[0]);
+  });
+
+  it("currentImage defined", () => {
+    const state = fakeState();
+    const secondImageUUID = state.resources.index.byKind.images[1];
+    state.resources.consumers.farmware.currentImage = secondImageUUID;
+    const props = mapStateToProps(state);
+    const currentImageUUID = props.currentImage ? props.currentImage.uuid : "";
+    expect(currentImageUUID).toEqual(secondImageUUID);
   });
 
 });

webpack/farmware/images/__tests__/photos_test.tsx

@@ -28,6 +28,22 @@ describe("<Photos/>", () => {
     return images;
   }
 
+  it("shows photo", () => {
+    const dispatch = jest.fn();
+    const images = prepareImages(fakeImages);
+    const currentImage = images[1];
+    const props = { images, currentImage, dispatch };
+    const wrapper = mount(<Photos {...props} />);
+    expect(wrapper.text())
+      .toContain("Created At:June 1st, 2017 7:14amX:632Y:347Z:164");
+  });
+
+  it("no photos", () => {
+    const props = { images: [], currentImage: undefined, dispatch: jest.fn() };
+    const wrapper = mount(<Photos {...props} />);
+    expect(wrapper.text()).toContain("Image:No meta data.");
+  });
+
   it("deletes photo", () => {
     const { mock } = destroy as jest.Mock<{}>;
     const dispatch = jest.fn(() => { return Promise.resolve(); });

webpack/farmware/images/photos.tsx

@@ -28,7 +28,7 @@ function MetaInfo({ obj, attr, label }: MetaInfoProps) {
   const bottom = safeStringFetch(obj, attr);
   return (
     <div>
-      <label>{top}:&nbsp;&nbsp;</label>
+      <label>{top}:</label>
       <span>{bottom || "unknown"}</span>
     </div>
   );
@@ -88,8 +88,8 @@ export class Photos extends React.Component<PhotosProps, {}> {
         <WidgetFooter>
           {/** Separated from <MetaInfo /> for stylistic purposes. */}
           {image ?
-            <div>
-              <label>{t("Created At")}</label>
+            <div className="image-created-at">
+              <label>{t("Created At:")}</label>
               <span>
                 {moment(image.body.created_at).format("MMMM Do, YYYY h:mma")}
               </span>

webpack/farmware/state_to_props.ts

@@ -10,8 +10,10 @@ export function mapStateToProps(props: Everything): FarmwareProps {
     .reverse()
     .value();
 
+  const firstImage = images[0];
   const currentImage = images
-    .filter(i => i.uuid === props.resources.consumers.farmware.currentImage)[0];
+    .filter(i => i.uuid === props.resources.consumers.farmware.currentImage)[0]
+    || firstImage;
   const { farmwares } = props.bot.hardware.process_info;
   const syncStatus = props
     .bot