fixed ts strict issue of useSubscription useDatabaseAccount markdown-cells text-file

.eslintignore

@@ -21,16 +21,8 @@ src/Common/MongoUtility.ts
 src/Common/NotificationsClientBase.ts
 src/Common/QueriesClient.ts
 src/Common/Splitter.ts
-src/Config.ts
-src/Contracts/ActionContracts.ts
-src/Contracts/DataModels.ts
-src/Contracts/Diagnostics.ts
-src/Contracts/ExplorerContracts.ts
-src/Contracts/Versions.ts
-src/Contracts/ViewModels.ts
 src/Controls/Heatmap/Heatmap.test.ts
 src/Controls/Heatmap/Heatmap.ts
-src/Controls/Heatmap/HeatmapDatatypes.ts
 src/Definitions/datatables.d.ts
 src/Definitions/gif.d.ts
 src/Definitions/globals.d.ts
@@ -44,29 +36,10 @@ src/Definitions/png.d.ts
 src/Definitions/svg.d.ts
 src/Explorer/ComponentRegisterer.test.ts
 src/Explorer/ComponentRegisterer.ts
-src/Explorer/Controls/CollapsiblePanel/CollapsiblePanelComponent.ts
 src/Explorer/Controls/DiffEditor/DiffEditorComponent.ts
-src/Explorer/Controls/DynamicList/DynamicList.test.ts
-src/Explorer/Controls/DynamicList/DynamicListComponent.ts
+
 src/Explorer/Controls/Editor/EditorComponent.ts
-src/Explorer/Controls/ErrorDisplayComponent/ErrorDisplayComponent.ts
-src/Explorer/Controls/InputTypeahead/InputTypeahead.ts
 src/Explorer/Controls/JsonEditor/JsonEditorComponent.ts
-src/Explorer/Controls/Notebook/NotebookAppMessageHandler.ts
-src/Explorer/Controls/ThroughputInput/ThroughputInputComponent.ts
-src/Explorer/Controls/ThroughputInput/ThroughputInputComponentAutoPilotV3.ts
-src/Explorer/Controls/Toolbar/IToolbarAction.ts
-src/Explorer/Controls/Toolbar/IToolbarDisplayable.ts
-src/Explorer/Controls/Toolbar/IToolbarDropDown.ts
-src/Explorer/Controls/Toolbar/IToolbarItem.ts
-src/Explorer/Controls/Toolbar/IToolbarSeperator.ts
-src/Explorer/Controls/Toolbar/IToolbarToggle.ts
-src/Explorer/Controls/Toolbar/KeyCodes.ts
-src/Explorer/Controls/Toolbar/Toolbar.ts
-src/Explorer/Controls/Toolbar/ToolbarAction.ts
-src/Explorer/Controls/Toolbar/ToolbarDropDown.ts
-src/Explorer/Controls/Toolbar/ToolbarToggle.ts
-src/Explorer/Controls/Toolbar/Utilities.ts
 src/Explorer/DataSamples/ContainerSampleGenerator.test.ts
 src/Explorer/DataSamples/ContainerSampleGenerator.ts
 src/Explorer/DataSamples/DataSamplesUtil.test.ts

src/Controls/Heatmap/Heatmap.test.ts

@@ -22,8 +22,8 @@ describe("The Heatmap Control", () => {
   };
 
   let heatmap: Heatmap;
-  let theme: PortalTheme = 1;
-  const divElement: string = `<div id="${Heatmap.elementId}"></div>`;
+  const theme: PortalTheme = 1;
+  const divElement = `<div id="${Heatmap.elementId}"></div>`;
 
   describe("drawHeatmap rendering", () => {
     beforeEach(() => {
@@ -100,7 +100,7 @@ describe("iframe rendering when there is no data", () => {
   });
 
   it("should show a no data message with a dark theme", () => {
-    let data = {
+    const data = {
       data: {
         signature: "pcIframe",
         data: {
@@ -111,7 +111,7 @@ describe("iframe rendering when there is no data", () => {
       },
     };
 
-    const divElement: string = `<div id="${Heatmap.elementId}"></div>`;
+    const divElement = `<div id="${Heatmap.elementId}"></div>`;
     document.body.innerHTML = divElement;
 
     handleMessage(data as MessageEvent);
@@ -120,7 +120,7 @@ describe("iframe rendering when there is no data", () => {
   });
 
   it("should show a no data message with a white theme", () => {
-    let data = {
+    const data = {
       data: {
         signature: "pcIframe",
         data: {
@@ -131,7 +131,7 @@ describe("iframe rendering when there is no data", () => {
       },
     };
 
-    const divElement: string = `<div id="${Heatmap.elementId}"></div>`;
+    const divElement = `<div id="${Heatmap.elementId}"></div>`;
     document.body.innerHTML = divElement;
 
     handleMessage(data as MessageEvent);

src/Controls/Heatmap/Heatmap.ts

@@ -39,7 +39,7 @@ export class Heatmap {
     }
   }
 
-  private _getFontStyles(size: number = StyleConstants.MediumFontSize, color: string = "#838383"): FontSettings {
+  private _getFontStyles(size: number = StyleConstants.MediumFontSize, color = "#838383"): FontSettings {
     return {
       family: StyleConstants.DataExplorerFont,
       size,
@@ -78,9 +78,9 @@ export class Heatmap {
     // go thru all rows and create 2d matrix for heatmap...
     for (let i = 0; i < rows.length; i++) {
       output.yAxisPoints.push(rows[i]);
-      let dataPoints: number[] = [];
+      const dataPoints: number[] = [];
       for (let a = 0; a < output.xAxisPoints.length; a++) {
-        let row: PartitionTimeStampToData = data[rows[i]];
+        const row: PartitionTimeStampToData = data[rows[i]];
         dataPoints.push(row[output.xAxisPoints[a]]["Normalized Throughput"]);
       }
       output.dataPoints.push(dataPoints);
@@ -193,7 +193,7 @@ export class Heatmap {
       this._getLayoutSettings(),
       this._getChartDisplaySettings()
     );
-    let plotDiv: any = document.getElementById(Heatmap.elementId);
+    const plotDiv: any = document.getElementById(Heatmap.elementId);
     plotDiv.on("plotly_click", (data: any) => {
       let timeSelected: string = data.points[0].x;
       timeSelected = timeSelected.replace(" ", "T");
@@ -205,7 +205,7 @@ export class Heatmap {
           break;
         }
       }
-      let output = [];
+      const output = [];
       for (let i = 0; i < this._chartData.dataPoints.length; i++) {
         output.push(this._chartData.dataPoints[i][xAxisIndex]);
       }

src/Explorer/Notebook/NotebookComponent/contents/file/text-file.tsx

@@ -18,7 +18,7 @@ const EditorContainer = styled.div`
 `;
 
 interface MappedStateProps {
-  mimetype: string;
+  mimetype: string | null;
   text: string;
   contentRef: ContentRef;
   theme?: "light" | "dark";
@@ -37,7 +37,7 @@ interface TextFileState {
 class EditorPlaceholder extends React.PureComponent<MonacoEditorProps> {
   render(): JSX.Element {
     // TODO: Show a little blocky placeholder
-    return undefined;
+    return <div />;
   }
 }
 
@@ -83,7 +83,7 @@ interface InitialProps {
 }
 
 function makeMapStateToTextFileProps(
-  initialState: AppState,
+  _initialState: AppState,
   initialProps: InitialProps
 ): (state: AppState) => MappedStateProps {
   const { contentRef } = initialProps;
@@ -106,7 +106,7 @@ function makeMapStateToTextFileProps(
 }
 
 const makeMapDispatchToTextFileProps = (
-  initialDispatch: Dispatch,
+  _initialDispatch: Dispatch,
   initialProps: InitialProps
 ): ((dispatch: Dispatch) => MappedDispatchProps) => {
   const { contentRef } = initialProps;

src/Explorer/Notebook/NotebookRenderer/markdown-cell.tsx

@@ -99,7 +99,7 @@ export class PureMarkdownCell extends React.Component<ComponentProps & DispatchP
 }
 
 export const makeMapStateToProps = (
-  initialState: AppState,
+  _initialState: AppState,
   ownProps: ComponentProps
 ): ((state: AppState) => StateProps) => {
   const { id, contentRef } = ownProps;
@@ -134,7 +134,7 @@ export const makeMapStateToProps = (
 };
 
 const makeMapDispatchToProps = (
-  initialDispatch: Dispatch,
+  _initialDispatch: Dispatch,
   ownProps: ComponentProps
 ): ((dispatch: Dispatch) => DispatchProps) => {
   const { id, contentRef } = ownProps;

src/Explorer/Panes/AddCollectionPanel.tsx

@@ -550,6 +550,72 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
             </Stack>
           )}
 
+          {this.shouldShowAnalyticalStoreOptions() && (
+            <Stack className="panelGroupSpacing">
+              <Stack horizontal>
+                <Text className="panelTextBold" variant="small">
+                  Analytical store
+                </Text>
+                <TooltipHost
+                  directionalHint={DirectionalHint.bottomLeftEdge}
+                  content={this.getAnalyticalStorageTooltipContent()}
+                >
+                  <Icon iconName="Info" className="panelInfoIcon" />
+                </TooltipHost>
+              </Stack>
+
+              <Stack horizontal verticalAlign="center">
+                <input
+                  className="panelRadioBtn"
+                  checked={this.state.enableAnalyticalStore}
+                  disabled={!this.isSynapseLinkEnabled()}
+                  aria-label="Enable analytical store"
+                  aria-checked={this.state.enableAnalyticalStore}
+                  name="analyticalStore"
+                  type="radio"
+                  role="radio"
+                  id="enableAnalyticalStoreBtn"
+                  tabIndex={0}
+                  onChange={this.onEnableAnalyticalStoreRadioBtnChange.bind(this)}
+                />
+                <span className="panelRadioBtnLabel">On</span>
+
+                <input
+                  className="panelRadioBtn"
+                  checked={!this.state.enableAnalyticalStore}
+                  disabled={!this.isSynapseLinkEnabled()}
+                  aria-label="Disable analytical store"
+                  aria-checked={!this.state.enableAnalyticalStore}
+                  name="analyticalStore"
+                  type="radio"
+                  role="radio"
+                  id="disableAnalyticalStoreBtn"
+                  tabIndex={0}
+                  onChange={this.onDisableAnalyticalStoreRadioBtnChange.bind(this)}
+                />
+                <span className="panelRadioBtnLabel">Off</span>
+              </Stack>
+
+              {!this.isSynapseLinkEnabled() && (
+                <Stack className="panelGroupSpacing">
+                  <Text variant="small">
+                    Azure Synapse Link is required for creating an analytical store{" "}
+                    {getCollectionName().toLocaleLowerCase()}. Enable Synapse Link for this Cosmos DB account.{" "}
+                    <Link href="https://aka.ms/cosmosdb-synapselink" target="_blank">
+                      Learn more
+                    </Link>
+                  </Text>
+                  <DefaultButton
+                    text="Enable"
+                    onClick={() => this.props.explorer.openEnableSynapseLinkDialog()}
+                    style={{ height: 27, width: 80 }}
+                    styles={{ label: { fontSize: 12 } }}
+                  />
+                </Stack>
+              )}
+            </Stack>
+          )}
+
           {userContext.apiType !== "Tables" && (
             <CollapsibleSectionComponent
               title="Advanced"
@@ -604,72 +670,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                     }
                   />
                 )}
-
-                {this.shouldShowAnalyticalStoreOptions() && (
-                  <Stack className="panelGroupSpacing">
-                    <Stack horizontal>
-                      <Text className="panelTextBold" variant="small">
-                        Analytical store
-                      </Text>
-                      <TooltipHost
-                        directionalHint={DirectionalHint.bottomLeftEdge}
-                        content={this.getAnalyticalStorageTooltipContent()}
-                      >
-                        <Icon iconName="Info" className="panelInfoIcon" />
-                      </TooltipHost>
-                    </Stack>
-
-                    <Stack horizontal verticalAlign="center">
-                      <input
-                        className="panelRadioBtn"
-                        checked={this.state.enableAnalyticalStore}
-                        disabled={!this.isSynapseLinkEnabled()}
-                        aria-label="Enable analytical store"
-                        aria-checked={this.state.enableAnalyticalStore}
-                        name="analyticalStore"
-                        type="radio"
-                        role="radio"
-                        id="enableAnalyticalStoreBtn"
-                        tabIndex={0}
-                        onChange={this.onEnableAnalyticalStoreRadioBtnChange.bind(this)}
-                      />
-                      <span className="panelRadioBtnLabel">On</span>
-
-                      <input
-                        className="panelRadioBtn"
-                        checked={!this.state.enableAnalyticalStore}
-                        disabled={!this.isSynapseLinkEnabled()}
-                        aria-label="Disable analytical store"
-                        aria-checked={!this.state.enableAnalyticalStore}
-                        name="analyticalStore"
-                        type="radio"
-                        role="radio"
-                        id="disableAnalyticalStoreBtn"
-                        tabIndex={0}
-                        onChange={this.onDisableAnalyticalStoreRadioBtnChange.bind(this)}
-                      />
-                      <span className="panelRadioBtnLabel">Off</span>
-                    </Stack>
-
-                    {!this.isSynapseLinkEnabled() && (
-                      <Stack className="panelGroupSpacing">
-                        <Text variant="small">
-                          Azure Synapse Link is required for creating an analytical store{" "}
-                          {getCollectionName().toLocaleLowerCase()}. Enable Synapse Link for this Cosmos DB account.{" "}
-                          <Link href="https://aka.ms/cosmosdb-synapselink" target="_blank">
-                            Learn more
-                          </Link>
-                        </Text>
-                        <DefaultButton
-                          text="Enable"
-                          onClick={() => this.props.explorer.openEnableSynapseLinkDialog()}
-                          style={{ height: 27, width: 80 }}
-                          styles={{ label: { fontSize: 12 } }}
-                        />
-                      </Stack>
-                    )}
-                  </Stack>
-                )}
               </Stack>
             </CollapsibleSectionComponent>
           )}

src/hooks/useDatabaseAccounts.tsx

@@ -32,8 +32,9 @@ export async function fetchDatabaseAccounts(subscriptionId: string, accessToken:
 
 export function useDatabaseAccounts(subscriptionId: string, armToken: string): DatabaseAccount[] | undefined {
   const { data } = useSWR(
-    () => (armToken && subscriptionId ? ["databaseAccounts", subscriptionId, armToken] : undefined),
-    (_, subscriptionId, armToken) => fetchDatabaseAccounts(subscriptionId, armToken)
+    // eslint-disable-next-line no-null/no-null
+    () => (armToken && subscriptionId ? ["databaseAccounts", subscriptionId, armToken] : null),
+    (_: string, subscriptionId: string, armToken: string) => fetchDatabaseAccounts(subscriptionId, armToken)
   );
   return data;
 }

src/hooks/useSubscriptions.tsx

@@ -34,8 +34,9 @@ export async function fetchSubscriptions(accessToken: string): Promise<Subscript
 
 export function useSubscriptions(armToken: string): Subscription[] | undefined {
   const { data } = useSWR(
-    () => (armToken ? ["subscriptions", armToken] : undefined),
-    (_, armToken) => fetchSubscriptions(armToken)
+    // eslint-disable-next-line no-null/no-null
+    () => (armToken ? ["subscriptions", armToken] : null),
+    (_: string, armToken: string) => fetchSubscriptions(armToken)
   );
   return data;
 }

tsconfig.strict.json

@@ -8,6 +8,9 @@
     "noUnusedParameters": true
   },
   "files": [
+    "./src/hooks/useDatabaseAccounts.tsx",
+    "./src/hooks/useSubscriptions.tsx",
+    "./src/Explorer/Notebook/NotebookComponent/contents/file/text-file.tsx",
     "./src/AuthType.ts",
     "./src/Bindings/ReactBindingHandler.ts",
     "./src/Common/ArrayHashMap.ts",
@@ -165,4 +168,4 @@
     "src/Terminal/**/*",
     "src/Utils/arm/**/*"
   ]
-}
+}

webpack.config.js

@@ -113,6 +113,7 @@ module.exports = function (_env = {}, argv = {}) {
     new CleanWebpackPlugin(),
     new webpack.ProvidePlugin({
       process: "process/browser",
+      Buffer: ["buffer", "Buffer"],
     }),
     new CreateFileWebpack({
       path: "./dist",
@@ -229,6 +230,7 @@ module.exports = function (_env = {}, argv = {}) {
       alias: {
         process: "process/browser",
       },
+
       fallback: {
         crypto: false,
         fs: false,