Changes after UX/UI feedback.

Signed-off-by: Ketan Verma <ketan9495@gmail.com>
opensearch-project · Jun 3, 2021 · 5a93cbd · 5a93cbd
1 parent 7819e5c
commit 5a93cbd
Show file tree

Hide file tree

Showing 12 changed files with 32 additions and 171 deletions.
diff --git a/public/pages/Indices/components/IndexControls/IndexControls.tsx b/public/pages/Indices/components/IndexControls/IndexControls.tsx
@@ -78,7 +78,7 @@ export default class IndexControls extends Component<IndexControlsProps, IndexCo
           {
             type: "field_value_selection",
             field: "data_streams",
-            name: "Data Streams",
+            name: "Data streams",
             noOptionsMessage: "No data streams found",
             multiSelect: "or",
             cache: 60000,
@@ -98,7 +98,7 @@ export default class IndexControls extends Component<IndexControlsProps, IndexCo
           />
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiSwitch label="Show Data Stream Indices" checked={showDataStreams} onChange={toggleShowDataStreams} />
+          <EuiSwitch label="Show data stream indices" checked={showDataStreams} onChange={toggleShowDataStreams} />
         </EuiFlexItem>
         <EuiFlexItem grow={false} style={{ maxWidth: 250 }}>
           <EuiRefreshPicker

diff --git a/public/pages/Indices/components/IndexControls/__snapshots__/IndexControls.test.tsx.snap b/public/pages/Indices/components/IndexControls/__snapshots__/IndexControls.test.tsx.snap
@@ -84,7 +84,7 @@ exports[`<IndexControls /> spec renders the component 1`] = `
         class="euiSwitch__label"
         id="some_html_id"
       >
-        Show Data Stream Indices
+        Show data stream indices
       </span>
     </div>
   </div>

diff --git a/public/pages/Indices/containers/Indices/Indices.test.tsx b/public/pages/Indices/containers/Indices/Indices.test.tsx
@@ -228,7 +228,7 @@ describe("<Indices /> spec", () => {
     expect(queryByText("index_0")).toBeNull();
 
     // @ts-ignore
-    fireEvent.click(getByTestId("tableHeaderCell_docs.count_7").firstChild);
+    fireEvent.click(getByTestId("tableHeaderCell_docs.count_6").firstChild);
 
     // should load indices 0-19 after clicking sort (defaults to asc) on docs.count
     await waitFor(() => getByText("index_0"));

diff --git a/public/pages/Indices/containers/Indices/Indices.tsx b/public/pages/Indices/containers/Indices/Indices.tsx
@@ -141,7 +141,7 @@ export default class Indices extends Component<IndicesProps, IndicesState> {
       this.context.notifications.toasts.addDanger(getErrorMessage(err, "There was a problem loading the indices"));
     }
 
-    // Avoiding flicker by showing/hiding the "Data Stream" column only after the results are loaded.
+    // Avoiding flicker by showing/hiding the "Data stream" column only after the results are loaded.
     const { showDataStreams } = this.state;
     this.setState({ loadingIndices: false, isDataStreamColumnVisible: showDataStreams });
   };

diff --git a/public/pages/Indices/containers/Indices/__snapshots__/Indices.test.tsx.snap b/public/pages/Indices/containers/Indices/__snapshots__/Indices.test.tsx.snap
@@ -99,44 +99,6 @@ exports[`<Indices /> spec renders the component 1`] = `
               </div>
             </div>
           </div>
-          <div
-            class="euiFlexItem euiFlexItem--flexGrowZero euiSearchBar__filtersHolder"
-          >
-            <div
-              class="euiFilterGroup"
-            >
-              <div
-                class="euiPopover euiPopover--anchorDownCenter"
-                id="field_value_selection_0"
-              >
-                <div
-                  class="euiPopover__anchor"
-                >
-                  <button
-                    class="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton--hasIcon"
-                    type="button"
-                  >
-                    <span
-                      class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
-                    >
-                      EuiIconMock
-                      <span
-                        class="euiButtonEmpty__text"
-                      >
-                        <span
-                          class="euiFilterButton__textShift"
-                          data-text="Data Streams"
-                          title="Data Streams"
-                        >
-                          Data Streams
-                        </span>
-                      </span>
-                    </span>
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
         </div>
       </div>
       <div
@@ -146,7 +108,7 @@ exports[`<Indices /> spec renders the component 1`] = `
           class="euiSwitch"
         >
           <button
-            aria-checked="true"
+            aria-checked="false"
             aria-labelledby="some_html_id"
             class="euiSwitch__button"
             id="some_html_id"
@@ -171,7 +133,7 @@ exports[`<Indices /> spec renders the component 1`] = `
             class="euiSwitch__label"
             id="some_html_id"
           >
-            Show Data Stream Indices
+            Show data stream indices
           </span>
         </div>
       </div>
@@ -398,40 +360,9 @@ exports[`<Indices /> spec renders the component 1`] = `
                   </span>
                 </button>
               </th>
-              <th
-                aria-live="polite"
-                aria-sort="none"
-                class="euiTableHeaderCell"
-                data-test-subj="tableHeaderCell_data_stream_2"
-                role="columnheader"
-                scope="col"
-                style="width: 120px;"
-              >
-                <button
-                  class="euiTableHeaderButton"
-                  data-test-subj="tableHeaderSortButton"
-                  type="button"
-                >
-                  <span
-                    class="euiTableCellContent euiTableCellContent--alignRight"
-                  >
-                    <span
-                      class="euiTableCellContent__text"
-                      title="Data Stream"
-                    >
-                      Data Stream
-                    </span>
-                    <span
-                      class="euiScreenReaderOnly"
-                    >
-                      Click to sort in ascending order
-                    </span>
-                  </span>
-                </button>
-              </th>
               <th
                 class="euiTableHeaderCell"
-                data-test-subj="tableHeaderCell_managed_3"
+                data-test-subj="tableHeaderCell_managed_2"
                 role="columnheader"
                 scope="col"
                 style="width: 140px;"
@@ -451,7 +382,7 @@ exports[`<Indices /> spec renders the component 1`] = `
                 aria-live="polite"
                 aria-sort="none"
                 class="euiTableHeaderCell"
-                data-test-subj="tableHeaderCell_status_4"
+                data-test-subj="tableHeaderCell_status_3"
                 role="columnheader"
                 scope="col"
               >
@@ -481,7 +412,7 @@ exports[`<Indices /> spec renders the component 1`] = `
                 aria-live="polite"
                 aria-sort="none"
                 class="euiTableHeaderCell"
-                data-test-subj="tableHeaderCell_store.size_5"
+                data-test-subj="tableHeaderCell_store.size_4"
                 role="columnheader"
                 scope="col"
               >
@@ -511,7 +442,7 @@ exports[`<Indices /> spec renders the component 1`] = `
                 aria-live="polite"
                 aria-sort="none"
                 class="euiTableHeaderCell"
-                data-test-subj="tableHeaderCell_pri.store.size_6"
+                data-test-subj="tableHeaderCell_pri.store.size_5"
                 role="columnheader"
                 scope="col"
               >
@@ -541,7 +472,7 @@ exports[`<Indices /> spec renders the component 1`] = `
                 aria-live="polite"
                 aria-sort="none"
                 class="euiTableHeaderCell"
-                data-test-subj="tableHeaderCell_docs.count_7"
+                data-test-subj="tableHeaderCell_docs.count_6"
                 role="columnheader"
                 scope="col"
               >
@@ -571,7 +502,7 @@ exports[`<Indices /> spec renders the component 1`] = `
                 aria-live="polite"
                 aria-sort="none"
                 class="euiTableHeaderCell"
-                data-test-subj="tableHeaderCell_docs.deleted_8"
+                data-test-subj="tableHeaderCell_docs.deleted_7"
                 role="columnheader"
                 scope="col"
               >
@@ -601,7 +532,7 @@ exports[`<Indices /> spec renders the component 1`] = `
                 aria-live="polite"
                 aria-sort="none"
                 class="euiTableHeaderCell"
-                data-test-subj="tableHeaderCell_pri_9"
+                data-test-subj="tableHeaderCell_pri_8"
                 role="columnheader"
                 scope="col"
               >
@@ -631,7 +562,7 @@ exports[`<Indices /> spec renders the component 1`] = `
                 aria-live="polite"
                 aria-sort="none"
                 class="euiTableHeaderCell"
-                data-test-subj="tableHeaderCell_rep_10"
+                data-test-subj="tableHeaderCell_rep_9"
                 role="columnheader"
                 scope="col"
               >
@@ -665,7 +596,7 @@ exports[`<Indices /> spec renders the component 1`] = `
             >
               <td
                 class="euiTableRowCell euiTableRowCell--isMobileFullWidth"
-                colspan="12"
+                colspan="11"
               >
                 <div
                   class="euiTableCellContent euiTableCellContent--alignCenter"

diff --git a/public/pages/Indices/utils/constants.tsx b/public/pages/Indices/utils/constants.tsx
@@ -37,7 +37,7 @@ export const DEFAULT_QUERY_PARAMS = {
   search: "",
   sortField: "name",
   sortDirection: SortDirection.DESC,
-  showDataStreams: true,
+  showDataStreams: false,
 };
 
 const HEALTH_TO_COLOR: {
@@ -87,7 +87,7 @@ const INDICES_COLUMNS: EuiTableFieldDataColumnType<ManagedCatIndex>[] = [
   },
   {
     field: "data_stream",
-    name: "Data Stream",
+    name: "Data stream",
     sortable: true,
     truncateText: true,
     textOnly: true,

diff --git a/public/pages/ManagedIndices/components/ManagedIndexControls/ManagedIndexControls.tsx b/public/pages/ManagedIndices/components/ManagedIndexControls/ManagedIndexControls.tsx
@@ -73,7 +73,7 @@ export default class ManagedIndexControls extends Component<ManagedIndexControls
           {
             type: "field_value_selection",
             field: "data_streams",
-            name: "Data Streams",
+            name: "Data streams",
             noOptionsMessage: "No data streams found",
             multiSelect: false,
             cache: 60000,
@@ -93,7 +93,7 @@ export default class ManagedIndexControls extends Component<ManagedIndexControls
           />
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiSwitch label="Show Data Stream Indices" checked={showDataStreams} onChange={toggleShowDataStreams} />
+          <EuiSwitch label="Show data stream indices" checked={showDataStreams} onChange={toggleShowDataStreams} />
         </EuiFlexItem>
         <EuiFlexItem grow={false} style={{ maxWidth: 250 }}>
           <EuiRefreshPicker

diff --git a/...dIndices/components/ManagedIndexControls/__snapshots__/ManagedIndexControls.test.tsx.snap b/...dIndices/components/ManagedIndexControls/__snapshots__/ManagedIndexControls.test.tsx.snap
@@ -84,7 +84,7 @@ exports[`<ManagedIndexControls /> spec renders the component 1`] = `
         class="euiSwitch__label"
         id="some_html_id"
       >
-        Show Data Stream Indices
+        Show data stream indices
       </span>
     </div>
   </div>

diff --git a/public/pages/ManagedIndices/containers/ManagedIndices/ManagedIndices.tsx b/public/pages/ManagedIndices/containers/ManagedIndices/ManagedIndices.tsx
@@ -124,7 +124,7 @@ export default class ManagedIndices extends Component<ManagedIndicesProps, Manag
       },
       {
         field: "dataStream",
-        name: "Data Stream",
+        name: "Data stream",
         sortable: true,
         truncateText: true,
         textOnly: true,
@@ -266,7 +266,7 @@ export default class ManagedIndices extends Component<ManagedIndicesProps, Manag
       this.context.notifications.toasts.addDanger(getErrorMessage(err, "There was a problem loading the managed indices"));
     }
 
-    // Avoiding flicker by showing/hiding the "Data Stream" column only after the results are loaded.
+    // Avoiding flicker by showing/hiding the "Data stream" column only after the results are loaded.
     const { showDataStreams } = this.state;
     this.setState({ loadingManagedIndices: false, isDataStreamColumnVisible: showDataStreams });
   };