reference manager control design

packages/web/src/widgets/DatabaseWidget.js

@@ -7,8 +7,21 @@ import databaseAppObject from '../appobj/databaseAppObject';
 import { useSetCurrentDatabase, useCurrentDatabase, useOpenedConnections } from '../utility/globalState';
 import InlineButton from './InlineButton';
 import databaseObjectAppObject from '../appobj/databaseObjectAppObject';
-import { useSqlObjectList, useDatabaseList, useConnectionList, useServerStatus, useDatabaseStatus } from '../utility/metadataLoaders';
-import { SearchBoxWrapper, InnerContainer, Input, MainContainer, OuterContainer, WidgetTitle } from './WidgetStyles';
+import {
+  useSqlObjectList,
+  useDatabaseList,
+  useConnectionList,
+  useServerStatus,
+  useDatabaseStatus,
+} from '../utility/metadataLoaders';
+import {
+  SearchBoxWrapper,
+  WidgetsInnerContainer,
+  Input,
+  WidgetsMainContainer,
+  WidgetsOuterContainer,
+  WidgetTitle,
+} from './WidgetStyles';
 import axios from '../utility/axios';
 import LoadingInfo from './LoadingInfo';
 
@@ -55,14 +68,14 @@ function ConnectionList() {
         <InlineButton onClick={handleRefreshConnections}>Refresh</InlineButton>
       </SearchBoxWrapper>
 
-      <InnerContainer>
+      <WidgetsInnerContainer>
         <AppObjectList
           list={connectionsWithStatus}
           makeAppObj={connectionAppObject({ boldCurrentDatabase: true })}
           SubItems={SubDatabaseList}
           filter={filter}
         />
-      </InnerContainer>
+      </WidgetsInnerContainer>
     </>
   );
 }
@@ -93,7 +106,7 @@ function SqlObjectList({ conid, database }) {
         />
         <InlineButton onClick={handleRefreshDatabase}>Refresh</InlineButton>
       </SearchBoxWrapper>
-      <InnerContainer>
+      <WidgetsInnerContainer>
         {status && status.name == 'pending' ? (
           <LoadingInfo message="Loading database structure" />
         ) : (
@@ -104,7 +117,7 @@ function SqlObjectList({ conid, database }) {
             filter={filter}
           />
         )}
-      </InnerContainer>
+      </WidgetsInnerContainer>
     </>
   );
 }
@@ -122,13 +135,13 @@ function SqlObjectListWrapper() {
 
 export default function DatabaseWidget() {
   return (
-    <MainContainer>
-      <OuterContainer>
+    <WidgetsMainContainer>
+      <WidgetsOuterContainer>
         <ConnectionList />
-      </OuterContainer>
-      <OuterContainer>
+      </WidgetsOuterContainer>
+      <WidgetsOuterContainer>
         <SqlObjectListWrapper />
-      </OuterContainer>
-    </MainContainer>
+      </WidgetsOuterContainer>
+    </WidgetsMainContainer>
   );
 }

packages/web/src/widgets/FilesWidget.js

@@ -5,7 +5,14 @@ import _ from 'lodash';
 import { AppObjectList } from '../appobj/AppObjectList';
 import { useOpenedTabs, useSavedSqlFiles } from '../utility/globalState';
 import openedTabAppObject from '../appobj/openedTabAppObject';
-import { SearchBoxWrapper, InnerContainer, Input, MainContainer, OuterContainer, WidgetTitle } from './WidgetStyles';
+import {
+  SearchBoxWrapper,
+  WidgetsInnerContainer,
+  Input,
+  WidgetsMainContainer,
+  WidgetsOuterContainer,
+  WidgetTitle,
+} from './WidgetStyles';
 import savedSqlFileAppObject from '../appobj/savedSqlFileAppObject';
 
 function OpenedTabsList() {
@@ -14,9 +21,9 @@ function OpenedTabsList() {
   return (
     <>
       <WidgetTitle>Opened tabs</WidgetTitle>
-      <InnerContainer>
+      <WidgetsInnerContainer>
         <AppObjectList list={tabs} makeAppObj={openedTabAppObject()} />
-      </InnerContainer>
+      </WidgetsInnerContainer>
     </>
   );
 }
@@ -27,22 +34,22 @@ function SavedSqlFilesList() {
   return (
     <>
       <WidgetTitle>Saved SQL files</WidgetTitle>
-      <InnerContainer>
+      <WidgetsInnerContainer>
         <AppObjectList list={files} makeAppObj={savedSqlFileAppObject()} />
-      </InnerContainer>
+      </WidgetsInnerContainer>
     </>
   );
 }
 
 export default function FilesWidget() {
   return (
-    <MainContainer>
-      <OuterContainer>
+    <WidgetsMainContainer>
+      <WidgetsOuterContainer>
         <OpenedTabsList />
-      </OuterContainer>
-      <OuterContainer>
+      </WidgetsOuterContainer>
+      <WidgetsOuterContainer>
         <SavedSqlFilesList />
-      </OuterContainer>
-    </MainContainer>
+      </WidgetsOuterContainer>
+    </WidgetsMainContainer>
   );
 }

packages/web/src/widgets/WidgetStyles.js

@@ -6,7 +6,7 @@ export const SearchBoxWrapper = styled.div`
   margin-bottom: 5px;
 `;
 
-export const MainContainer = styled.div`
+export const WidgetsMainContainer = styled.div`
   position: relative;
   display: flex;
   flex-flow: column wrap;
@@ -15,7 +15,7 @@ export const MainContainer = styled.div`
   user-select: none;
 `;
 
-export const OuterContainer = styled.div`
+export const WidgetsOuterContainer = styled.div`
   flex: 1 1 0;
   overflow: hidden;
   width: ${theme.leftPanel.width}px;
@@ -24,7 +24,7 @@ export const OuterContainer = styled.div`
   display: flex;
 `;
 
-export const InnerContainer = styled.div`
+export const WidgetsInnerContainer = styled.div`
   flex: 1 1;
   overflow: scroll;
   width: ${theme.leftPanel.width}px;