Merge branch 'design-repo-base' into 'master'

Design Repo Sync Status - Base View

See merge request gitlab-org/gitlab!19976

ee/app/assets/javascripts/geo_designs/components/app.vue

 <script>
+import { mapActions, mapState } from 'vuex';
+import { GlLoadingIcon } from '@gitlab/ui';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import GeoDesigns from './geo_designs.vue';
+import GeoDesignsEmptyState from './geo_designs_empty_state.vue';
 import GeoDesignsDisabled from './geo_designs_disabled.vue';
 
 export default {
   name: 'GeoDesignsApp',
   components: {
+    GlLoadingIcon,
+    GeoDesigns,
+    GeoDesignsEmptyState,
     GeoDesignsDisabled,
   },
+  mixins: [glFeatureFlagsMixin()],
   props: {
     geoSvgPath: {
       type: String,
       required: true,
     },
+    issuesSvgPath: {
+      type: String,
+      required: true,
+    },
     geoTroubleshootingLink: {
       type: String,
       required: true,
@@ -19,17 +32,40 @@ export default {
       type: String,
       required: true,
     },
-    designsEnabled: {
-      type: Boolean,
-      required: true,
+  },
+  data() {
+    return {
+      designsEnabled: Boolean(this.glFeatures.enableGeoDesignSync),
+    };
+  },
+  computed: {
+    ...mapState(['isLoading', 'totalDesigns']),
+    hasDesigns() {
+      return this.totalDesigns > 0;
     },
   },
+  created() {
+    this.fetchDesigns();
+  },
+  methods: {
+    ...mapActions(['fetchDesigns']),
+  },
 };
 </script>
 
 <template>
   <article class="geo-designs-container">
-    <h2 v-if="designsEnabled">{{ __('Designs coming soon.') }}</h2>
+    <section v-if="designsEnabled">
+      <gl-loading-icon v-if="isLoading" size="xl" />
+      <template v-else>
+        <geo-designs v-if="hasDesigns" />
+        <geo-designs-empty-state
+          v-else
+          :issues-svg-path="issuesSvgPath"
+          :geo-troubleshooting-link="geoTroubleshootingLink"
+        />
+      </template>
+    </section>
     <geo-designs-disabled
       v-else
       :geo-svg-path="geoSvgPath"

ee/app/assets/javascripts/geo_designs/components/geo_design.vue

+<script>
+import { GlLink } from '@gitlab/ui';
+import { __ } from '~/locale';
+import GeoDesignStatus from './geo_design_status.vue';
+import GeoDesignTimeAgo from './geo_design_time_ago.vue';
+
+export default {
+  name: 'GeoDesign',
+  components: {
+    GlLink,
+    GeoDesignTimeAgo,
+    GeoDesignStatus,
+  },
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+    projectId: {
+      type: Number,
+      required: true,
+    },
+    syncStatus: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    lastSynced: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    lastVerified: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    lastChecked: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      timeAgoArray: [
+        {
+          label: __('Last successful sync'),
+          dateString: this.lastSynced,
+          defaultText: __('Never'),
+        },
+        {
+          label: __('Last time verified'),
+          dateString: this.lastVerified,
+          defaultText: __('Not Implemented'),
+        },
+        {
+          label: __('Last repository check run'),
+          dateString: this.lastChecked,
+          defaultText: __('Not Implemented'),
+        },
+      ],
+    };
+  },
+};
+</script>
+
+<template>
+  <div class="card">
+    <div class="card-header d-flex align-center">
+      <gl-link class="font-weight-bold" :href="`/${name}`" target="_blank">{{ name }}</gl-link>
+    </div>
+    <div class="card-body">
+      <div class="d-flex flex-column flex-md-row">
+        <div class="flex-grow-1">
+          <label class="text-muted">{{ __('Status') }}</label>
+          <geo-design-status :status="syncStatus" />
+        </div>
+        <geo-design-time-ago
+          v-for="(timeAgo, index) in timeAgoArray"
+          :key="index"
+          class="flex-grow-1"
+          :label="timeAgo.label"
+          :date-string="timeAgo.dateString"
+          :default-text="timeAgo.defaultText"
+        />
+      </div>
+    </div>
+  </div>
+</template>

ee/app/assets/javascripts/geo_designs/components/geo_design_status.vue

+<script>
+import { STATUS_ICON_NAMES, STATUS_ICON_CLASS, DEFAULT_STATUS } from '../store/constants';
+import Icon from '~/vue_shared/components/icon.vue';
+
+export default {
+  name: 'GeoDesignStatus',
+  components: {
+    Icon,
+  },
+  props: {
+    status: {
+      type: String,
+      required: false,
+      default: DEFAULT_STATUS,
+    },
+  },
+  data() {
+    return {
+      icon: this.iconProperties(),
+    };
+  },
+  methods: {
+    iconProperties() {
+      if (STATUS_ICON_NAMES[this.status] && STATUS_ICON_CLASS[this.status]) {
+        return {
+          name: STATUS_ICON_NAMES[this.status],
+          cssClass: STATUS_ICON_CLASS[this.status],
+        };
+      }
+
+      return {
+        name: STATUS_ICON_NAMES[DEFAULT_STATUS],
+        cssClass: STATUS_ICON_CLASS[DEFAULT_STATUS],
+      };
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <span class="d-flex align-items-center text-capitalize">
+      <icon :name="icon.name" :class="icon.cssClass" class="mr-2" />
+      {{ status }}
+    </span>
+  </div>
+</template>

ee/app/assets/javascripts/geo_designs/components/geo_design_time_ago.vue

+<script>
+import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
+
+export default {
+  name: 'GeoDesignTimeAgo',
+  components: {
+    TimeAgo,
+  },
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    defaultText: {
+      type: String,
+      required: true,
+    },
+    dateString: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="d-flex flex-column">
+    <label class="text-muted">{{ label }}</label>
+    <time-ago v-if="dateString" :time="dateString" tooltip-placement="bottom" />
+    <span v-else>{{ defaultText }}</span>
+  </div>
+</template>

ee/app/assets/javascripts/geo_designs/components/geo_designs.vue

+<script>
+import { mapState, mapActions } from 'vuex';
+import { GlPagination } from '@gitlab/ui';
+import GeoDesign from './geo_design.vue';
+
+export default {
+  name: 'GeoDesigns',
+  components: {
+    GlPagination,
+    GeoDesign,
+  },
+  computed: {
+    ...mapState(['designs', 'currentPage', 'pageSize', 'totalDesigns']),
+    page: {
+      get() {
+        return this.currentPage;
+      },
+      set(newVal) {
+        this.setPage(newVal);
+        this.fetchDesigns();
+      },
+    },
+    hasDesigns() {
+      return this.totalDesigns > 0;
+    },
+  },
+  methods: {
+    ...mapActions(['setPage', 'fetchDesigns']),
+  },
+};
+</script>
+
+<template>
+  <section>
+    <geo-design
+      v-for="design in designs"
+      :key="design.id"
+      :name="design.name"
+      :project-id="design.project_id"
+      :sync-status="design.state"
+      :last-synced="design.last_synced_at"
+      :last-verified="design.last_verified_at"
+      :last-checked="design.last_checked_at"
+    />
+    <gl-pagination
+      v-if="hasDesigns"
+      v-model="page"
+      :per-page="pageSize"
+      :total-items="totalDesigns"
+      align="center"
+    />
+  </section>
+</template>

ee/app/assets/javascripts/geo_designs/components/geo_designs_empty_state.vue

+<script>
+import { GlEmptyState } from '@gitlab/ui';
+import { s__, sprintf } from '~/locale';
+
+export default {
+  name: 'GeoEmptyState',
+  components: {
+    GlEmptyState,
+  },
+  props: {
+    issuesSvgPath: {
+      type: String,
+      required: true,
+    },
+    geoTroubleshootingLink: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    linkText() {
+      return sprintf(
+        s__(
+          'If you believe this may be an error, please refer to the %{linkStart}Geo Troubleshooting%{linkEnd} documentation for more information.',
+        ),
+        {
+          linkStart: `<a href="${this.geoTroubleshootingLink}" target="_blank">`,
+          linkEnd: '</a>',
+        },
+        false,
+      );
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-empty-state :title="__('No Design Repositories match this filter')" :svg-path="issuesSvgPath">
+    <template v-slot:description>
+      <div class="text-center">
+        <p>{{ __('Adjust your filters/search criteria above.') }}</p>
+        <p v-html="linkText"></p>
+      </div>
+    </template>
+  </gl-empty-state>
+</template>

ee/app/assets/javascripts/geo_designs/index.js

@@ -16,14 +16,14 @@ export default () => {
     },
     data() {
       const {
-        dataset: { geoSvgPath, geoTroubleshootingLink, designManagementLink, designsEnabled },
+        dataset: { geoSvgPath, issuesSvgPath, geoTroubleshootingLink, designManagementLink },
       } = this.$options.el;
 
       return {
         geoSvgPath,
+        issuesSvgPath,
         geoTroubleshootingLink,
         designManagementLink,
-        designsEnabled,
       };
     },
 
@@ -31,9 +31,9 @@ export default () => {
       return createElement('geo-designs-app', {
         props: {
           geoSvgPath: this.geoSvgPath,
+          issuesSvgPath: this.issuesSvgPath,
           geoTroubleshootingLink: this.geoTroubleshootingLink,
           designManagementLink: this.designManagementLink,
-          designsEnabled: this.designsEnabled,
         },
       });
     },

ee/app/assets/javascripts/geo_designs/store/constants.js

-// eslint-disable-next-line import/prefer-default-export
 export const FILTER_STATES = {
   ALL: 'all',
   SYNCED: 'synced',
   PENDING: 'pending',
   FAILED: 'failed',
 };
+
+export const DEFAULT_STATUS = 'never';
+
+export const STATUS_ICON_NAMES = {
+  [FILTER_STATES.SYNCED]: 'status_closed',
+  [FILTER_STATES.PENDING]: 'status_scheduled',
+  [FILTER_STATES.FAILED]: 'status_failed',
+  [DEFAULT_STATUS]: 'status_notfound',
+};
+
+export const STATUS_ICON_CLASS = {
+  [FILTER_STATES.SYNCED]: 'text-success',
+  [FILTER_STATES.PENDING]: 'text-warning',
+  [FILTER_STATES.FAILED]: 'text-danger',
+  [DEFAULT_STATUS]: 'text-muted',
+};

ee/app/controllers/admin/geo/designs_controller.rb

@@ -3,6 +3,10 @@
 class Admin::Geo::DesignsController < Admin::Geo::ApplicationController
   before_action :check_license!
 
+  before_action do
+    push_frontend_feature_flag(:enable_geo_design_sync)
+  end
+
   def index
   end
 end

ee/app/views/admin/geo/designs/index.html.haml

@@ -2,6 +2,6 @@
 - @content_class = "geo-admin-container"
 
 #js-geo-designs{ data: { "geo-svg-path" => image_path('illustrations/gitlab_geo.svg'),
+  "issues-svg-path" => image_path('illustrations/issues.svg'),
   "geo-troubleshooting-link" => help_page_path('administration/geo/replication/troubleshooting.html'),
-  "design-management-link" => help_page_path('user/project/issues/design_management.html'),
-  "designs-enabled" => Feature.enabled?(:enable_geo_design_sync) && Feature.enabled?(:enable_geo_design_view) } }
+  "design-management-link" => help_page_path('user/project/issues/design_management.html') } }

ee/app/views/layouts/nav/ee/admin/_geo_sidebar.html.haml

@@ -22,7 +22,7 @@
         = link_to admin_geo_projects_path, title: 'Projects' do
           %span
             = _('Projects')
-      - if Feature.enabled?(:enable_geo_design_sync) && Feature.enabled?(:enable_geo_design_view)
+      - if Feature.enabled?(:enable_geo_design_sync)
         = nav_link(path: 'admin/geo/designs#index') do
           = link_to admin_geo_designs_path, title: _('Designs') do
             %span

ee/spec/frontend/geo_designs/components/__snapshots__/geo_design_time_ago_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GeoDesignTimeAgo template when dateString exists TimeAgo sets innerHTML as 09-23-1994 1`] = `"<time title=\\"\\" class=\\"\\" data-original-title=\\"Sep 23, 1994 12:00am GMT+0000\\">25 years ago</time>"`;
+
+exports[`GeoDesignTimeAgo template when dateString is null DefaultText sets innerHTML as props.defaultText 1`] = `"<span>Default Text</span>"`;

ee/spec/frontend/geo_designs/components/app_spec.js

 import Vuex from 'vuex';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { GlLoadingIcon } from '@gitlab/ui';
 import GeoDesignsApp from 'ee/geo_designs/components/app.vue';
 import store from 'ee/geo_designs/store';
 import GeoDesignsDisabled from 'ee/geo_designs/components/geo_designs_disabled.vue';
+import GeoDesigns from 'ee/geo_designs/components/geo_designs.vue';
+import GeoDesignsEmptyState from 'ee/geo_designs/components/geo_designs_empty_state.vue';
 import {
   MOCK_GEO_SVG_PATH,
+  MOCK_ISSUES_SVG_PATH,
   MOCK_GEO_TROUBLESHOOTING_LINK,
   MOCK_DESIGN_MANAGEMENT_LINK,
+  MOCK_BASIC_FETCH_DATA_MAP,
 } from '../mock_data';
 
 const localVue = createLocalVue();
@@ -17,9 +22,18 @@ describe('GeoDesignsApp', () => {
 
   const propsData = {
     geoSvgPath: MOCK_GEO_SVG_PATH,
+    issuesSvgPath: MOCK_ISSUES_SVG_PATH,
     geoTroubleshootingLink: MOCK_GEO_TROUBLESHOOTING_LINK,
     designManagementLink: MOCK_DESIGN_MANAGEMENT_LINK,
-    designsEnabled: true,
+  };
+
+  const actionSpies = {
+    fetchDesigns: jest.fn(),
+    setEndpoint: jest.fn(),
+  };
+
+  const glFeatures = {
+    enableGeoDesignSync: true,
   };
 
   const createComponent = () => {
@@ -27,6 +41,12 @@ describe('GeoDesignsApp', () => {
       localVue,
       store,
       propsData,
+      methods: {
+        ...actionSpies,
+      },
+      provide: {
+        glFeatures,
+      },
     });
   };
 
@@ -35,8 +55,11 @@ describe('GeoDesignsApp', () => {
   });
 
   const findGeoDesignsContainer = () => wrapper.find('.geo-designs-container');
-  const findDesignsComingSoon = () => findGeoDesignsContainer().find('h2');
+  const findGeoDesignsEnabledContainer = () => findGeoDesignsContainer().find('section');
   const findGeoDesignsDisabled = () => findGeoDesignsContainer().find(GeoDesignsDisabled);
+  const findGlLoadingIcon = () => findGeoDesignsContainer().find(GlLoadingIcon);
+  const findGeoDesigns = () => findGeoDesignsContainer().find(GeoDesigns);
+  const findGeoDesignsEmptyState = () => findGeoDesignsContainer().find(GeoDesignsEmptyState);
 
   describe('template', () => {
     beforeEach(() => {
@@ -49,32 +72,104 @@ describe('GeoDesignsApp', () => {
 
     describe('when designsEnabled = false', () => {
       beforeEach(() => {
-        propsData.designsEnabled = false;
+        glFeatures.enableGeoDesignSync = false;
         createComponent();
       });
 
-      it('hides designs coming soon text', () => {
-        expect(findDesignsComingSoon().exists()).toBe(false);
-      });
-
       it('shows designs disabled component', () => {
         expect(findGeoDesignsDisabled().exists()).toBe(true);
       });
+
+      it('hides designs enabled container', () => {
+        expect(findGeoDesignsEnabledContainer().exists()).toBe(false);
+      });
     });
 
     describe('when designsEnabled = true', () => {
       beforeEach(() => {
-        propsData.designsEnabled = true;
+        glFeatures.enableGeoDesignSync = true;
         createComponent();
       });
 
-      it('shows designs coming soon text', () => {
-        expect(findDesignsComingSoon().exists()).toBe(true);
-      });
-
       it('hides designs disabled component', () => {
         expect(findGeoDesignsDisabled().exists()).toBe(false);
       });
+
+      it('shows designs enabled container', () => {
+        expect(findGeoDesignsEnabledContainer().exists()).toBe(true);
+      });
+
+      describe('when isLoading = true', () => {
+        beforeEach(() => {
+          wrapper.vm.$store.state.isLoading = true;
+        });
+
+        it('hides designs', () => {
+          expect(findGeoDesigns().exists()).toBe(false);
+        });
+
+        it('hides empty state', () => {
+          expect(findGeoDesignsEmptyState().exists()).toBe(false);
+        });
+
+        it('shows loader', () => {
+          expect(findGlLoadingIcon().exists()).toBe(true);
+        });
+      });
+
+      describe('when isLoading = false', () => {
+        beforeEach(() => {
+          wrapper.vm.$store.state.isLoading = false;
+        });
+
+        describe('with designs', () => {
+          beforeEach(() => {
+            wrapper.vm.$store.state.designs = MOCK_BASIC_FETCH_DATA_MAP.data;
+            wrapper.vm.$store.state.totalDesigns = MOCK_BASIC_FETCH_DATA_MAP.total;
+          });
+
+          it('shows designs', () => {
+            expect(findGeoDesigns().exists()).toBe(true);
+          });
+
+          it('hides empty state', () => {
+            expect(findGeoDesignsEmptyState().exists()).toBe(false);
+          });
+
+          it('hides loader', () => {
+            expect(findGlLoadingIcon().exists()).toBe(false);
+          });
+        });
+
+        describe('with no designs', () => {
+          beforeEach(() => {
+            wrapper.vm.$store.state.designs = [];
+            wrapper.vm.$store.state.totalDesigns = 0;
+          });
+
+          it('hides designs', () => {
+            expect(findGeoDesigns().exists()).toBe(false);
+          });
+
+          it('shows empty state', () => {
+            expect(findGeoDesignsEmptyState().exists()).toBe(true);
+          });
+
+          it('hides loader', () => {
+            expect(findGlLoadingIcon().exists()).toBe(false);
+          });
+        });
+      });
+    });
+  });
+
+  describe('onCreate', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('calls fetchDesigns', () => {
+      expect(actionSpies.fetchDesigns).toHaveBeenCalled();
     });
   });
 });

ee/spec/frontend/geo_designs/components/geo_design_spec.js

+import Vuex from 'vuex';
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { GlLink } from '@gitlab/ui';
+import GeoDesign from 'ee/geo_designs/components/geo_design.vue';
+import store from 'ee/geo_designs/store';
+import { MOCK_BASIC_FETCH_DATA_MAP } from '../mock_data';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('GeoDesignsApp', () => {
+  let wrapper;
+  const mockDesign = MOCK_BASIC_FETCH_DATA_MAP.data[0];
+
+  const propsData = {
+    name: mockDesign.name,
+    projectId: mockDesign.project_id,
+    syncStatus: mockDesign.state,
+    lastSynced: mockDesign.last_synced_at,
+    lastVerified: null,
+    lastChecked: null,
+  };
+
+  const createComponent = () => {
+    wrapper = shallowMount(localVue.extend(GeoDesign), {
+      localVue,
+      store,
+      propsData,
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const findCard = () => wrapper.find('.card');
+  const findGlLink = () => findCard().find(GlLink);
+  const findCardHeader = () => findCard().find('.card-header');
+  const findCardBody = () => findCard().find('.card-body');
+
+  describe('template', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders card', () => {
+      expect(findCard().exists()).toBe(true);
+    });
+
+    it('renders card header', () => {
+      expect(findCardHeader().exists()).toBe(true);
+    });
+
+    it('renders card body', () => {
+      expect(findCardBody().exists()).toBe(true);
+    });
+
+    it('GlLink renders', () => {
+      expect(findGlLink().exists()).toBe(true);
+    });
+  });
+});

ee/spec/frontend/geo_designs/components/geo_design_status_spec.js

+import Vuex from 'vuex';
+import { createLocalVue, mount } from '@vue/test-utils';
+import Icon from '~/vue_shared/components/icon.vue';
+import store from 'ee/geo_designs/store';
+import GeoDesignStatus from 'ee/geo_designs/components/geo_design_status.vue';
+import {
+  FILTER_STATES,
+  STATUS_ICON_NAMES,
+  STATUS_ICON_CLASS,
+  DEFAULT_STATUS,
+} from 'ee/geo_designs/store/constants';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('GeoDesignStatus', () => {
+  let wrapper;
+
+  const propsData = {
+    status: FILTER_STATES.SYNCED,
+  };
+
+  const createComponent = () => {
+    wrapper = mount(localVue.extend(GeoDesignStatus), {
+      localVue,
+      store,
+      propsData,
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const findGeoDesignStatusContainer = () => wrapper.find('div');
+  const findIcon = () => findGeoDesignStatusContainer().find(Icon);
+
+  describe('template', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders status container', () => {
+      expect(findGeoDesignStatusContainer().exists()).toBe(true);
+    });
+  });
+
+  describe.each`
+    status                   | iconName                                    | iconClass
+    ${FILTER_STATES.SYNCED}  | ${STATUS_ICON_NAMES[FILTER_STATES.SYNCED]}  | ${STATUS_ICON_CLASS[FILTER_STATES.SYNCED]}
+    ${FILTER_STATES.PENDING} | ${STATUS_ICON_NAMES[FILTER_STATES.PENDING]} | ${STATUS_ICON_CLASS[FILTER_STATES.PENDING]}
+    ${FILTER_STATES.FAILED}  | ${STATUS_ICON_NAMES[FILTER_STATES.FAILED]}  | ${STATUS_ICON_CLASS[FILTER_STATES.FAILED]}
+    ${DEFAULT_STATUS}        | ${STATUS_ICON_NAMES[DEFAULT_STATUS]}        | ${STATUS_ICON_CLASS[DEFAULT_STATUS]}
+  `(`iconProperties`, ({ status, iconName, iconClass }) => {
+    beforeEach(() => {
+      propsData.status = status;
+      createComponent();
+    });
+
+    describe(`with filter set to ${status}`, () => {
+      beforeEach(() => {
+        wrapper.vm.icon = wrapper.vm.iconProperties();
+      });
+
+      it(`sets icon.name to ${iconName}`, () => {
+        expect(wrapper.vm.icon.name).toEqual(iconName);
+      });
+
+      it(`sets icon.cssClass to ${iconClass}`, () => {
+        expect(wrapper.vm.icon.cssClass).toEqual(iconClass);
+      });
+
+      it(`sets svg to ic-${iconName}`, () => {
+        expect(findIcon().classes()).toContain(`ic-${wrapper.vm.icon.name}`);
+      });
+    });
+  });
+});

ee/spec/frontend/geo_designs/components/geo_design_time_ago_spec.js

+import Vuex from 'vuex';
+import { createLocalVue, mount } from '@vue/test-utils';
+import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
+import store from 'ee/geo_designs/store';
+import GeoDesignTimeAgo from 'ee/geo_designs/components/geo_design_time_ago.vue';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('GeoDesignTimeAgo', () => {
+  let wrapper;
+
+  const propsData = {
+    label: 'Test Label',
+    dateString: '09-23-1994',
+    defaultText: 'Default Text',
+  };
+
+  const createComponent = () => {
+    wrapper = mount(localVue.extend(GeoDesignTimeAgo), {
+      localVue,
+      store,
+      propsData,
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const findGeoDesignTimeAgo = () => wrapper.find(GeoDesignTimeAgo);
+  const findTimeAgo = () => findGeoDesignTimeAgo().find(TimeAgo);
+  const findDefaultText = () => findGeoDesignTimeAgo().find('span');
+
+  describe('template', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders GeoDesignTimeAgo container', () => {
+      expect(findGeoDesignTimeAgo().exists()).toBe(true);
+    });
+
+    describe('when dateString exists', () => {
+      describe('TimeAgo', () => {
+        it('renders', () => {
+          expect(findTimeAgo().exists()).toBe(true);
+        });
+
+        it('sets time prop', () => {
+          expect(findTimeAgo().props().time).toBe(propsData.dateString);
+        });
+
+        it(`sets innerHTML as ${propsData.dateString}`, () => {
+          expect(findTimeAgo().html()).toMatchSnapshot();
+        });
+      });
+
+      it('hides DefaultText', () => {
+        expect(findDefaultText().exists()).toBe(false);
+      });
+    });
+
+    describe('when dateString is null', () => {
+      beforeEach(() => {
+        propsData.dateString = null;
+        createComponent();
+      });
+
+      it('hides TimeAgo', () => {
+        expect(findTimeAgo().exists()).toBe(false);
+      });
+
+      describe('DefaultText', () => {
+        it('renders', () => {
+          expect(findDefaultText().exists()).toBe(true);
+        });
+
+        it('sets innerHTML as props.defaultText', () => {
+          expect(findDefaultText().html()).toMatchSnapshot();
+        });
+      });
+    });
+  });
+});

ee/spec/frontend/geo_designs/components/geo_designs_empty_state_spec.js

+import Vuex from 'vuex';
+import { createLocalVue, mount } from '@vue/test-utils';
+import { GlEmptyState } from '@gitlab/ui';
+import store from 'ee/geo_designs/store';
+import GeoDesignsEmptyState from 'ee/geo_designs/components/geo_designs_empty_state.vue';
+import { MOCK_ISSUES_SVG_PATH, MOCK_GEO_TROUBLESHOOTING_LINK } from '../mock_data';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('GeoDesignsEmptyState', () => {
+  let wrapper;
+
+  const propsData = {
+    issuesSvgPath: MOCK_ISSUES_SVG_PATH,
+    geoTroubleshootingLink: MOCK_GEO_TROUBLESHOOTING_LINK,
+  };
+
+  const createComponent = () => {
+    wrapper = mount(localVue.extend(GeoDesignsEmptyState), {
+      localVue,
+      store,
+      propsData,
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const findGlEmptyState = () => wrapper.find(GlEmptyState);
+  const findLink = () => findGlEmptyState().find('a');
+
+  describe('template', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders GlEmptyState', () => {
+      expect(findGlEmptyState().exists()).toBe(true);
+    });
+
+    it('Link renders', () => {
+      expect(findLink().exists()).toBe(true);
+    });
+  });
+});

ee/spec/frontend/geo_designs/components/geo_designs_spec.js

+import Vuex from 'vuex';
+import { createLocalVue, mount } from '@vue/test-utils';
+import { GlPagination } from '@gitlab/ui';
+import store from 'ee/geo_designs/store';
+import GeoDesigns from 'ee/geo_designs/components/geo_designs.vue';
+import GeoDesign from 'ee/geo_designs/components/geo_design.vue';
+import { MOCK_BASIC_FETCH_DATA_MAP } from '../mock_data';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('GeoDesigns', () => {
+  let wrapper;
+
+  const actionSpies = {
+    setPage: jest.fn(),
+    fetchDesigns: jest.fn(),
+  };
+
+  const createComponent = () => {
+    wrapper = mount(localVue.extend(GeoDesigns), {
+      localVue,
+      store,
+      methods: {
+        ...actionSpies,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const findGeoDesignsContainer = () => wrapper.find('section');
+  const findGlPagination = () => findGeoDesignsContainer().find(GlPagination);
+  const findGeoDesign = () => findGeoDesignsContainer().findAll(GeoDesign);
+
+  describe('template', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders the designs container', () => {
+      expect(findGeoDesignsContainer().exists()).toBe(true);
+    });
+
+    describe('GlPagination', () => {
+      describe('when pageSize >= totalDesigns', () => {
+        beforeEach(() => {
+          wrapper.vm.$store.state.pageSize = 2;
+          wrapper.vm.$store.state.totalDesigns = 1;
+        });
+
+        it('is hidden', () => {
+          expect(findGlPagination().html()).toBeUndefined();
+        });
+      });
+
+      describe('when pageSize < totalDesigns', () => {
+        beforeEach(() => {
+          wrapper.vm.$store.state.pageSize = 1;
+          wrapper.vm.$store.state.totalDesigns = 2;
+        });
+
+        it('renders', () => {
+          expect(findGlPagination().html()).not.toBeUndefined();
+        });
+      });
+    });
+
+    describe('GeoDesign', () => {
+      beforeEach(() => {
+        wrapper.vm.$store.state.designs = MOCK_BASIC_FETCH_DATA_MAP.data;
+      });
+
+      it('renders an instance for each design in the store', () => {
+        const designWrappers = findGeoDesign();
+        const designs = [...wrapper.vm.$store.state.designs];
+
+        for (let i = 0; i < designWrappers.length; i += 1) {
+          expect(designWrappers.at(i).props().projectId).toBe(designs[i].project_id);
+        }
+      });
+    });
+  });
+
+  describe('changing the page', () => {
+    beforeEach(() => {
+      createComponent();
+      wrapper.vm.page = 2;
+    });
+
+    it('should call setPage', () => {
+      expect(actionSpies.setPage).toHaveBeenCalledWith(2);
+    });
+
+    it('should call fetchDesigns', () => {
+      expect(actionSpies.fetchDesigns).toHaveBeenCalled();
+    });
+  });
+});

ee/spec/frontend/geo_designs/mock_data.js

 export const MOCK_GEO_SVG_PATH = 'illustrations/gitlab_geo.svg';
 
+export const MOCK_ISSUES_SVG_PATH = 'illustrations/issues.svg';
+
 export const MOCK_GEO_TROUBLESHOOTING_LINK =
   'https://docs.gitlab.com/ee/administration/geo/replication/troubleshooting.html';
 

locale/gitlab.pot

@@ -1119,6 +1119,9 @@ msgstr ""
 msgid "Adds an issue to an epic."
 msgstr ""
 
+msgid "Adjust your filters/search criteria above."
+msgstr ""
+
 msgid "Admin Area"
 msgstr ""
 
@@ -5904,9 +5907,6 @@ msgstr ""
 msgid "Designs"
 msgstr ""
 
-msgid "Designs coming soon."
-msgstr ""
-
 msgid "Destroy"
 msgstr ""
 
@@ -9292,6 +9292,9 @@ msgstr ""
 msgid "If using GitHub, you’ll see pipeline statuses on GitHub for your commits and pull requests. %{more_info_link}"
 msgstr ""
 
+msgid "If you believe this may be an error, please refer to the %{linkStart}Geo Troubleshooting%{linkEnd} documentation for more information."
+msgstr ""
+
 msgid "If you believe this page to be an error, check out the links below for more information."
 msgstr ""
 
@@ -10130,12 +10133,21 @@ msgstr ""
 msgid "Last reply by"
 msgstr ""
 
+msgid "Last repository check run"
+msgstr ""
+
 msgid "Last seen"
 msgstr ""
 
+msgid "Last successful sync"
+msgstr ""
+
 msgid "Last successful update"
 msgstr ""
 
+msgid "Last time verified"
+msgstr ""
+
 msgid "Last update"
 msgstr ""
 
@@ -11500,6 +11512,9 @@ msgstr ""
 msgid "No %{providerTitle} repositories found"
 msgstr ""
 
+msgid "No Design Repositories match this filter"
+msgstr ""
+
 msgid "No Epic"
 msgstr ""
 
@@ -11692,6 +11707,9 @@ msgstr ""
 msgid "None"
 msgstr ""
 
+msgid "Not Implemented"
+msgstr ""
+
 msgid "Not all data has been processed yet, the accuracy of the chart for the selected timeframe is limited."
 msgstr ""