[@dagster-io/ui] Clean up deps (#7302)

* [@dagster-io/ui] Clean up deps * [@dagster-io/ui] Remove WIP suffixes across packages (#7305)
dagster-io · Apr 6, 2022 · 0692f86 · 0692f86 · vercel · Apr 6, 2022
1 parent 4996767
commit 0692f86
Show file tree

Hide file tree

Showing 187 changed files with 1,329 additions and 1,603 deletions.
diff --git a/js_modules/dagit/packages/app/package.json b/js_modules/dagit/packages/app/package.json
@@ -7,10 +7,8 @@
   "dependencies": {
     "@apollo/client": "3.3.16",
     "@blueprintjs/core": "^3.45.0",
-    "@blueprintjs/icons": "^3.26.1",
     "@blueprintjs/popover2": "0.10.1",
     "@blueprintjs/select": "^3.16.4",
-    "@blueprintjs/table": "^3.8.33",
     "@dagster-io/dagit-core": "workspace:*",
     "@dagster-io/ui": "workspace:*",
     "graphql": "^15.5.0",

diff --git a/js_modules/dagit/packages/app/src/index.tsx b/js_modules/dagit/packages/app/src/index.tsx
@@ -8,7 +8,7 @@ import {AppProvider} from '@dagster-io/dagit-core/app/AppProvider';
 import {AppTopNav} from '@dagster-io/dagit-core/app/AppTopNav';
 import {ContentRoot} from '@dagster-io/dagit-core/app/ContentRoot';
 import {logLink, timeStartLink} from '@dagster-io/dagit-core/app/apolloLinks';
-import {ColorsWIP, IconWIP, IconWrapper} from '@dagster-io/ui';
+import {Colors, Icon, IconWrapper} from '@dagster-io/ui';
 import * as React from 'react';
 import ReactDOM from 'react-dom';
 import {Link} from 'react-router-dom';
@@ -42,19 +42,19 @@ const SettingsLink = styled(Link)`
   }
 
   &:hover ${IconWrapper} {
-    background: ${ColorsWIP.White};
+    background: ${Colors.White};
   }
 
   &:active ${IconWrapper} {
-    background: ${ColorsWIP.White};
+    background: ${Colors.White};
   }
 `;
 
 ReactDOM.render(
   <AppProvider appCache={appCache} config={config}>
     <AppTopNav searchPlaceholder="Search…">
       <SettingsLink to="/settings" title="User settings">
-        <IconWIP name="settings" color={ColorsWIP.Gray200} />
+        <Icon name="settings" color={Colors.Gray200} />
       </SettingsLink>
     </AppTopNav>
     <App>

diff --git a/js_modules/dagit/packages/core/.storybook/preview.js b/js_modules/dagit/packages/core/.storybook/preview.js
@@ -7,7 +7,7 @@ import {
   GlobalSuggestStyle,
   GlobalToasterStyle,
   GlobalTooltipStyle,
-  ColorsWIP,
+  Colors,
 } from '@dagster-io/ui';
 
 import * as React from 'react';
@@ -23,15 +23,15 @@ const GlobalStyle = createGlobalStyle`
   }
 
   html, body {
-    color: ${ColorsWIP.Gray800};
+    color: ${Colors.Gray800};
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
 
   a,
   a:hover,
   a:active {
-    color: ${ColorsWIP.Link};
+    color: ${Colors.Link};
   }
 
   body {
@@ -64,7 +64,7 @@ const GlobalStyle = createGlobalStyle`
   }
 
   .bp3-button:disabled .material-icons {
-    color: ${ColorsWIP.Gray300}
+    color: ${Colors.Gray300}
   }
 `;
 

diff --git a/js_modules/dagit/packages/core/package.json b/js_modules/dagit/packages/core/package.json
@@ -21,10 +21,8 @@
   "peerDependencies": {
     "@apollo/client": "3.3.16",
     "@blueprintjs/core": "^3.45.0",
-    "@blueprintjs/icons": "^3.26.1",
     "@blueprintjs/popover2": "0.10.1",
     "@blueprintjs/select": "^3.16.4",
-    "@blueprintjs/table": "^3.8.33",
     "@dagster-io/ui": "workspace:*",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -57,6 +55,9 @@
     "react-codemirror2": "^7.2.1",
     "react-is": "^17.0.2",
     "react-virtualized": "^9.22.3",
+    "remark": "13.x",
+    "remark-gfm": "1.0.0",
+    "remark-plain-text": "^0.2.0",
     "subscriptions-transport-ws": "^0.9.15",
     "worker-loader": "^3.0.8",
     "yaml": "2.0.0-10"
@@ -74,10 +75,8 @@
     "@babel/preset-typescript": "7.15.0",
     "@babel/runtime": "^7.13.10",
     "@blueprintjs/core": "^3.45.0",
-    "@blueprintjs/icons": "^3.26.1",
     "@blueprintjs/popover2": "0.10.1",
     "@blueprintjs/select": "^3.16.4",
-    "@blueprintjs/table": "^3.8.33",
     "@dagster-io/ui": "1.0.0",
     "@graphql-tools/mock": "^8.5.0",
     "@graphql-tools/schema": "^8.3.1",

diff --git a/js_modules/dagit/packages/core/src/app/AppProvider.tsx b/js_modules/dagit/packages/core/src/app/AppProvider.tsx
@@ -9,7 +9,7 @@ import {
 import {WebSocketLink} from '@apollo/client/link/ws';
 import {getMainDefinition} from '@apollo/client/utilities';
 import {
-  ColorsWIP,
+  Colors,
   GlobalDialogStyle,
   GlobalPopoverStyle,
   GlobalSuggestStyle,
@@ -49,7 +49,7 @@ const GlobalStyle = createGlobalStyle`
   }
 
   html, body, #root {
-    color: ${ColorsWIP.Gray800};
+    color: ${Colors.Gray800};
     width: 100vw;
     height: 100vh;
     overflow: hidden;
@@ -62,7 +62,7 @@ const GlobalStyle = createGlobalStyle`
   a,
   a:hover,
   a:active {
-    color: ${ColorsWIP.Link};
+    color: ${Colors.Link};
   }
 
   #root {
@@ -101,7 +101,7 @@ const GlobalStyle = createGlobalStyle`
   }
 
   .bp3-button:disabled .material-icons {
-    color: ${ColorsWIP.Gray300}
+    color: ${Colors.Gray300}
   }
 `;
 

diff --git a/js_modules/dagit/packages/core/src/app/AppTopNav.tsx b/js_modules/dagit/packages/core/src/app/AppTopNav.tsx
@@ -1,4 +1,4 @@
-import {Box, ColorsWIP, IconWIP, IconWrapper, Tooltip} from '@dagster-io/ui';
+import {Box, Colors, Icon, IconWrapper, Tooltip} from '@dagster-io/ui';
 import * as React from 'react';
 import {Link, useHistory} from 'react-router-dom';
 import styled from 'styled-components/macro';
@@ -103,7 +103,7 @@ export const AppTopNavLogo: React.FC = () => {
           ref={navButton}
           $visible={nav.isCollapsible}
         >
-          <IconWIP name="menu" color={ColorsWIP.White} size={24} />
+          <Icon name="menu" color={Colors.White} size={24} />
         </NavButton>
       </ShortcutHandler>
       <Box flex={{display: 'inline-flex'}} margin={{left: 8}}>
@@ -174,20 +174,20 @@ const DaggyTooltip = styled(Tooltip)`
 `;
 
 export const TopNavLink = styled(Link)`
-  color: ${ColorsWIP.Gray200};
+  color: ${Colors.Gray200};
   font-weight: 600;
   transition: color 50ms linear;
   padding: 24px 0;
 
   :hover,
   :active {
-    color: ${ColorsWIP.White};
+    color: ${Colors.White};
     text-decoration: none;
   }
 `;
 
 export const AppTopNavContainer = styled.div`
-  background: ${ColorsWIP.Gray900};
+  background: ${Colors.Gray900};
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -227,14 +227,14 @@ const NavButton = styled.button<{$visible: boolean}>`
   }
 
   :hover ${IconWrapper} {
-    background: ${ColorsWIP.Gray500};
+    background: ${Colors.Gray500};
   }
 
   :active ${IconWrapper} {
-    background: ${ColorsWIP.Blue200};
+    background: ${Colors.Blue200};
   }
 
   :focus {
-    background: ${ColorsWIP.Gray700};
+    background: ${Colors.Gray700};
   }
 `;
diff --git a/js_modules/dagit/packages/core/src/app/CustomAlertProvider.tsx b/js_modules/dagit/packages/core/src/app/CustomAlertProvider.tsx
@@ -1,4 +1,4 @@
-import {ButtonWIP, DialogWIP, DialogBody, DialogFooter, FontFamily} from '@dagster-io/ui';
+import {Button, Dialog, DialogBody, DialogFooter, FontFamily} from '@dagster-io/ui';
 import * as React from 'react';
 import styled from 'styled-components/macro';
 
@@ -46,7 +46,7 @@ export const CustomAlertProvider = () => {
   );
 
   return (
-    <DialogWIP
+    <Dialog
       title={alert?.title}
       icon={alert ? 'info' : undefined}
       onClose={() => setCustomAlert(null)}
@@ -59,14 +59,14 @@ export const CustomAlertProvider = () => {
         </DialogBody>
       ) : null}
       <DialogFooter>
-        <ButtonWIP autoFocus={false} onClick={onCopy}>
+        <Button autoFocus={false} onClick={onCopy}>
           Copy
-        </ButtonWIP>
-        <ButtonWIP intent="primary" autoFocus={true} onClick={() => setCustomAlert(null)}>
+        </Button>
+        <Button intent="primary" autoFocus={true} onClick={() => setCustomAlert(null)}>
           OK
-        </ButtonWIP>
+        </Button>
       </DialogFooter>
-    </DialogWIP>
+    </Dialog>
   );
 };
 

diff --git a/js_modules/dagit/packages/core/src/app/CustomConfirmationProvider.tsx b/js_modules/dagit/packages/core/src/app/CustomConfirmationProvider.tsx
@@ -1,4 +1,4 @@
-import {ButtonWIP, DialogBody, DialogFooter, DialogWIP} from '@dagster-io/ui';
+import {Button, DialogBody, DialogFooter, Dialog} from '@dagster-io/ui';
 import * as React from 'react';
 
 interface ConfirmationOptions {
@@ -21,15 +21,15 @@ const ConfirmationDialog: React.FC<ConfirmationDialogProps> = ({
   onClose,
 }) => {
   return (
-    <DialogWIP icon={title ? 'info' : undefined} onClose={onClose} title={title} isOpen={open}>
+    <Dialog icon={title ? 'info' : undefined} onClose={onClose} title={title} isOpen={open}>
       <DialogBody>{description}</DialogBody>
       <DialogFooter>
-        <ButtonWIP onClick={onClose}>Cancel</ButtonWIP>
-        <ButtonWIP onClick={onSubmit} intent="danger">
+        <Button onClick={onClose}>Cancel</Button>
+        <Button onClick={onSubmit} intent="danger">
           Confirm
-        </ButtonWIP>
+        </Button>
       </DialogFooter>
-    </DialogWIP>
+    </Dialog>
   );
 };
 

diff --git a/js_modules/dagit/packages/core/src/app/FallthroughRoot.tsx b/js_modules/dagit/packages/core/src/app/FallthroughRoot.tsx
@@ -1,4 +1,4 @@
-import {Box, ExternalAnchorButton, ColorsWIP, NonIdealState, Spinner} from '@dagster-io/ui';
+import {Box, ExternalAnchorButton, Colors, NonIdealState, Spinner} from '@dagster-io/ui';
 import * as React from 'react';
 import {Redirect, Route, Switch, useLocation} from 'react-router-dom';
 
@@ -37,7 +37,7 @@ const FinalRedirectOrLoadingRoot = () => {
       <Box flex={{direction: 'row', justifyContent: 'center'}} style={{paddingTop: '100px'}}>
         <Box flex={{direction: 'row', alignItems: 'center', gap: 16}}>
           <Spinner purpose="section" />
-          <div style={{color: ColorsWIP.Gray600}}>Loading workspace…</div>
+          <div style={{color: Colors.Gray600}}>Loading workspace…</div>
         </Box>
       </Box>
     );

diff --git a/js_modules/dagit/packages/core/src/app/PythonErrorInfo.tsx b/js_modules/dagit/packages/core/src/app/PythonErrorInfo.tsx
@@ -1,5 +1,5 @@
 import {gql} from '@apollo/client';
-import {ButtonWIP, IconWIP, FontFamily} from '@dagster-io/ui';
+import {Button, Icon, FontFamily} from '@dagster-io/ui';
 import * as React from 'react';
 import styled from 'styled-components/macro';
 
@@ -45,9 +45,9 @@ export const PythonErrorInfo: React.FC<IPythonErrorInfoProps> = (props) => {
           </>
         ) : null}
         {props.showReload && (
-          <ButtonWIP icon={<IconWIP name="refresh" />} onClick={() => window.location.reload()}>
+          <Button icon={<Icon name="refresh" />} onClick={() => window.location.reload()}>
             Reload
-          </ButtonWIP>
+          </Button>
         )}
       </Wrapper>
     </>

diff --git a/js_modules/dagit/packages/core/src/app/SettingsRoot.tsx b/js_modules/dagit/packages/core/src/app/SettingsRoot.tsx
@@ -2,7 +2,7 @@ import {
   Box,
   ButtonLink,
   Checkbox,
-  ColorsWIP,
+  Colors,
   MetadataTable,
   PageHeader,
   Heading,
@@ -55,7 +55,7 @@ const SettingsRoot = () => {
       </Box>
       <Box
         padding={{vertical: 16, horizontal: 24}}
-        border={{side: 'top', width: 1, color: ColorsWIP.KeylineGray}}
+        border={{side: 'top', width: 1, color: Colors.KeylineGray}}
       >
         <Box padding={{bottom: 8}}>
           <Subheading>Experimental features</Subheading>

diff --git a/js_modules/dagit/packages/core/src/app/ShortcutHandler.tsx b/js_modules/dagit/packages/core/src/app/ShortcutHandler.tsx
@@ -1,4 +1,4 @@
-import {ColorsWIP} from '@dagster-io/ui';
+import {Colors} from '@dagster-io/ui';
 import * as React from 'react';
 import ReactDOM from 'react-dom';
 import styled from 'styled-components/macro';
@@ -189,9 +189,9 @@ const ShortcutAnnotation = styled.div`
   padding: 2px;
   z-index: 20;
   transform: translate(-90%, -10px);
-  color: ${ColorsWIP.Gray100};
-  background: ${ColorsWIP.Gray800};
-  border: 1px solid ${ColorsWIP.Gray300};
+  color: ${Colors.Gray100};
+  background: ${Colors.Gray800};
+  border: 1px solid ${Colors.Gray300};
   border-radius: 3px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 `;
diff --git a/js_modules/dagit/packages/core/src/app/WebSocketProvider.tsx b/js_modules/dagit/packages/core/src/app/WebSocketProvider.tsx
@@ -1,4 +1,4 @@
-import {ColorsWIP} from '@dagster-io/ui';
+import {Colors} from '@dagster-io/ui';
 import debounce from 'lodash/debounce';
 import * as React from 'react';
 import styled from 'styled-components/macro';
@@ -106,17 +106,15 @@ export const WebSocketStatus: React.FC = (props) => (
     {({status}) =>
       ({
         [WebSocket.CONNECTING]: (
-          <Circle style={{background: ColorsWIP.Green200}} title="Connecting..." {...props} />
+          <Circle style={{background: Colors.Green200}} title="Connecting..." {...props} />
         ),
         [WebSocket.OPEN]: (
-          <Circle style={{background: ColorsWIP.Green500}} title="Connected" {...props} />
+          <Circle style={{background: Colors.Green500}} title="Connected" {...props} />
         ),
         [WebSocket.CLOSING]: (
-          <Circle style={{background: ColorsWIP.Gray400}} title="Closing..." {...props} />
+          <Circle style={{background: Colors.Gray400}} title="Closing..." {...props} />
         ),
-      }[status] || (
-        <Circle style={{background: ColorsWIP.Gray400}} title="Disconnected" {...props} />
-      ))
+      }[status] || <Circle style={{background: Colors.Gray400}} title="Disconnected" {...props} />)
     }
   </WebSocketContext.Consumer>
 );
diff --git a/js_modules/dagit/packages/core/src/app/blueprint.css b/js_modules/dagit/packages/core/src/app/blueprint.css
@@ -1,5 +1,3 @@
 @import '@blueprintjs/core/lib/css/blueprint.css';
-@import '@blueprintjs/icons/lib/css/blueprint-icons.css';
 @import '@blueprintjs/select/lib/css/blueprint-select.css';
-@import '@blueprintjs/table/lib/css/table.css';
 @import '@blueprintjs/popover2/lib/css/blueprint-popover2.css';